1.在jquery中事件套事件会有一个小坑，会出现，多次触发父级事件的时候再触发一次子级事件，子级时间的触发频率和父级的频率一样
1 $('#box').click(function(){
2 alert(1);
3 $('#div1').mouseover(function(){
4 alert(2);
5 })
6 })
在这里，没当点击一次box，div1就会绑定mouseover事件，因此，当鼠标移入div1的时候，会不止一次的弹出2，点击了box多少次，就会弹出多少次的2，这与我们想实现的需求是有差异的，为了解决这一问题，我们需要给div1解绑事件，再添加事件，这样，这种情况就不得出现了
1 $('#box').click(function(){
2 alert(1);
3 $('#div1').mouseover(function(){
4 alert(2);
5 })
6 })
2.懒加载实现原理
首先生成标签，给img添加一个假的_src属性，加滚动事件监听，判断条件为img的offsettop值小于可视区的高+滚动条滚动的距离并且img标签中有_src属性时，把img标签_src边成src，加载图片，删除_src属性（这样做的目的是在频繁滚动的时候不用时刻去把_src的值赋给src）。
3.JQuery和原生DOM区别
原生中firstElementChild是指父元素底下的第一个子元素节点，而JQuery中first( )是指一组集合中的第一个，同理lastElementChild
和last（）一样。
$('ul')[0].firstElementChild;
$('li').first();
4.利用on进行数据绑定：三个参数，一参是事件名，二参是数据，三参是函数，函数中的ev.data是传进去的数据。
1 <script src="jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
2 <script type="text/javascript">
3 var arr=['数据一','数据二','数据三'];
4 $.each(arr,function(index,item){
5 var ele=$(`<input type="button" value=按钮${index+1}>`).on('click',{item:arr[index]},function(ev){
6 console.log(ev.data);
7 })
8 $('body').append(ele);
9 });
10 </script>
5.利用on进行事件委托，给父级绑定事件，on里面传入三个参数，一参是事件名，二参是事件源，三参是函数
6.利用on进行事件绑定并使用trigger（）进行事件继承,可以给想要的事件加一个类名
1 <div id="box1"></div>
2 <div id="box2"></div>
3 <script src="jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
4 <script type="text/javascript">
5
6 $('#box1').on('click.123',function(){
7 alert(1);
8 })
9 $('#box1').on('click',function(){
10 alert(2);
11 })
12 $('#box2').on('click',function(){
13 $('#box1').trigger('click.123');
14 })
7.html()读操作的话只能读集合的第一个，写操作的话可以写全部集合的，text（）读操作的话可以读集合全部的，写操作的话给集合中的每一个写，JQuery中阻止默认行为用return false。
8.Jquery中事件对象是一个二次封装的对象，如果没有找到想要的，通过ev.originEvent去查找对应的属性，比如cancelBubble。
9.clone()事件，克隆节点，接受一个参数，true 或者false，默认为false，当为true的时候，还克隆事件
1 $('#box').click(function(){
2 alert(1);
3 })
4 var x=$('#box').clone(true);//把box身上的点击事件也给克隆
5 $('body').append(x);
10.remove（）和detach（）方法的区别，同样是移除节点，它们之间的区别就是detach在移除的时候可以保留节点的数据和事件，将来再用的时候可以直接插入到相应的位置。
11. append( ) prepend（） before（ ） after（）和 appendTo( ) prependTo（） insertBefore（ ） insertAfter（）区别在于它们的返回值不一样，前者是返回的被参照的节点，后者是返回的被插入的节点，所以，如果要对被插入的节点进行后续操作，可以用后者进行链式添加。
1 console.log($('ul:eq(0)').append(span));//ul
2 console.log(span.appendTo($('ul:eq(0)')));//li
12. width（） innerwidth（）outerwidth( ) 它们的区别在于，width只能获取到宽度，innerwidth能获取到宽度+padding值，outerwidth能获取到宽度+padding+border值，如果outer里面传入参数true的时候，还可以获取到margin值，width和innerwidth和outerwidth都能设置值。
13 .$(原生对象) - >JQ对象
$('span').get(0) ->原生对象或者$('span')[0]
14。获取元素位置，offset（）.left/top，获取元素到页面左边和上面的距离 ；position（）.left/top，获取元素到定位父级左边和上面的距离；scrolltop/left获取滚动条滚动的距离。
15.过滤元素，children（）获取父级下所有孩子节点，父级.find（），find里面传入范围，是可以获取到满足条件的子孙节点.
16.index（）一组元素的索引，当前元素在所有兄弟节点中的位置，括号里面传入范围，最好传入范围，否则有坑。
17.filter()对一组元素进行筛选，not（）是filter（）反义词。
18.parents()和cloeset（），查找父级元素，closest查找满足条件的最近的父级元素包括自己，需要传入范围。
19.addclass（），removecalss（）添加和删除类名
20.attr（），removeAattr（），属性操作，删除属性操作。
21.prop( )操作表单元素的属性，最好是用prop（）操作，使用attr（）操作有bug