jquery相关笔记（三）
1.一些前端网站：http://f2er.club/ 醉牛前端-前端人的俱乐部，
https://www.awesomes.cn/ 令人惊叹的前端开发资源库，
https://code.jquery.com/jquery/#jquery-all-1.x jQuery的核心–所有版本。
2.jQuery属性操作：
◆设置属性：当前节点.attr(属性名,属性值);
◆获取属性：当前节点.attr(属性名);
◆移除属性：当前节点.removeAttr(属性名);
★使用attr对象对bool类型值得属性赋值时，其实并不会赋值true或者false，如果赋值为false则是undefined，如果是true则是非udefined，所以这样不好，可能会出现多次赋值后失灵无效，因为这种方式不适合操作bool类型值的属性的，于是一个新的专门针对true和false改进的方法诞生，是prop，操作方式和attr一模一样，但是是针对bool类型值得属性赋值的。
◆设置属性：当前节点.prop(属性名,属性值);
◆获取属性：当前节点.prop(属性名);
◆移除属性：当前节点.removeProp(属性名);
3.表单选择器与表单对象属性选择器
◆表单选择器【
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
】
◆表单对象属性选择器【
:enabled
:disabled
:checked
:selected
】
4.三种获取设置值的方法 val()、text()、html()
◆val()：主要是用来获取 标签中允许拥有value的属性的值，几乎所有表单标签都有value属性值。
◆text()：主要用来获取标签对中的文本内容，其实就是原生js中的innerText和textContent的兼容。
◆html()：主要用来获取标签对中的文本内容或html标签文本，很像是原生js中的innerHTML。
★方法中不写参数就是获取值，方法中写参数就是设置值。
5.获取和设置宽高的方法 height()和width()
◆height()：只是单纯的获取css样式中的height属性值，与padding和border以及margin无关。
◆width()：只是单纯的获取css样式中的width属性值，与padding和border以及margin无关。
★方法中不写参数就是获取值（获取的值为纯数字），方法中写参数就是设置值，设置值的方式可以是纯数字，参数为纯数字时默认像素为单位，参数也可以是字符串。
6.获取定位的距离
◆offset().top：表示距离浏览器起始点（0，0）点的y轴的距离，和无论有没有定位（maring的属性值也算），并且offset().top获取的都是针对浏览器起始点，与js原生属性offsetTop不一样，由于无论有没有定位都是针对浏览器的起始点。
◆offset().left：表示距离浏览器起始点（0，0）点的x轴的距离，和无论有没有定位（maring的属性值也算），并且offset().left获取的都是针对浏览器起始点，与js原生属性offsetLeft不一样。
★offset()还可以赋值，如offset({left:200,top:200})，赋值的时候其实就是设置定位时的left和top属性值;，但是实际上它会和当前的位置上的坐标值进行计算（和margin的属性值进行减法运算），从而得到真正的定位坐标属性left和top值，然后再进行设置。
◆position().top：表示距离父级非静态定位的盒子的y轴距离，这个方法其实就是获取定位时设置的top属性值而已与其它属性值无关。
◆position().left：表示距离父级非静态定位的盒子的x轴距离，这个方法其实就是获取定位时设置的left属性值而已与其它属性值无关，可能会与父容器的margin-left值相关联。
◆scrollTop()：表示距离元素被卷去的距离，用法$(document).scrollTop()，相当于之前封装的scroll方法一样scroll().scrollTop()，如果你像获取元素被卷去的距离，可以让元素产生滚动条，这样就能够获取了，使用overflow:auto;获取overflow:scroll;来产生滚动条，前提条件是，子容器要大于父容器。
◆scrollLeft()：表示距离元素被卷去的距离，用法$(document).scrollLeft()，相当于之前封装的scroll方法一样scroll().scrollLeft()，如果你像获取元素被卷去的距离，可以让元素产生滚动条，这样就能够获取了，使用overflow:auto;获取overflow:scroll;来产生滚动条，前提条件是，子容器要大于父容器。
★scrollTop()方法与scrollLeft()方法其实不光可以获取并且还可以设置，内部调用了window.moveTo(x,y)的方法，不光可以$(document).scrollLeft()，也可以是$(window).scrollLeft()，是一样的，因为自己封装scroll()时就是这样子的【
function scroll(){
return {
scollLeft: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft,
scollTop: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop
}
}
】。
7.jQuery事件机制
◆jQuery的事件机制，指的是：jQuery对javascript操作dom事件的封装，包括了：事件绑定、事件解绑、事件触发。
◆jQuery事件的发展历程：简单事件绑定-->bind事件绑定-->delegate事件绑定-->on事件绑定（on最优秀，因为bind、delegate内部就是使用的on，所以on是最好的）
8.事件绑定的四种方式（其实只有两种方式 一种非事件委托的方式、一种事件委托的方式 ）
◆简单事件绑定【
◇ $(".box").click(function(){}); //这种放式最为简单了，可以多次绑定，不会被后面绑定的相同的事件层叠掉，一次只能够绑定一个事件，并且无法以指定父容器的方式给子元素绑定事件，也就是说不会进行事件委托了。
】
◆bind事件绑定【
◇$(".box").bind("click dbclick",function(){});//这种方式要比简单事件绑定复杂一点，但是在jQuery1.7版本后不再使用了，不仅有简单事件绑定的所有优点，并且至此多事件绑定，但是依旧不能进行事件委托，因为事件委托的方式仅仅是需要依赖父容器的。
】
◆delegate事件绑定【
◇$(".box").delegate(null,"click dbclick",function(){});//这种方式与bind事件绑定一样的，实际上无论是bind还是delegate内部使用的都是on事件绑定。
◇$(document).delegate(".box","click dbclick",function(){});//这种方式属于事件委托的方式绑定事件
】
◆on事件绑定 【
◇$(".box").on("click dbclick",{age:20},function(){});//非事件委托的方式绑定事件，bind与delegate还有on都是一样的，只不过参数有点区别而已。
◇$(document).on("click dbclick",".box",{age:20},function(){});//事件委托的方式绑定事件，推荐使用这种，最好用了，{age:20}表示事件绑定时传递一个数据进去，然后事件触发后，可以在内部获取这个数据，但是绑定的时候function(event){}，方法的参数里面要加一个event或者其它形参，然后在方法内部可以使用 event.data的方式获取你传递进去的数据。
】
8.事件解绑的两种方式 （非事件委托的方式与事件委托的方式）
◆事件绑定的方式有四种 分别是 简单事件绑定、bind事件绑定、delegate事件绑定（支持事件委托）、on事件绑定(支持事件委托)
◆由于这几种方式绑定事件都不会被层叠掉，非指定父容器给子容器（非事件委托）的简单事件绑定、bind事件绑定、delegate、on事件绑定可以使用 对象.unbind()、对象.undelegate()、对象.off()来解绑【
◇ $("div").unbind();
◇$("div").undelegate();
◇$("div").off();
】，如果指定父容器给子容器（事件委托）的delegate和on事件绑定可以使用相应的undelegate()和off()方式来解绑【
◇$(document).undelegate("div","click dbclick");//解绑指定的元素的指定事件
◇$(document).off("click dbclick","div");//解绑指定的元素的指定事件
◇$(document).off("","div"); //解除指定元素的全部事件
】。
◆事件解绑不仅仅可以解绑全部事件，也可以针对性的解绑某一个事件，获取某一个事件中的某一个方法，但是你绑定事件的时候，方法不能是匿名函数，不然找不到指针地址，当不解绑全部事件时，怎么绑定的就怎么解绑，参数差不多，如【
//绑定
$(document).delegate(".box","click blur keydown",function(e){
//事件驱动程序
})
//解绑
$(document).undelegate(".box","click");
】
★使用bind绑定事件会存在bug，例如双击事件的绑定是无法解除的，必须使用全部解绑的方式
【
◇ $("div").unbind();
】才能够解绑。
9.事件触发的三种方式
◆事件触发的第一种方式其实就是 简单事件绑定时方法不要参数，如【
$(".box").click();
$(".box").dbclick();
】，这种方式会触发浏览器的默认行为，例如文本框获取焦点后会有样式的变化之类的表现。
◆事件触发的第二种方式使用$(".box").trigger("click dbclick");，可以同时触发多个事件，其实也可以传递叫data的数据进去，但是不常用，因为on绑定事件的方式已经传递了data，这种方式会触发浏览器的默认行为，如超链接的点击事件会进行默认跳转。
◆事件触发的第三种方式使用$(".box").triggerHandler("click dbclick");，其实和第二种触发方式相比只有一个区别，就是这种方式不会触发浏览器的默认行为，相当于执行完了事件中的方法后会取消默认的行为比如return false之类的，然后超链接不跳转了，文本框不会显示获取焦点后的样式变化的表现，有一个缺点， 就是不支持事件委托的方式绑定的事件。
10.jQuery事件对象的常用属性
◆event.data：传递事件处理程序的额外数据
◆event.currentTarget：等同与this，当前的dom对象
◆event.pageX：鼠标相对与页面文档x轴的坐标值
◆event.pageY：鼠标相对与页面文档y轴的坐标值
◆event.target：触发事件源，不一定绝对等于this，因为可能会是事件委托
◆event.stopPropagation()：阻止事件冒泡
◆event.preventDefault()：阻止默认行为
◆event.type：事件类型：click，dbclick...
◆event.which：鼠标的按键类型：左边1 中间2 右边3
◆event.keyCode：键盘按键代码
11.按回车就让文本框的焦点移动到下一个文本框中，使用的是文本框的keydown事件，判断event.keyCode码，如果是回车键的码，那么就将焦点移动到下一个文本框中，使用的是focus()，或者select方法也行，focus只是让下一个文本框获得焦点，而select方法会让下一个文本框获取焦点的同时选中下一个文本框中的内容。
12.链式编程的原理是，最后都会return this，但是通常情况下，只有设置的操作才能把链式编程延续下去。因为获取操作的时候，或返回获取到的值，所以无法返回this，于是乎，可以使用end()，找到当前链最近的一次断链之前的对象，也就是说，如果没有返回之前那个this，可以通过end()方法获取到之前获取到的那个this。
13.隐式遍历是因为内部对jQuery对象进行了循环操作，实际上jQuery对象都是一个伪数组对象，jQuery中有显式遍历的方式，each和map方法，遍历的操作方式和数组的forEach与map方法类似，内部获取到的每一个元素也是原生js的dom对象。
14.解决多库共存方法
◆当引入jQuery的多个版本库时，无论使用$还是jQuery，其实都是在使用最后一个引入的jQuery版本库，可以通过打印jQuery的版本号来确定（console.log($.fn.jquery);console.log(jQuery.fn.jquery);）
◆如果你想放弃$的使用权然后将$符号使用权转交给上一个引入的jQuery版本库的话，可以使用$.noConflict()，然后你就可以通过调用$符号使用上一个jQuery版本库了，而当前这一个版本库你可以使用jQuery单词来调用
◆如果你想放弃$符号与jQuery单词的使用权而改用其它自定义的单词时，可以使用var customer=$.noConflict(true);，然后当前这个jQuery版本库就能够通过调用customer单词来使用了，而$符号与jQuery单词的使用权归上一个引入的jQuery版本库使用了，但是可以通过连续的这种方式，实现真正的n个版本的jQuery版本库共存。
◆jQuery版本库的多版本库的引入都是从低到高的引入，不推荐从高到低的引入。
15.原生js使用原型的方式是：object.prototype.functionName=function(){}，jQuery使用原型的方式是：$.fn.functionName=function(){}，其实都差不多，只不过前者是给对象扩展方法，后者是给伪数组扩展方法。
16.jquery的1.xx版本是支持IE678等低版本的浏览器的，而jquery的2.xx版本是不支持IE678等低版本的浏览器的
https://www.awesomes.cn/ 令人惊叹的前端开发资源库，
https://code.jquery.com/jquery/#jquery-all-1.x jQuery的核心–所有版本。
2.jQuery属性操作：
◆设置属性：当前节点.attr(属性名,属性值);
◆获取属性：当前节点.attr(属性名);
◆移除属性：当前节点.removeAttr(属性名);
★使用attr对象对bool类型值得属性赋值时，其实并不会赋值true或者false，如果赋值为false则是undefined，如果是true则是非udefined，所以这样不好，可能会出现多次赋值后失灵无效，因为这种方式不适合操作bool类型值的属性的，于是一个新的专门针对true和false改进的方法诞生，是prop，操作方式和attr一模一样，但是是针对bool类型值得属性赋值的。
◆设置属性：当前节点.prop(属性名,属性值);
◆获取属性：当前节点.prop(属性名);
◆移除属性：当前节点.removeProp(属性名);
3.表单选择器与表单对象属性选择器
◆表单选择器【
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
】
◆表单对象属性选择器【
:enabled
:disabled
:checked
:selected
】
4.三种获取设置值的方法 val()、text()、html()
◆val()：主要是用来获取 标签中允许拥有value的属性的值，几乎所有表单标签都有value属性值。
◆text()：主要用来获取标签对中的文本内容，其实就是原生js中的innerText和textContent的兼容。
◆html()：主要用来获取标签对中的文本内容或html标签文本，很像是原生js中的innerHTML。
★方法中不写参数就是获取值，方法中写参数就是设置值。
5.获取和设置宽高的方法 height()和width()
◆height()：只是单纯的获取css样式中的height属性值，与padding和border以及margin无关。
◆width()：只是单纯的获取css样式中的width属性值，与padding和border以及margin无关。
★方法中不写参数就是获取值（获取的值为纯数字），方法中写参数就是设置值，设置值的方式可以是纯数字，参数为纯数字时默认像素为单位，参数也可以是字符串。
6.获取定位的距离
◆offset().top：表示距离浏览器起始点（0，0）点的y轴的距离，和无论有没有定位（maring的属性值也算），并且offset().top获取的都是针对浏览器起始点，与js原生属性offsetTop不一样，由于无论有没有定位都是针对浏览器的起始点。
◆offset().left：表示距离浏览器起始点（0，0）点的x轴的距离，和无论有没有定位（maring的属性值也算），并且offset().left获取的都是针对浏览器起始点，与js原生属性offsetLeft不一样。
★offset()还可以赋值，如offset({left:200,top:200})，赋值的时候其实就是设置定位时的left和top属性值;，但是实际上它会和当前的位置上的坐标值进行计算（和margin的属性值进行减法运算），从而得到真正的定位坐标属性left和top值，然后再进行设置。
◆position().top：表示距离父级非静态定位的盒子的y轴距离，这个方法其实就是获取定位时设置的top属性值而已与其它属性值无关。
◆position().left：表示距离父级非静态定位的盒子的x轴距离，这个方法其实就是获取定位时设置的left属性值而已与其它属性值无关，可能会与父容器的margin-left值相关联。
◆scrollTop()：表示距离元素被卷去的距离，用法$(document).scrollTop()，相当于之前封装的scroll方法一样scroll().scrollTop()，如果你像获取元素被卷去的距离，可以让元素产生滚动条，这样就能够获取了，使用overflow:auto;获取overflow:scroll;来产生滚动条，前提条件是，子容器要大于父容器。
◆scrollLeft()：表示距离元素被卷去的距离，用法$(document).scrollLeft()，相当于之前封装的scroll方法一样scroll().scrollLeft()，如果你像获取元素被卷去的距离，可以让元素产生滚动条，这样就能够获取了，使用overflow:auto;获取overflow:scroll;来产生滚动条，前提条件是，子容器要大于父容器。
★scrollTop()方法与scrollLeft()方法其实不光可以获取并且还可以设置，内部调用了window.moveTo(x,y)的方法，不光可以$(document).scrollLeft()，也可以是$(window).scrollLeft()，是一样的，因为自己封装scroll()时就是这样子的【
function scroll(){
return {
scollLeft: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft,
scollTop: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop
}
}
】。
7.jQuery事件机制
◆jQuery的事件机制，指的是：jQuery对javascript操作dom事件的封装，包括了：事件绑定、事件解绑、事件触发。
◆jQuery事件的发展历程：简单事件绑定-->bind事件绑定-->delegate事件绑定-->on事件绑定（on最优秀，因为bind、delegate内部就是使用的on，所以on是最好的）
8.事件绑定的四种方式（其实只有两种方式 一种非事件委托的方式、一种事件委托的方式 ）
◆简单事件绑定【
◇ $(".box").click(function(){}); //这种放式最为简单了，可以多次绑定，不会被后面绑定的相同的事件层叠掉，一次只能够绑定一个事件，并且无法以指定父容器的方式给子元素绑定事件，也就是说不会进行事件委托了。
】
◆bind事件绑定【
◇$(".box").bind("click dbclick",function(){});//这种方式要比简单事件绑定复杂一点，但是在jQuery1.7版本后不再使用了，不仅有简单事件绑定的所有优点，并且至此多事件绑定，但是依旧不能进行事件委托，因为事件委托的方式仅仅是需要依赖父容器的。
】
◆delegate事件绑定【
◇$(".box").delegate(null,"click dbclick",function(){});//这种方式与bind事件绑定一样的，实际上无论是bind还是delegate内部使用的都是on事件绑定。
◇$(document).delegate(".box","click dbclick",function(){});//这种方式属于事件委托的方式绑定事件
】
◆on事件绑定 【
◇$(".box").on("click dbclick",{age:20},function(){});//非事件委托的方式绑定事件，bind与delegate还有on都是一样的，只不过参数有点区别而已。
◇$(document).on("click dbclick",".box",{age:20},function(){});//事件委托的方式绑定事件，推荐使用这种，最好用了，{age:20}表示事件绑定时传递一个数据进去，然后事件触发后，可以在内部获取这个数据，但是绑定的时候function(event){}，方法的参数里面要加一个event或者其它形参，然后在方法内部可以使用 event.data的方式获取你传递进去的数据。
】
8.事件解绑的两种方式 （非事件委托的方式与事件委托的方式）
◆事件绑定的方式有四种 分别是 简单事件绑定、bind事件绑定、delegate事件绑定（支持事件委托）、on事件绑定(支持事件委托)
◆由于这几种方式绑定事件都不会被层叠掉，非指定父容器给子容器（非事件委托）的简单事件绑定、bind事件绑定、delegate、on事件绑定可以使用 对象.unbind()、对象.undelegate()、对象.off()来解绑【
◇ $("div").unbind();
◇$("div").undelegate();
◇$("div").off();
】，如果指定父容器给子容器（事件委托）的delegate和on事件绑定可以使用相应的undelegate()和off()方式来解绑【
◇$(document).undelegate("div","click dbclick");//解绑指定的元素的指定事件
◇$(document).off("click dbclick","div");//解绑指定的元素的指定事件
◇$(document).off("","div"); //解除指定元素的全部事件
】。
◆事件解绑不仅仅可以解绑全部事件，也可以针对性的解绑某一个事件，获取某一个事件中的某一个方法，但是你绑定事件的时候，方法不能是匿名函数，不然找不到指针地址，当不解绑全部事件时，怎么绑定的就怎么解绑，参数差不多，如【
//绑定
$(document).delegate(".box","click blur keydown",function(e){
//事件驱动程序
})
//解绑
$(document).undelegate(".box","click");
】
★使用bind绑定事件会存在bug，例如双击事件的绑定是无法解除的，必须使用全部解绑的方式
【
◇ $("div").unbind();
】才能够解绑。
9.事件触发的三种方式
◆事件触发的第一种方式其实就是 简单事件绑定时方法不要参数，如【
$(".box").click();
$(".box").dbclick();
】，这种方式会触发浏览器的默认行为，例如文本框获取焦点后会有样式的变化之类的表现。
◆事件触发的第二种方式使用$(".box").trigger("click dbclick");，可以同时触发多个事件，其实也可以传递叫data的数据进去，但是不常用，因为on绑定事件的方式已经传递了data，这种方式会触发浏览器的默认行为，如超链接的点击事件会进行默认跳转。
◆事件触发的第三种方式使用$(".box").triggerHandler("click dbclick");，其实和第二种触发方式相比只有一个区别，就是这种方式不会触发浏览器的默认行为，相当于执行完了事件中的方法后会取消默认的行为比如return false之类的，然后超链接不跳转了，文本框不会显示获取焦点后的样式变化的表现，有一个缺点， 就是不支持事件委托的方式绑定的事件。
10.jQuery事件对象的常用属性
◆event.data：传递事件处理程序的额外数据
◆event.currentTarget：等同与this，当前的dom对象
◆event.pageX：鼠标相对与页面文档x轴的坐标值
◆event.pageY：鼠标相对与页面文档y轴的坐标值
◆event.target：触发事件源，不一定绝对等于this，因为可能会是事件委托
◆event.stopPropagation()：阻止事件冒泡
◆event.preventDefault()：阻止默认行为
◆event.type：事件类型：click，dbclick...
◆event.which：鼠标的按键类型：左边1 中间2 右边3
◆event.keyCode：键盘按键代码
11.按回车就让文本框的焦点移动到下一个文本框中，使用的是文本框的keydown事件，判断event.keyCode码，如果是回车键的码，那么就将焦点移动到下一个文本框中，使用的是focus()，或者select方法也行，focus只是让下一个文本框获得焦点，而select方法会让下一个文本框获取焦点的同时选中下一个文本框中的内容。
12.链式编程的原理是，最后都会return this，但是通常情况下，只有设置的操作才能把链式编程延续下去。因为获取操作的时候，或返回获取到的值，所以无法返回this，于是乎，可以使用end()，找到当前链最近的一次断链之前的对象，也就是说，如果没有返回之前那个this，可以通过end()方法获取到之前获取到的那个this。
13.隐式遍历是因为内部对jQuery对象进行了循环操作，实际上jQuery对象都是一个伪数组对象，jQuery中有显式遍历的方式，each和map方法，遍历的操作方式和数组的forEach与map方法类似，内部获取到的每一个元素也是原生js的dom对象。
14.解决多库共存方法
◆当引入jQuery的多个版本库时，无论使用$还是jQuery，其实都是在使用最后一个引入的jQuery版本库，可以通过打印jQuery的版本号来确定（console.log($.fn.jquery);console.log(jQuery.fn.jquery);）
◆如果你想放弃$的使用权然后将$符号使用权转交给上一个引入的jQuery版本库的话，可以使用$.noConflict()，然后你就可以通过调用$符号使用上一个jQuery版本库了，而当前这一个版本库你可以使用jQuery单词来调用
◆如果你想放弃$符号与jQuery单词的使用权而改用其它自定义的单词时，可以使用var customer=$.noConflict(true);，然后当前这个jQuery版本库就能够通过调用customer单词来使用了，而$符号与jQuery单词的使用权归上一个引入的jQuery版本库使用了，但是可以通过连续的这种方式，实现真正的n个版本的jQuery版本库共存。
◆jQuery版本库的多版本库的引入都是从低到高的引入，不推荐从高到低的引入。
15.原生js使用原型的方式是：object.prototype.functionName=function(){}，jQuery使用原型的方式是：$.fn.functionName=function(){}，其实都差不多，只不过前者是给对象扩展方法，后者是给伪数组扩展方法。
16.jquery的1.xx版本是支持IE678等低版本的浏览器的，而jquery的2.xx版本是不支持IE678等低版本的浏览器的
