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等低版本的浏览器的