jQuery手册学习笔记记录下来希望自己可以记忆的更深刻

jQuery总体包含4部分
1基本DOM操作函数
2事件处理函数
3动画函数
4AJAX操作

使用jQuery查找元素
(1)Basic（基本选择器） #id .class div s1,s2,s3
(2)Hierarchy（层级选择器） parent > child parent child prev + nextSibling prev ~ nextAllSibling
(3)Attribute（属性选择器） [属性名] [属性名="值"] [属性名^="值") [属性名$="值"] [属性名="值"] [属性名!="值"]
(4)Form（表单元素选择器） :text :password :radio :checkbox :submit :reset :button :image :hidden :file $(':text') 选定 <input type="text">的元素 :disabled :enabled :checked :selected 选定具有特定属性的表单元素
(5)Basic Filter（基本过滤选择器） :first :last :even :odd :eq(i) :lt(i) LessThan :gt(i) GreaterThan :not(selector) 注意：基本过滤选择器把选定的所有元素放在一个大的集合中！下标从0开始分配。
(6)Child Filter（子元素过滤选择器） :first-child :last-child :nth-child(2 / odd / even / 3n+1) :only-child 注意：子元素过滤选择器把选定的元素按照所在父元素进行分组！下标从1开始分配。
(7)Content Filter（内容过滤选择器） :contains(txt) :has(selector) :empty :parent
(8)Visibility Filter（可见性过滤选择器） :hidden 选中隐藏元素 :visible 选中可见元素

(2)事件处理函数
mouseover和mouseenter的区别
jQuery中bind on live delegate的函数有哪些区别
(1)bind & unbind 用法： $('btn').bind( 'click', fn ) 对用的DOM操作： btn.addEventListener('click', fn, false)
(2)one 用法：$('btn').one( 'click', fn ) 含义：为元素绑定一个只能执行一次的监听函数
(3)bind函数的简化版本，30+个， click/mouseover/keyup/.... 比如： $('btn').bind('mouseenter',fn) 可以简化为$('btn').mouseenter(fn)
注意：前面三类函数的共同问题：1)每个事件源都要绑定一次监听函数； 2)绑定过程只对当前已经存在的元素有效。——解决办法：利用事件冒泡机制， 把子元素的事件委托给父元素（或称为让父元素代理子元素的事件监听）
(4)delegate & undelegate 用法：$('div.parent').delegate('.numBtn', 'click', fn) 使用事件代理为计算器上的按钮绑定监听函数
(6)on & off on可以取代前面所有的方法！
用法1：把监听函数直接绑定事件源上 $('button').on('click', fn) //bind/click 用法2：把监听函数委托给父元素 $('div.parent').on('click', 'button', fn)
1：bind()：为每个匹配元素的特定事件绑定事件处理函数。 　　bind(type,[data],fn) type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。 比如"click"或"submit"，还可以是自定义事件名。 data:作为event.data属性值传递给事件对象的额外数据对象 fn:绑定到每个匹配元素的事件上面的处理函数
2：on()在选择元素上绑定一个或多个事件的事件处理函数。 　　
on(events,[selector],[data],fn) 　　events:一个或多个用空格分隔的事件类型和可选的命名空间， 如"click"或"keydown.myPlugin" 。 　
　selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。 　　
data:当一个事件被触发时要传递event.data给事件处理函数。 　　
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。
window.onload和$(document).ready()的区别
相同：二者表示的事件都在“页面加载完成”后执行
不同：(1) $(document).ready()底层的JS实document.addEventListener('DOMContentLoaded', function, false);
(2)load事件和DOMContentLoaded(ready)事件的区别： load：待HTML、JS、CSS、图片等所有的页面资源加载完成时触发 DOMContentLoaded：待DOM内容(HTML、JS)加载完成时触发， 不等待CSS、图片等资源的加载 $(document).ready()事件触发时机要早于window.onload (3)$(document).ready()可以先后绑定多次； window.onload只能绑定一次
(4) $(document).ready(fn)可以简写为： $().ready(fn) 或者 $( fn )

