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 选择器
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元素 | |
jQuery事件
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发 keypress 事件"。
| 方法 | 描述 |
|---|---|
| $(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:必需，规定匹配元素要触发的事件，可以是自定义事件，也可以是标准的事件。 |
| $(selector).triggerHandler(event,param1,param2,...) | triggerHandler() 方法触发被选元素上指定的事件 |
jQuery效果
| 语法 | 说明 |
|---|---|
| $(selector).hide(speed,callback) | 该方法可以隐藏 HTML 元素
可选的 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() 会向元素添加淡出效果 |
jQueryHTML
jQuery 拥有可操作 HTML 元素和属性的强大方法。
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 规定需复制事件处理程序。 |
||
| 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> 元素 |
jQuery 属性
| 方法 | 描述 |
|---|---|
| context | 在版本 1.10 中被废弃。包含被传递到 jQuery 的原始上下文 |
| jquery | 包含 jQuery 的版本号 |
| jQuery.fx.interval | 改变以毫秒计的动画运行速率 |
| jQuery.fx.off | 对所有动画进行全局禁用或启用 |
| jQuery.support | 包含表示不同浏览器特性或漏洞的属性集（主要用于 jQuery 的内部使用） |
| length | 包含 jQuery 对象中元素的数目 |
| jQuery.cssNumber | 包含所有可以不使用单位的CSS属性的对象 |
jQuery 杂项方法
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) | 必需。为每个匹配元素规定运行的函数。
|
② $.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 )
| 参数 | 描述 |
|---|---|
| element | Array类型 将要压入 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 )
| 参数 | 描述 |
|---|---|
| deferreds | Deferred类型 一个或多个延迟对象，或者普通的JavaScript对象 |
