前端库Jquery简单总结

1. addClass()添加样式
2. removeClass()移除样式
3. toggleClass()切换样式
4. prev(),next(),prevAll(),nextAll()上下关系同级兄弟节点
5. siblings()同级的兄弟节点
6. eq(n)下标
7. first() === eq(0)第一个节点
8. last()最后一个节点
9. slice(起始位置，结束位置)截取集合某一段，不包含结束位置
10. children()获取子元素（只能获取父级下的第一级子元素，孙子节点是获取不到的）
11. find()查找比children（）更加广泛
12. parents()获取当前元素的所有祖先节点
13. closest(必须要有参数)找指定的一个最近的祖先元素（也包括自己）
14. append()/appendTo()把元素添加到指定节点的==里面的最后==
15. prepend()/prependTo()把元素添加到指定节点的==里面的最前==
16. before()/insertBefore()把元素添加到指定节点的==外面的最前==
17. after()/insertAfter()把元素添加到指定节点的==外面的最后== 区别 $(ul).append(li).css('background','red')整个ul变红 li.appendTo(ul).css('background','red')只是当前的li变红
18. remove()
19. clone（）克隆，只是克隆结构，clone（true）不仅克隆结构还克隆事件
20. index()索引，兄弟节点的排行
21. each()遍历,大多数不需要each遍历，直接就是循环遍历了 each(function(i,el){ i 索引 el 原生的元素，需要$(el).css(); this 就是el 需要$(this) })
22. get(0)将JQ转成原生JS
23. width(只有width宽度)没有单位,可以设置宽度，jq可以获取隐藏元素的宽高
24. innerWidth(width宽度+padding)没有单位,可以设置宽度
25. outerWidth(width宽度+padding+border)没有单位,可以设置宽度
26. outerWidth(true)width宽度+padding+border+margin,没有单位,可以设置宽度，outerWidth(200，true)
27. 可视区的高$(window).height()
28. 页面的高$(document).height()
29. 滚动距离$(document).scrollTop() 滚动到最底部的距离$(document).scrollTop() = $(document).height() -$(window).height()
30. 元素距离$(el).offset().top/left ==offset()相对于整个页面的距离，而不是可视区==
31. 元素距离$(el).position().top/left ==position()相对于有定位父级元素的距离，不认margin值==

图片懒加载

$(el).offset().top <$(window).height() + $(document).scrollTop()图片已经进入可视区，图片可以进行显示操作 32. on/off事件

$('div').on('click mouseover',function(){
    alert(111)
    $(this).off('mouseover')解除指定事件绑定
})

33. 相对于整个页面ev.pageX/pageY
34. 相对于可视区ev.clientX/clientY
35. 阻止事件冒泡ev.stopPropagation()
36. 阻止浏览器默认事件ev.preventDefault()

$(document).contextmenu(function(ev){
    ev.preventDefault();
})

37. 既阻止默认事件又阻止冒泡 return false;
38. 事件委托delegate()，委托给父级身上绑定事件，真正还是子元素身上触发事件，原理是事件冒泡。==好处就是对后续的创建元素身上也有事件==

$('ul').delegate('li','click',function(ev){
    $(this).css()；
    $(ev.delegateTarget).undelegate();取消事件委托ev.delegateTarget指的是委托的父级ul
})

39. toggle()综合show()和hide()方法来回切换

$('a').click(function(){
    $('div').toggle();
})

40. fadeIn(),fadeOut()
41. 运动animate(参数集合)<{样式属性和值(运动的目标点)}，运动时间（默认400ms）,运动形式（默认缓冲swing，匀速linear）,运动结束后的回调函数>，==配合stop()清空运动队列（还有停止运动作用）==
42. 清空元素内容html(""),empty()
43. 删除元素 remove(没有操作行为),detach(删除元素，但是保留删除前的操作行为)

$('div').click(function(){
    alert(111);
});
$('body').append($('div').detach());保留之前的操作行为

44. text(),html()区别
45. hover()里面的内部原理其实不是mouseover和mouseout，而是mouseenter和mouseleaave,mouseover和mouseout结构嵌套会出问题，所以用Hover