1，使用步骤
引包 -> 入口函数 -> 功能实现代码（事件处理）
2，JQuery 和JS的入口函数区别
区别一：书写个数不同
Js入口函数只能出现一次，出现多次会存在事件覆盖的问题。
jQuery的入口函数，可以出现任意多次，并不会存在事件覆盖问题。
区别二：执行时机不同
Js入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。
jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。
文档加载的顺序：从上往下，边解析边执行。
3，DOM对象和JQuery对象的相互转换
DOM对象此处指的是：使用js操作DOM返回的结果。
jQuery对象此处指的是：使用jQuery提供的操作DOM的方法返回的结果。
4，jQuery选择器
图中的序号是从0开始，即索引值。
5，样式属性操作
6，属性操作
7，jQuery动画
隐藏显示动画：show() 或 hide()
滑入滑出动画：
淡入淡出动画：
改变透明度
自定义动画
注意：所有能够执行动画的属性必须只有一个数字类型的值。
比如：要改变字体大小，要使用：fontSize（font-size），不要使用：font
停止动画
当调用stop()方法后，队列里面的下一个动画将会立即开始。但是，如果参数clearQueue被设置为true，那么队列面剩余的动画就被删除了，并且永远也不会执行。
如果参数jumpToEnd被设置为true，那么当前动画会停止，但是参与动画的每一个CSS属性将被立即设置为它们的目标值。比如：slideUp()方法，那么元素会立即隐藏掉。如果存在回调函数，那么回调函数也会立即执行。
注意：如果元素动画还没有执行完，此时调用sotp()方法，那么动画将会停止。并且动画没有执行完成，那么回调函数也不会被执行。
8，节点操作
动态创建元素：
// $()函数的另外一个作用：动态创建元素
var $spanNode = $(“<span>我是一个span元素”);
var node = $(“#box”).html（“<li>我是li</li>”）；
添加元素：
常用append()作用：在被选元素内部的最后一个子元素（或内容）后面插入内容（存在或者创建出来的元素都可以）
不常用操作：（用法跟append()方法基本一致）
appendTo()作用：同append()，区别是：把$(selector)追加到node中去
$(selector).appendTo(node);
prepend()作用：在元素的第一个子元素前面追加内容或节点
$(selector).prepend(node);
after()作用：在被选元素之后，作为兄弟元素插入内容或节点
$(selector).after(node);
before()作用：在被选元素之前，作为兄弟元素插入内容或节点
$(selector).before(node);
html创建元素
作用：设置或返回所选元素的html内容（包括 HTML 标记）
设置内容的时候，如果是html标记，会动态创建元素，此时作用跟js里面的 innerHTML属性相同
清空元素
复制元素
9，操作form表单
属性操作
值和内容
10，尺寸位置操作
宽度和高度操作：
css()获取高度和height获取高度的区别？
11，坐标值操作
12，事件机制
事件绑定：
bind方式： $("p").bind("click mouseenter",function(e){ //事件响应方法 });
可以同时绑定多个事件，缺点：要绑定事件的元素必须存在文档中。
delegate方式：（特点：减少事件绑定次数提高效率，性能高，支持动态创建的元素）
$(".parentBox").delegate("p","click", function(){ //为 .parentBox下面的所有的p标签绑定事件});
on方式：兼容zepto(移动端类似jQuery的一个库)，jQuery1.7版本后，jQuery用on统一了所有的事件处理的方法
作用：给匹配的元素绑定事件，包括了上面所有绑定事件方式的优点
事件解绑：
unbind() 方式 作用：解绑 bind方式绑定的事件
$(selector).unbind(); //解绑所有的事件
$(selector).unbind(“click”); //解绑指定的事件
undelegate() 方式 作用：解绑delegate方式绑定的事件
$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( “click” ); //解绑所有的click事件
off解绑on方式绑定的事件
事件触发：
13，jQuery事件对象介绍
event.data 传递给事件处理程序的额外数据
event.currentTarget 等同于this，当前DOM对象
event.pageX 鼠标相对于文档左部边缘的位置
event.target 触发事件源，不一定===this
event.stopPropagation()； 阻止事件冒泡
event.preventDefault(); 阻止默认行为
event.type 事件类型：click，dbclick…
event.which 鼠标的按键类型：左1 中2 右3
event.keyCode 键盘按键代码
14，链式编程
链式编程原理：return this;
通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this。
end(); // 结束当前链最近的一次过滤操作，并且返回匹配元素之前的状态。
15，隐式迭代
隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。
如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。
16，each方法
大部分情况下是不需要使用each方法的，因为jQuery的隐式迭代特性。
如果要对每个元素做不同的处理，这时候就用到了each方法
17，多库共存
此处多库共存指的是：jQuery占用了$ 和jQuery这两个变量。当在同一个页面中引用了jQuery这个js库，并且引用的其他库（或者其他版本的jQuery库）中也用到了$或者jQuery这两个变量，那么，要保证每个库都能正常使用，这时候就有了多库共存的问题。
18，jQuery插件机制
jQuery这个js库，虽然功能强大，但也不是面面俱到包含所有的功能。
jQuery是通过插件的方式，来扩展它的功能：
当你需要某个插件的时候，你可以“安装”到jQuery上面，然后，使用。
当你不再需要这个插件，那你就可以从jQuery上“卸载”它。
jQuery.color.js
animate()自定义动画：不支持背景的动画效果
jQuery.lazyload.js
使用步骤：引入jQuery文件 -> 引入插件 -> 使用插件
19，jQueryUI
jQueryUI专指由jQuery官方维护的UI方向的插件。
官方API：http://api.jqueryui.com/category/all/
其他教程：https://www.runoob.com/jqueryui/jqueryui-intro.html
网友评论