jQuery是一个优秀的JavaScript框架，一个轻量级的JavaScript函数库，极大地简化了JS编程。
jQuery对象
jQuery提供的方法都是针对jQuery对象特有的，而且大部分方法的返回值类型也是jQuery类型的，所有方法可以连缀调用。
jQuery.action().action();
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：
$(document).ready(function(){ // 开始写 jQuery 代码... }); 或者 $(function(){ // 开始写 jQuery 代码... });这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
如果在文档没有完全加载之前就运行函数，操作可能失败。
$(function(){ // 开始写 jQuery 代码... });jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的CSS选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
选择器 选择器分类实例选取*$("*")所有元素元素选择器$("p")在页面中选取所有 <p> 元素id选择器$("#test")在页面中选取 id="test" 的元素类选择器$(".test")在页面中选取所有 class="test" 的元素自定义属性选择器$("[test]")在页面中选取带有test属性的元素CSS选择器$(“P”).css(“color”,”red”)CSS选择器可用于改变HTML元素的CSS属性.class.class$(".intro.demo")所有 class="intro" 且 class="demo" 的元素
注意：类名之间是没有空格的。如果中间有空格是要获取.intro下的带.demo的子孙代元素
.class,.class$(".intro,.demo,.end")选取 class 为 "intro"、"demo" 或 "end" 的所有元素注意：用逗号分隔每个 class。
注意：不要使用数字开头的 class 属性！在某些浏览器中可能出问题。
层次选择器$("div span")选取<div>里的所有<span>元素 【父子】 $("div >span")选取<div>下元素名是<span>的子元素【父子】 $("#one +div")选取id为one的元素的下一个<div>同辈元素 等同于$(#one).next("div") $("#one~div") 选取id为one的元素后面的所有<div>同辈元素 等同于$(#one).nextAll("div") $(#one).siblings("div")获取id为one的元素的所有<div>同辈元素（不管前后） $(#one).prev("div") 获取id为one的元素的前面紧邻的同辈<div>元素基本过滤器$(‘p:first’)选取页面元素内的第一个p元素 $(‘p:last’)选取页面元素内的最后一个p元素 $(‘p:not(.select)’)选取选择器不是select的p元素 $("tr:even")选取索引是偶数的tr元素(索引从0开始) $("tr:odd")选取索引是奇数的tr元素(索引从0开始) $(‘tr:eq(index)’)选取索引等于index的tr元素(索引从0开始,索引支持负数) $(‘tr:gt(index)’)选取索引>index的tr元素(索引从0开始) $(‘tr:lt(index)’)选取索引<index的tr元素(索引从0开始) $(‘input:focus’)选取当前被焦点的元素 $(‘:animated’)选取正在执行动画的元素内容过滤器$(‘:contains(“百度”)’)选取含有”百度”文本的元素 $(‘:empty’)选取不包含子元素或空文本的元素 $("div:has(p)")或.has(p)选取所有含有p标签的div元素 $("td:parent")选取所有带有子元素或包含文本的 <td> 元素可见性过滤器$(‘:hidden’)选取所有不可见元素 $(‘:visible’)选取所有可见元素子元素过滤器$(‘li:first-child’)查找 li 的第一个子元素 $(‘li:last-child’)查找 li 的最后一个子元素 $(‘li:only-child’)获取 li 唯一的子元素 $(‘li:nth-child(index)’)获取 li 指定索引的子元素表单元素选择器$(":input")选择所有的表单输入元素，包括input, textarea, select 和 button $(":text")选择所有的text input元素 $(":password")选择所有的password input元素 $(":radio")选择所有的radio input元素 $(":checkbox")选择所有的checkbox input元素 $(":submit")选择所有的submit input元素 $(":image")选择所有的image input元素 $(":reset")选择所有的reset input元素 $(":button")选择所有的button input元素 $(":file")选择所有的file input元素 $(":enabled")选择所有的可操作的表单元素 $(":disabled")选择所有的不可操作的表单元素 $(":checked")选择所有的被checked的表单元素 $("select option:selected")选择所有的select 的子元素中被selected的元素属性过滤选择器 引号一般可以加也可以不加，但在属性值为特殊符号或者包含空格的时候必须要加引号。 $("div[id]")选择所有含有id属性的div元素 $("input[name='newsletter']")选择所有的name属性等于'newsletter'的input元素 $("input[name!='newsletter']")选择所有的name属性不等于'newsletter'的input元素 $("input[name^='news']")选择所有的name属性以'news'开头的input元素 $("input[name$='news']")选择所有的name属性以'news'结尾的input元素 $("input[name*='man']")选择所有的name属性包含'news'的input元素 $("input[id][name$='man']")选择所有的含有id属性并且name属性以man结尾的input元素
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发 keypress 事件"。
jQuery事件 方法描述$(selector).on(event,data,function,map)向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数$(selector).blur(function)当元素失去焦点时发生 blur 事件$(selector).change(function)当元素的值改变时发生 change 事件$(selector).click(function)当单击元素时，发生 click 事件$(selector).dblclick(function)当双击元素时，触发 dblclick 事件$(selector).delegate(childSelector,event,data,function)使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）$(selector).focus(function)当元素获得焦点时，发生 focus 事件$(selector).focusin(function)当元素（或在其内的任意子元素）获得焦点时发生 focusin 事件$(selector).focusout(function)当元素（或在其内的任意子元素）失去焦点时发生 focusout 事件$(selector).hover(inFunction,outFunction)hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数$(selector).keydown(function)当键盘键被按下时发生 keydown 事件$(selector).keypress(function)keypress 事件与 keydown 事件类似。当按钮被按下时发生该事件$(selector).keyup(function)当键盘键被松开时发生 keyup 事件$(selector).trigger(event,eventObj,param1,param2,...)trigger() 方法触发被选元素上指定的事件以及事件的默认行为（比如表单提交）参数解析:
1.event:必需，规定匹配元素要触发的事件，可以是自定义事件，也可以是标准的事件。 2.param:可选，传递给事件处理函数的参数。
$(selector).triggerHandler(event,param1,param2,...)triggerHandler() 方法触发被选元素上指定的事件
可选的 speed 参数规定隐藏的速度，可以取以下值："slow"、"fast" 或毫秒
可选的 callback 参数是隐藏完成后所执行的函数名称
$(selector).show(speed,callback)该方法可以显示 HTML 元素可选的 speed 参数规定显示的速度，可以取以下值："slow"、"fast" 或毫秒
可选的 callback 参数是显示完成后所执行的函数名称
$(selector).toggle(speed,callback)可以使用 toggle() 方法来切换 hide() 和 show() 方法可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒
可选的 callback 参数是隐藏或显示完成后所执行的函数名称
$(selector).fadeIn(speed,callback)jQuery fadeIn() 用于淡入已隐藏的元素可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒
可选的 callback 参数是 fadeIn完成后所执行的函数名称
$(selector).fadeOut(speed,callback)jQuery fadeOut() 用于淡出已隐藏的元素可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒
可选的 callback 参数是 fadeOut完成后所执行的函数名称
$(selector).fadeToggle(speed,callback)jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果
jQuery 拥有可操作 HTML 元素和属性的强大方法。
jQuery 中非常重要的部分，就是操作 DOM 的能力。
jQuery DOM 操作 语法说明示例text()返回所选元素的文本内容$("p").text()html()返回所选元素的内容（包括 HTML 标记）$("p").html()val()返回表单字段的值$("input").val()attr()获取属性值$("a").attr("action")prop()获取属性值$("a").prop("href") jQuery 1.6新增了一个prop()方法，attr()和prop()两者都可以用来设置或者读取某元素的属性值，但是他们之间也有很大区别，prop( )是针对Dom元素属性(property)，attr( )针对HTML元素属性(attribute)。prop()函数的结果:
1.如果有相应的属性，返回指定属性值。
2.如果没有相应的属性，返回值是空字符串。
attr()函数的结果:
1.如果有相应的属性，返回指定属性值。
2.如果没有相应的属性，返回值是 undefined。
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用 attr 方法。
具有 true 和 false 两个属性的属性，如checked、selected、disabled等属性请使用prop()。
text()设置所选元素的文本内容$("<p></p>").text("Hello world!")html()设置所选元素的内容（包括 HTML 标记）$("div").html("<p>Hello world!</p>")val()设置表单字段的值$("input").val("RUNOOB")attr()设置属性值$("a").attr("href","www.baidu.com")text()、html() 、val()以及attr()拥有回调函数。
回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 text()：
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
});
});
clone()clone() 方法生成被选元素的副本，包含子节点、文本和属性。克隆所有的 <p> 元素，并插入到 <body> 元素的结尾：$("p").clone().appendTo("body");$(selector).clone(true|false);
true 规定需复制事件处理程序。 false 默认。规定不复制事件处理程序。
append()在被选元素的结尾（仍然在元素内部）插入指定内容$("p").append("追加文本")appendTo()
在被选元素的结尾（仍然在元素内部）插入指定内容。$("<b>Hello World!</b>").appendTo("p");提示：append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。append能够使用函数给被选元素附加内容，语法为：$(selector).append(function(index,html));其中，function()是必需的，参数index和html都是可选的。index表示接收选择器的index位置，html表示接收选择器的当前html。prepend()在被选元素的开头插入内容$("p").prepend("在开头追加文本")after()在被选元素之后插入内容$("img").after("在后面添加文本")before()在被选元素之前插入内容$("img").before("在前面添加文本")remove()删除被选元素（及其子元素）$("#div1").remove()empty()从被选元素中删除子元素$("#div1").empty()过滤被删除的用元素
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class="italic" 的所有 <p> 元素：
$("p").remove(".italic");
addClass()向被选元素添加一个或多个类$("div").addClass("important blue")removeClass()从被选元素删除一个或多个类$("h1,h2,p").removeClass("blue")toggleClass()对被选元素进行添加/删除类的切换操作$("h1,h2,p").toggleClass("blue")hasClass('className')判断selector里面是否包含有类className,返回一个布尔值$("div").hasClass("blue")css("propertyname")返回被选元素的一个或多个样式属性$("p").css("color")css("propertyname","value")设置被选元素的样式属性$("p").css("color","yellow");css({"propertyname":"value","propertyname":"value"});设置被选元素的多个样式属性$("p").css({"color":"yellow","font-size":"200%"})jQuery遍历parent()返回被选元素的直接父元素，该方法只会向上一级对 DOM 树进行遍历$("span").parent()
$("span").parent("div")
parents()返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)$("span").parents()
$("span").parents("div")
parentsUntil()返回介于两个给定元素之间的所有祖先元素$("span").parentsUntil("div")children()返回被选元素的所有直接子元素 $("div").children("p.1")可以使用可选参数来过滤对子元素的搜索返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素find()返回被选元素的后代元素，一路向下直到最后一个后代$("div").find("span")
返回属于 <div> 后代的所有 <span> 元素
$("div").find("*")例子返回 <div> 的所有后代例子返回 <div> 的所有后代$("div").find("input[type='radio']:checked").val()查找<div>下的选中的radio单选框查找<div>下的选中的radio单选框siblings()返回被选元素的所有同胞元素$("h2").siblings()$("h2").siblings("p")也可以使用可选参数来过滤对同胞元素的搜索返回属于 <h2> 的同胞元素的所有 <p> 元素next()返回被选元素的下一个同胞元素$("h2").next()nextAll()返回被选元素的所有跟随的同胞元素$("h2").nextAll()nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素$("h2").nextUntil("h6")prev()返回被选元素的上一个同胞元素$("h2").prev()prevAll()返回被选元素的所有前面的同胞元素$("h2").prevAll()prevUntil()返回介于两个给定参数之间的所有前面的同胞元素$("h2").prevUntil()jQuery遍历—过滤first()返回被选元素的首个元素$("div p").first()
选取首个 <div> 元素内部的第一个 <p> 元素
last() 返回被选元素的最后一个元素$("div p").last()
选择最后一个 <div> 元素中的最后一个 <p> 元素
eq()返回被选元素中带有指定索引号的元素，索引号从 0 开始$("p").eq(1) 选取第二个 <p> 元素filter()允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回$("p").filter(".url")
返回带有类名 "url" 的所有 <p> 元素
not()返回不匹配标准的所有元素$("p").not(".url")
返回不带有类名 "url" 的所有 <p> 元素
1. data() 方法
实例
向 <div> 元素附加数据，然后取回该数据：
$("#btn1").click(function(){ $("div").data("greeting", "Hello World"); }); $("#btn2").click(function(){ alert($("div").data("greeting")); });从被选元素中返回附加的数据。
语法：
$(selector).data(name) 参数描述name可选。规定要取回的数据的名称。 如果没有规定名称，则该方法将以对象的形式从元素中返回所有存储的数据。向被选元素附加数据。
语法：
$(selector).data(name,value) 参数描述name必需。规定要设置的数据的名称。value必需。规定要设置的数据的值。使用带有名称/值对的对象向被选元素附加数据。
语法：
$(selector).data(object) 参数描述object必需。规定包含名称/值对的对象。
2. each()方法
① $(selector).each() 方法用来遍历DOM节点，在dom处理上面用的较多。
提示：返回 false 可用于及早停止循环。
实例
输出每个 <li> 元素的文本：
$("button").click(function(){ $("li").each(function(){ alert($(this).text()) }); });语法：
$(selector).each(function(index,element)) 参数描述function(index,element)必需。为每个匹配元素规定运行的函数。 index - 选择器的 index 位置。element - 当前的元素（也可使用 "this" 选择器）。② $.each(dataresource,function(index,element))方法用来遍历数组、JSON 对象，在数据处理上用的比较多
function traversalData(){ var json = '[{"id":"1","tagName":"apple"}, {"id":"2","tagName":"orange"}, {"id":"3","tagName":"banana"}, {"id":"4","tagName":"watermelon"}]'; //遍历JSON对象，JSON.parse() 把json字符串转化为一个对象 if(json.length >0){ $.each(JSON.parse(json),function(index,obj) { alert(index+":"+obj.tagName); }); }
3. get()方法
get() 方法获取由选择器指定的 DOM 元素。
实例
获取第一个 <p> 元素的名称和值：
$("button").click(function(){ x=$("p").get(0); $("div").text(x.nodeName + ": " + x.innerHTML); });语法：
$(selector).get(index) 参数描述index可选。规定要获取哪个匹配的元素（通过 index 编号）。
4. index() 方法
返回指定元素相对于其他指定元素的 index 位置。这些元素可通过 jQuery 选择器或 DOM 元素来指定。
注意：如果未找到元素，index() 将返回 -1。
实例
获得被点击的 <li> 元素相对于它的同级元素的 index：
$("li").click(function(){ alert($(this).index()); });语法：
$(selector).index() $(selector).index(element) 参数描述element可选。规定要获得 index 位置的元素。可以是 DOM 元素或 jQuery 选择器。
5. param() 方法
创建数组或对象的序列化表示形式。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
实例
输出序列化对象的结果：
$("button").click(function(){ $("div").text($.param(personObj)); });语法：
$.param(object,trad) 参数描述object必需。规定要序列化的数组或对象。trad可选。布尔值，指定是否使用参数序列化的传统样式。
6. removeData() 方法
移除之前通过 data() 方法设置的数据。
实例
从 <div> 元素中移除之前附加的数据：
$("#btn2").click(function(){ $("div").removeData("greeting"); alert("Greeting is: " + $("div").data("greeting")); });语法：
$(selector).removeData(name) 参数描述name可选。规定要移除的数据的名称。 如果没有规定名称，该方法将从被选元素中移除所有已存储的数据。
7. toArray() 方法
以数组的形式返回 jQuery 选择器匹配的元素。
实例
把 <li> 元素转换为数组，然后输出该数组元素的 innerHTML ：
$("button").click(function(){ x=$("li").toArray() for (i=0;i<x.length;i++) { alert(x[i].innerHTML); } });语法：
$(selector).toArray()
8. pushStack() 方法
将一个DOM元素集合加入到jQuery栈。
实例
向 jQuery 栈中先压入一些元素，然后再删除它们，之后再退回到之前刚压入栈的状态。
<div></div> <script> $(function () { $().pushStack( document.getElementsByTagName("div")).remove().end(); }) </script>语法：
pushStack( elements, name, arguments ) 参数描述elementArray类型 将要压入 jQuery 栈的数组元素，用于生成一个新的 jQuery 对象name可选。 String类型 生成数组元素的 jQuery 方法名arguments可选。 Array类型 传递给 Query 方法的参数(用于序列化)
9. $.when() 方法
提供一种方法来执行一个或多个对象的回调函数。
实例
一个参数传递给 $.when() 被受理，执行回调函数
$(function () { $.when( { testing: 123 } ).done( function(x) { alert(x.testing); } /* alerts "123" */ ); })语法：
$.when( deferreds ) 参数描述deferredsDeferred类型 一个或多个延迟对象，或者普通的JavaScript对象
