开发步骤：
1. 导入jquery的文件
2. 确定事件:文档加载事件,初始化页面, 绑定事件
3. 实现每个事件所触发的函数：
1. 获取要操作的元素,或者响应的值
2. 根据这些值,.或者元素的状态,再去做进一步的操作
<head> <script type="text/javascript" src="jquery.js"></script>//jquery的引用 </head>
文档就绪函数：
简写：
$(function(){ // 文档就绪 });
第一种：
$(document).ready(function(){ // ...代码... });
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码
如果在文档没有完全加载之前就运行函数，操作可能失败
第二种：
$(document).load(function() { // ...代码... });
ready与load谁先执行？
是ready先执行,load后执行
DOM文档加载的步骤:
要想理解为什么ready先执行,load后执行就要先了解下DOM文档加载的步骤:
(1) 解析html结构
(2) 加载外部脚本和样式表文件
(3) 解析并执行脚本代码
(4) 构造HTML DOM模型//ready
(5) 加载图片等外部文件
(6) 页面加载完毕//load
存储结构：jQuery就是为了获取DOM、操作DOM而存在的！jQuery内部采用了一种叫“类数组对象”的方式作为存储结构
名称冲突：
jQuery 使用名为 noConflict() 的方法来解决该问题
var jq=jQuery.noConflict()
帮助您使用自己的名称(比如 jq)来代替 $ 符号
注意:有的浏览器会对代码进行优化 比如用子元素选择器 去操作table 里面的tr 结果是不行的 因为浏览器自动加上了tbody
2.语法:$(selector).action()
jQ对象转jS对象：
$div[0].innerHTML
$div.get(0).innerHTML
get方法可以从后面往前查找索引，加上负号就好，起始索引值是-1。
eq返回的是一个jQuery对象，get返回的是一个DOM对象。
$( "li" ).get( 0 ).css("color", "red"); //错误
$( "li" ).eq( 0 ).css("color", "red"); //正确
正确写法：
var li = $( "li" ).get( 0 ); $( li ).css("color", "red"); //用$包装
通过eq方法只能产生一个新的对象，但是如果需要的是一个合集对象，就要使用slice(start[,end])方法。
jS对象转jQ对象：
$(div).html
jQuery对象与DOM对象是不一样的。
jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。
如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象 $(div)。
遍历循环：
$.each(arr,function(i,n)) $(arr1).each(function(i,n)); //循环遍历的两种方式 i代表索引 n代表元素对象
匿名函数：
(function(window, undefined) { var jQuery = function() {} // ... window.jQuery = window.$ = jQuery; })(window);
总结:全局变量是魔鬼， 匿名函数可以有效的保证在页面上写入JavaScript，而不会造成全局变量的污染，通过小括号，让其加载的时候立即初始化，这样就形成了一个单例模式的效果从而只会执行一次。
3.选择器:过滤器
a.基本选择器：
ID选择器: #ID名称 类选择器: .号开头接类名 元素选择器: 元素的名称 通配符选择器: * 选择器分组: 选择器1,选择器2
b.层级选择器：
后代选择器: select1 select2 子元素选择器: select1 > select2 兄弟选择器: select1 + select2 (找到相邻兄弟) 找到下一个弟弟 找到所有的弟弟 : select1~select2()找到所有的弟弟
c.属性选择器：
元素[属性名=‘属性的值‘][属性名=‘属性的值‘]
d.特殊选择器：
this,表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性和方法
$(this),代表的上下文对象是一个jquery的上下文对象,可以调用jQuery的方法和属性值
e.基本过滤器：
:first : 找到第一个
:even : 偶数索引
:odd: 奇数索引
:gt(index) : greater than 索引大于
:eq(index) :查找指定索引
f.表单过滤器：
:input 找出所有的输入项 包括textarea select button input :text 只找出type=text单行输入文本 is() 判断
4.事件
On()的多事件绑定(所有的快捷事件在底层的处理都是通过一个"on"方法来实现的)
基本用法: .on( events ,[ selector ] ,[ data ] )
可以自定义事件名
多个事件绑定不同函数
$("#elem").on({
mouseover:function(){},
mouseout:function(){},
});
通过空格分离，传递不同的事件名，可以同时绑定多个事件，每一个事件执行自己的回调方法。
通过off() 方法移除该绑定
事件处理
根据处理冒泡的方式处理方式：
1.trigger() triggerHandler()建议用这个 2.mouseenter()建议用这个 1.1版本没找到 mouseover()
select事件只能用于<input>元素与<textarea>元素
5.效果
属性：
"slow"|默认("normal")| "fast" 或毫秒
hide() 隐藏 show() 显示 toggle() 二合一
fadeIn() 淡入 fadeOut()淡出 fadeToggle() 二合一
fadeTo() 把被选元素逐渐改变至给定的不透明度
动画:底层是队列结构(允许一系列函数被异步地调用而不会阻塞程序)
slideDown() 向下滑动
slideUp() 向上滑动
slideToggle() 二合一
6.DOM操作
attr() prop()方法都能用于设置/改变属性值，都可以同时设置多个属性。
区别:
如果操作的是元素的原有属性，用prop()，如果操作的是自定义属性用它attr()，建议用prop()，除非是在H5上面自定义属性才用attr()。
获取和设置
text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容（包括 HTML 标记） val() - 设置或返回表单字段的值
差异总结:
其中.html()和.text()方法不能使用在表单元素上，而.val()只能使用在表单元素上。另外.html()方法使用在多个元素上时，只读取第一个元素，.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时,将会读取所有选中元素的文本内容。
添加：
append() - 在被选元素的结尾插入内容(添加一个孩子) appendTo()-给自己找一个爹 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容
删除：
remove() - 删除被选元素（及其子元素） empty() - 从被选元素中删除子元素 detach() - 保留数据的删除操作
7.遍历操作(针对DOM)
概念:意为“移动”,用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素.以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止
向上遍历(祖先)：
parent() 方法返回被选元素的直接父元素 该方法只会向上一级对 DOM 树进行遍历 parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>) parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素
向下遍历(后代)：
children() 方法返回被选元素的所有直接子元素
该方法只会向下一级对 DOM 树进行遍历
find() 方法返回被选元素的后代元素,一路向下直到最后一个后代
水平遍历(同胞)：
siblings() 方法返回被选元素的所有同胞元素
next() 方法返回被选元素的下一个同胞元素
nextAll() 方法返回被选元素的所有跟随的同胞元素
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已:它们返回的是前面的同胞元素(在 DOM 树中沿着同胞元素向后遍历，而不是向前)
8.CSS类操作
获取和设置：
addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 css() 方法设置或返回被选元素的一个或多个样式属性
addClass()与css()的区别？
静态用addClass()，动态用css()。
9.数据缓存
内存泄露:由于浏览器垃圾回收方法有bug。
常见内存泄露的几种情况：
1.循环引用(但当参与循环引用的对象中有DOM对象或者ActiveX对象时，循环引用将导致内存泄露)。
2.Javascript闭包。
3.DOM插入。
JS的内存泄露，无怪乎就是从DOM中remove了元素，但是依然有变量或者对象引用了该DOM对象。然后内存中无法删除，使得浏览器的内存占用居高不下，这种内存占用，随着浏览器的刷新，会自动释放。
而另外一种情况，就是循环引用，一个DOM对象和JS对象之间互相引用，这样造成的情况更严重一些，即使刷新，内存也不会减少，这就是严格意义上说的内存泄露了。
缓存系统:为了避免引用数据直接依附在DOM对象上,尽量避免内存泄漏的产生
jQuery的数据缓存接口:
jQuery.data( element, key, value )
.data( )
核心:数据存放在内存中，通过一个映射关系与直接的DOM元素发生关联。
cache[ data ] = value;
整个Data类其实都是围绕着 thia.cache内部的数据做增删改查的操作。
两种缓存方式：
1. dom元素，数据存储在jQuery.cache中。
2. 普通js对象，数据存储在该对象中。
静态与实例方法的区别？
1.jQuery.data()可以实现为dom元素或js对象添加缓存
2.$("ele").data()实是对前者的扩展,其目的是可以方便的通过选择器为多个dom元素添加缓存数据(会覆盖相同的vaule值)
10.回调函数和异步
Deferred接口
设计理念:
围绕三组数据进行更高层次的抽象：
1.触发回调函数列表执行(函数名)
2.添加回调函数(函数名)
3.回调函数列表(jQuery.Callbacks对象)
3.Deferred最终状态(第三组数据除外)
回调方法/事件订阅
done、fail、progress
通知方法/事件发布
resolve、reject、notify、resolveWith、rejectWith、notifyWith
1.如果存在Deferred最终状态,默认会预先向doneList,failList中的list添加三个回调函数
if (stateString) { list.add(function() { state = stateString; }, tuples[i ^ 1][2].disable, tuples[2][2].lock); }
小技巧:
i ^ 1 按位异或运算符
所以实际上第二个传参数是1、0索引对调了,所以取值是failList.disable与doneList.disable
通过stateString有值这个条件,预先向doneList,failList中的list添加三个回调函数，分别是:
doneList : [changeState, failList.disable, processList.lock]
failList : [changeState, doneList.disable, processList.lock]
changeState 改变状态的匿名函数，deferred的状态，分为三种:pending(初始状态), resolved(解决状态), rejected(拒绝状态)；
不论deferred对象最终是resolve(还是reject)在首先改变对象状态之后,都会disable另一个函数列表failList(或者doneList)
然后lock processList保持其状态,最后执行剩下的之前done(或者fail)进来的回调函数
所以第一步最终都是围绕这add方法:
done/fail/是list.add也就是callbacks.add,将回调函数存入回调对象中
第二部分很简单,给Deferred对象扩充6个方法:
resolve/reject/notify 是 callbacks.fireWith,执行回调函数;
resolveWith/rejectWith/notifyWith 是 callbacks.fireWith 队列方法引用
最后合并promise到Deferred
promise.promise( deferred );
jQuery.extend( obj, promise );
所以最终通过工厂方法Deferred构建的异步对象带的所有的方法了,return内部的deferred对象了
2.jQuery采取了对象保存处理:
核心思路:把每一次的then操作,当做是创建一个新的deferred对象,那么每一个对象都够保存自己的状态与各自的处理方法,通过一个办法把所有的对象操作都串联起来
then结构
then: function( /* fnDone, fnFail, fnProgress */ ) { var fns = arguments; return jQuery.Deferred(function(newDefer) { jQuery.each(tuples, function(i, tuple) { deferred[tuple[1]](function() { // deferred[ done | fail | progress ] }); }); }).promise()
其实在内部创建了一个新的Deferred对象，不过这里的不同是通过传递一个回调函数，参数是newDefer，其实Deferred内部就是为了改变下上下文this为deferred，然后传递deferred给这个回调函数了，所以newDefer就指向内部的deferred对象了
那么对象之间如何关联？
jQuery.each(tuples, function(i, tuple) { //取出参数 var fn = jQuery.isFunction(fns[i]) && fns[i]; // deferred[ done | fail | progress ] for forwarding actions to newDefer // 添加done fail progress的处理方法 // 针对延时对象直接做了处理 deferred[tuple[1]](function() { var returned = fn && fn.apply(this, arguments); if (returned && jQuery.isFunction(returned.promise)) { returned.promise() .done(newDefer.resolve) .fail(newDefer.reject) .progress(newDefer.notify); } else { newDefer[tuple[0] + "With"](this === promise ? newDefer.promise() : this, fn ? [returned] : arguments); } });
把then的方法通过:
deferred.done
deferred.fail
deferred.progress
加入到上一个对象的各自的执行队列中保存了，这样就实现了不同对象之间的关联调用。
流程模拟：
1. 传递了多个异步对象，然后遍历每个异步对象给每一个对象绑定done、fail、progess方法,无非就是监听每一个异步的状态(成功,失败),如果是完成了自然会激活done方法。
2. updateFunc是监听方法,通过判断异步对象执行的次数来决定是不是已经完成了所有的处理或者是失败处理。
3. 因为when也要形成异步操作,比如when().done(),所以内部必须新建一个jQuery.Deferred()对象,用来给后面链式调用。
4. 此刻监听所有异步对象(d1,d2...)的updateFunc的处理都完毕了,会给一个正确的通知给when后面的done方法,因为done是通过第三步jQuery.Deferred()创建的,所以此时就需要发送消息到这个上面，即:
deferred.resolveWith(contexts, values);
5. 内部的jQuery.Deferred()因为外部绑定了when().done(),所以done自然就收到了updateFunc给的消息了,可以继续之后的操作了。
1.回调函数(function(){})
概念:
1、一个回调函数作为参数传递给另一个函数是，我们仅仅传递了函数定义，我们并没有在参数中执行函数，我们并不传递像我们平时执行函数一样带有一对执行小括号()的函数。
2、回调函数并不会马上被执行，它会在包含它的函数内的某个特定时间点被“回调”。
Callbacks它是一个多用途的回调函数列表对象
callbacks.add() :回调列表中添加一个回调或回调的集合。
callbacks.disable() :禁用回调列表中的回调。
callbacks.disabled() :确定回调列表是否已被禁用。
callbacks.empty() :从列表中删除所有的回调。
callbacks.fire() :用给定的参数调用所有的回调。
callbacks.fired() :访问给定的上下文和参数列表中的所有回调。
callbacks.fireWith() :访问给定的上下文和参数列表中的所有回调。
callbacks.has() :确定列表中是否提供一个回调。
callbacks.lock() :锁定当前状态的回调列表。
callbacks.locked() :确定回调列表是否已被锁定。
callbacks.remove() :从回调列表中的删除一个回调或回调集合。
callbacks.memory:保持以前的值,将添加到这个列表的后面的最新的值立即执行调用任何回调
callbacks.unique:确保一次只能添加一个回调(所以在列表中没有重复的回调)
callbacks.stopOnFalse: 当一个回调返回false 时中断调用
2.Deferred异步模型
Deferred 提供了一个抽象的非阻塞的解决方案(如异步请求的响应)，它创建一个promise对象，其目的是在未来某个时间点返回一个响应，简单来说就是一个异步/同步回调函数的处理方案。
function task(name) { var dtd = $.Deferred(); setTimeout(function() { dtd.resolve(name) }, 1000) return dtd; } $.when(task(‘任务一‘), task(‘任务二‘)).done(function() { alert(‘成功‘) })
when():合并多个异步操作