(3)动画函数
jQuery1.11.3动画函数底层都是定时器动画(setTimeout). 注意：所有的jQuery动画函数都会自动排队！
(1)隐藏和显示动画——修改width/height/opacity $(..).show(speed, fn) $(..).hide(speed, fn) $(..).toggle(speed, fn) 小星星图片，点击后，闪动3次 开始！
(2)淡入/淡出动画——修改opacity $(..).fadeOut( ) //淡出 $(..).fadeIn( ) //淡入 $(..).fadeToggle( ) 实现一个完整的标签页组件
(3)折叠展开/收起动画——修改的height $(..).slideUp( ) $(..).slideDown( ) $(..).slideToggle( ) 实现一个完整版的手风琴
(4)万能动画函数——修改任意合法的属性 $(..).animate( { width: '300%', height: '30%', opacity: '0.6', left: '300px' } , 1000, fn) 注意：animate函数只能对数值型的属性执行定时器动画 （如宽、高、透明度、位置...），非数值型属性不能执行动画 （如display、border-style、text-decoration）；默认情况下，不能对颜色相关属性执行动画！

(4)AJAX操作
1 $('div').load('x.php', ['k=v&k=v'], [fn])
作用： 发起异步GET/POST请求，获取服务器端返回的html片段数据， 把这些数据设置为当前选定元素的innerHTML——覆盖已有内容。 案例：提取全站多个网页都具备的相同内容，异步加载
2 $.get('x.php', 'k=v'|{k:v}, fn);
作用： 向指定的URL发起异步的GET请求，获得响应消息，调用回调函数进行响应数据的处理。 练习：实现一个二级级联下拉列表
3 $.post('x.php', 'k=v'|{k:v}, fn);
作用： 向指定的URL发起异步的POST请求，获得响应消息，调用回调函数进行响应数据的处理。 练习：创建一个不间断的“员工信息录入系统”——异步POST提交
补充小知识点：jQuery提供的表单序列化（serialize）函数——把表单中的用户输入拼接为键值对字符串，可用于HTTP请求消息。 var data = $('#loginForm').serialize(); 返回值形如： 'k=v&k=v' 其中的k就是input的name属性值。
4 $.getScript('x.php', ['k=v'|{k:v}], [fn]);
作用： 向指定的URL发起异步的GET请求，获得application/javascript类型的响应消息，自动调用eval()把xhr.responseText加以执行。 提示：若响应消息指定了内容类型为javascript，$.get和$.getScript都会自动调用eval()；但响应消息没有指定内容类型为javascript，$.getScript仍然会调用eval()，$.get不会。 练习：异步请求服务器端的实现了国际化的欢迎消息。
5 $.getJSON('x.php', ['k=v'|{k:v}], fn);
作用： 向指定的URL发起异步的GET请求，获得application/json类型的响应消息，自动调用JSON.parse()把xhr.responseText解析为JS数据。 提示：若响应消息指定了内容类型为json，$.get和$.getScript都会自动调用JSON.parse()；但响应消息没有指定内容类型为json，$.getScript仍然会调用JSON.parse()，$.get不会。 练习：点击按钮，加载更多“好友消息”
服务器端：PHP把数组转换为JSON字符串： $str = json_encode($arr); echo $str; 客户端：把JSON字符串解析为JS数据： var data = JSON.parse(xhr.responseText);
6 $.ajax( { type: 'GET', //POST、PUT、DELETE、HEAD url: 'x.php', data: {uname:'tom',upwd:'123'}, //k=v&k=v, beforeSend: fn, //请求发送之前的回调 success: fn, //响应成功的回调 error: fn, //响应失败的回调 complete: fn //响应完成的回调(无论成功还是失败) } ); 对应于原生AJAX的下述代码： var xhr = new ...(); xhr.onreadystatechange = function(){ if(xhr.readyState===4){ if(xhr.status===200){ success(); }else{ error(); } complete(); } } xhr.open(); beforeSend(); xhr.send();