jQuery
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是的更加便捷的开发，并且在兼容性方面十分优秀。
http://www.php100.com/manual/jquery/
jQuery语法
通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
实例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：
1 2 3 4 5 | $(document).ready(function(){ // jQuery methods go here...}); |
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：
试图隐藏一个不存在的元素
获得未完全加载的图像的大小
提示：简洁写法（与以上写法效果相同）:
1 2 3 4 5 | $(function(){ // jQuery methods go here...}); |
以上两种方式你可以选择你喜欢的方式实现文档就绪后执行jQuery方法。
jQuery选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
1、元素选择器
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 <p> 元素:
1 | $("p") |
2、id选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下：
1 | $("#test") |
3、.class选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法如下：
1 | $(".test") |
4、 selector1,selector2,selectorN选择器
将每一个选择器匹配到的元素合并后一起返回。
你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div>div</div> <p class="myClass">p class="myClass"</p> <span>span</span>
<script> $("div,span,p.myClass") </script></body></html> |
5、ancestor descendant选择器
在给定的祖先元素下匹配所有的后代元素
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form>
<script> $("form input") </script></body></html> |
结果：
6、 parent > child选择器
在给定的父元素下匹配所有的子元素
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form>
<script> $("form > input") </script></body></html> |
结果：
7、first选择器
获取第一个元素
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> <script src="jquery-2.2.3.js"></script> <script> var test = $(‘li:first‘); console.log(test); </script></body></html> |
结果：
8、not(selector)选择器
去除所有与给定选择器匹配的元素
在jQuery 1.3中，已经支持复杂选择器了（例如:not(div a) 和 :not(div,a)）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <input name="apple" /> <input name="flower" checked="checked" /> <script src="jquery-2.2.3.js"></script> <script> var test = $("input:not(:checked)") console.log(test); </script></body></html> |
结果：
9、odd选择器
匹配所有索引值为奇数的元素，从 0 开始计数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> <script src="jquery-2.2.3.js"></script> <script> $("tr:odd") </script></body></html> |
结果：
10、eq(index)选择器
匹配一个给定索引值的元素
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> <script src="jquery-2.2.3.js"></script> <script> $("tr:eq(1)") </script></body></html> |
结果：
11、gt(index)选择器
匹配所有大于给定索引值的元素
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> <script src="jquery-2.2.3.js"></script> <script> $("tr:gt(0)") </script></body></html> |
结果：
12、lt(index)选择器
匹配所有小于给定索引值的元素
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> <script src="jquery-2.2.3.js"></script> <script> $("tr:lt(2)") </script></body></html> |
结果：
13、[attribute]选择器
匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div> <p>Hello!</p> </div> <div id="test2"></div> <script src="jquery-2.2.3.js"></script> <script> $("div[id]") </script></body></html> |
结果：
14、 [attribute=value]选择器
匹配给定的属性是某个特定值的元素
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <input type="checkbox" name="newsletter" value="Hot Fuzz" /> <input type="checkbox" name="newsletter" value="Cold Fusion" /> <input type="checkbox" name="accept" value="Evil Plans" /> <script src="jquery-2.2.3.js"></script> <script> $("input[name=‘newsletter‘]").attr("checked", true); </script></body></html> |
结果：
[ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]15、attribute!=value]选择器
匹配所有不含有指定的属性，或者属性不等于特定值的元素。
此选择器等价于 :not([attr=value]) 要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value])。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <input type="checkbox" name="newsletter" value="Hot Fuzz" /> <input type="checkbox" name="newsletter" value="Cold Fusion" /> <input type="checkbox" name="accept" value="Evil Plans" /> <script src="jquery-2.2.3.js"></script> <script> $("input[name!=‘newsletter‘]").attr("checked", true); </script></body></html> |
结果：
16、 [attribute^=value]选择器
匹配给定的属性是以某些值开始的元素
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <input name="newsletter" /> <input name="milkman" /> <input name="newsboy" /> <script src="jquery-2.2.3.js"></script> <script> $("input[name^=‘news‘]") </script></body></html> |
结果：
17、[attribute$=value]选择器
匹配给定的属性是以某些值结尾的元素
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <input name="newsletter" /> <input name="milkman" /> <input name="jobletter" /> <script src="jquery-2.2.3.js"></script> <script> $("input[name$=‘letter‘]") </script></body></html> |
结果：
18、[attribute*=value]选择器
匹配给定的属性是以包含某些值的元素
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <input name="man-news" /> <input name="milkman" /> <input name="letterman2" /> <input name="newmilk" /> <script src="jquery-2.2.3.js"></script> <script> $("input[name*=‘man‘]") </script></body></html> |
结果：
jQuery属性
1、attr(name|pro|key,val|fn)属性
设置或返回被选元素的属性值。
1 2 3 4 5 6 7 8 9 10 | <script> //返回文档中所有图像的src属性值。 $("img").attr("src"); //为所有图像设置src和alt属性。 $("img").attr({ src: "test.jpg", alt: "Test Image" }); //为所有图像设置src属性。 $("img").attr("src","test.jpg"); //把src属性的值设置为title属性的值。 $("img").attr("title", function() { return this.src }); </script> |
2、removeAttr(name)属性
从每一个匹配的元素中删除一个属性
1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的。解决的方法就是使用$("XX").prop("disabled",false);
1.7版本在IE6下已支持删除disabled。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <img src="test.jpg"/> <script src="jquery-2.2.3.js"></script> <script> //将文档中图像的src属性删除 $("img").removeAttr("src"); </script></body></html> |
结果：
3、prop(name|properties|key,value|fn)属性
获取在匹配的元素集中的第一个元素的属性值。
随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script> //选中复选框为true，没选中为false $("input[type=‘checkbox‘]").prop("checked"); //禁用页面上的所有复选框。 $("input[type=‘checkbox‘]").prop({ disabled: true }); //禁用和选中所有页面上的复选框。 $("input[type=‘checkbox‘]").prop("disabled", false); $("input[type=‘checkbox‘]").prop("checked", true); //通过函数来设置所有页面上的复选框被选中。 $("input[type=‘checkbox‘]").prop("checked", function( i, val ) { return !val; });</script> |
4、removeProp(name)属性
用来删除由.prop()方法设置的属性集
随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <p> </p> <script src="jquery-2.2.3.js"></script> <script> var $para = $("p"); $para.prop("luggageCode", 1234); $para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ". "); $para.removeProp("luggageCode"); $para.append("Now the secret luggage code is: ", String($para.prop("luggageCode")), ". "); </script></body></html> |
结果：
5、addClass(class|fn)属性
为每个匹配的元素添加指定的类名。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <p> </p> <ul> <li>Hello</li> <li>Hello</li> <li>Hello</li> </ul> <script src="jquery-2.2.3.js"></script> <script> //为匹配的元素加上 ‘selected‘ 类 $("p").addClass("selected"); $("p").addClass("selected1 selected2"); //给li加上不同的class $(‘ul li:last‘).addClass(function() { return ‘item-‘ + $(this).index(); }); </script></body></html> |
6、removeClass([class|fn])属性
从所有匹配的元素中删除全部或者指定的类。
1 2 3 4 5 6 7 8 9 10 | <script> //从匹配的元素中删除 ‘selected‘ 类 $("p").removeClass("selected"); //删除匹配元素的所有类 $("p").removeClass(); //删除最后一个元素上与前面重复的class $(‘li:last‘).removeClass(function() { return $(this).prev().attr(‘class‘); }); </script> |
7、html([val|fn])属性
取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。
1 2 3 4 5 6 7 8 9 10 | <script> //返回p元素的内容。 $(‘p‘).html(); //设置所有 p 元素的内容 $("p").html("Hello <b>world</b>!"); //使用函数来设置所有匹配元素的内容。 $("p").html(function(n){ return "这个 p 元素的 index 是：" + n; }); </script> |
8、 text([val|fn])属性
取得所有匹配元素的内容。
结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
1 2 3 4 5 6 7 8 9 10 | <script> //返回p元素的文本内容。 $(‘p‘).text(); //设置所有 p 元素的文本内容 $("p").text("Hello world!"); //使用函数来设置所有匹配元素的文本内容。 $("p").text(function(n){ return "这个 p 元素的 index 是：" + n; });</script> |
9、val([val|fn|arr])属性
获得匹配元素的当前值。
在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <select id="single"> <option>Single</option> <option>Single2</option> </select> <select id="multiple" multiple="multiple"> <option selected="selected">Multiple</option> <option>Multiple2</option> <option selected="selected">Multiple3</option> </select><br/> <input type="checkbox" value="check1"/> check1 <input type="checkbox" value="check2"/> check2 <input type="radio" value="radio1"/> radio1 <input type="radio" value="radio2"/> radio2 <script src="jquery-2.2.3.js"></script> <script> //获取文本框中的值 $("input").val(); //设定文本框的值 $("input").val("hello world!"); //设定文本框的值 $(‘input:text.items‘).val(function() { return this.value + ‘ ‘ + this.className; }); //设定一个select和一个多选的select的值 $("#single").val("Single2"); $("#multiple").val(["Multiple2", "Multiple3"]); $("input").val(["check2", "radio1"]); </script></body></html> |
10、css(name|pro|[,val|fn])属性
访问匹配元素的样式属性。
jQuery 1.8中，当你使用CSS属性在css()或animate()中，我们将根据浏览器自动加上前缀(在适当的时候)，比如("user-select", "none"); 在Chrome/Safari浏览器中我们将设置为"-webkit-user-select", Firefox会使用"-moz-user-select", IE10将使用"-ms-user-select".
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script> //取得第一个段落的color样式属性的值。 $("p").css("color"); //将所有段落的字体颜色设为红色并且背景为蓝色。 $("p").css({ "color": "#ff0011", "background": "blue" }); //将所有段落字体设为红色 $("p").css("color","red"); //逐渐增加div的大小 $("div").click(function() { $(this).css({ width: function(index, value) { return parseFloat(value) * 1.2; }, height: function(index, value) { return parseFloat(value) * 1.2; } }); }); </script> |
11、offset([coordinates])属性
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <p>Hello</p><p>2nd Paragraph</p> <script src="jquery-2.2.3.js"></script> <script> //获取第二段的偏移 var p = $("p:last"); var offset = p.offset(); p.html( "left: " + offset.left + ", top: " + offset.top ); //获取第二段的偏移 $("p:last").offset({ top: 10, left: 30 }); </script></body></html> |
12、position()属性
获取匹配元素相对父元素的偏移。
返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <p>Hello</p><p>2nd Paragraph</p> <script src="jquery-2.2.3.js"></script> <script> //获取第一段的偏移 var p = $("p:first"); var position = p.position(); $("p:last").html( "left: " + position.left + ", top: " + position.top ); </script></body></html> |
结果：
13、scrollTop([val])属性
获取匹配元素相对滚动条顶部的偏移。
此方法对可见和隐藏元素均有效。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <p>Hello</p><p>2nd Paragraph</p> <script src="jquery-2.2.3.js"></script> <script> //获取第一段相对滚动条顶部的偏移 var p = $("p:first"); $("p:last").text( "scrollTop:" + p.scrollTop() ); //设置相对滚动条顶部的偏移 $("div.demo").scrollTop(300); </script></body></html> |
14、heigh([val|fn])属性
取得匹配元素当前计算的高度值（px）。
在 jQuery 1.2 以后可以用来获取 window 和 document 的高
1 2 3 4 5 6 7 8 9 10 11 12 | <script> //获取第一段的高 $("p").height(); //把所有段落的高设为 20: $("p").height(20); //以 10 像素的幅度增加 p 元素的高度 $("button").click(function(){ $("p").height(function(n,c){ return c+10; }); }); </script> |
15、width([val|fn])属性
取得第一个匹配元素当前计算的宽度值（px）。
在 jQuery 1.2 以后可以用来获取 window 和 document 的宽
1 2 3 4 5 6 7 8 9 10 11 12 | <script> //获取第一段的宽 $("p").width(); //把所有段落的宽设为 20: $("p").width(20); //以 10 像素的幅度增加 p 元素的宽度 $("button").click(function(){ $("p").width(function(n,c){ return c+10; }); }); </script> |
16、innerHeight()属性
获取第一个匹配元素内部区域高度（包括补白、不包括边框）。
此方法对可见和隐藏元素均有效。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <p>Hello</p><p>2nd Paragraph</p> <script src="jquery-2.2.3.js"></script> <script> //获取第一段落内部区域高度。 var p = $("p:first"); $("p:last").text( "innerHeight:" + p.innerHeight() ); </script></body></html> |
结果：
17、innerWidth()属性
获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。
此方法对可见和隐藏元素均有效。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <p>Hello</p><p>2nd Paragraph</p> <script src="jquery-2.2.3.js"></script> <script> //获取第一段落内部区域宽度。 var p = $("p:first"); $("p:last").text( "innerWidth:" + p.innerWidth() ); </script></body></html> |
结果：
18、outerHeight([soptions])属性
获取第一个匹配元素外部高度（默认包括补白和边框）。
此方法对可见和隐藏元素均有效。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <p>Hello</p><p>2nd Paragraph</p> <script src="jquery-2.2.3.js"></script> <script> //获取第一段落外部高度。 var p = $("p:first"); $("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) ); </script></body></html> |
结果：
19、outerWidth([options])属性
获取第一个匹配元素外部宽度（默认包括补白和边框）。
此方法对可见和隐藏元素均有效。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <p>Hello</p><p>2nd Paragraph</p> <script src="jquery-2.2.3.js"></script> <script> //获取第一段落外部宽度。 var p = $("p:first"); $("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) ); </script></body></html> |
结果：
jQuery文档处理
1、append(content|fn)
向每个匹配的元素内部追加内容。
这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <p>I would like to say: </p> <script src="jquery-2.2.3.js"></script> <script> //向所有段落中追加一些HTML标记。 $("p").append("<b>Hello</b>"); </script></body></html> |
结果：
2、appendTo(content)
把所有匹配的元素追加到另一个指定的元素元素集合中。
实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。
在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，返回值是所有被追加的内容，而不仅仅是先前所选中的元素。所以，要选择先前选中的元素，需要使用end()方法。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <p>I would like to say: </p> <div></div><div></div> <script src="jquery-2.2.3.js"></script> <script> //把所有段落追加到ID值为foo的元素中。 $("p").appendTo("div"); //新建段落追加div中并加上一个class $("<p/>") .appendTo("div") .addClass("test") .end() .addClass("test2"); </script></body></html> |
结果：
3、prepend(content|fn)
向每个匹配的元素内部前置内容。
这是向所有匹配元素内部的开始处插入内容的最佳方式。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <p>I would like to say: </p> <p>I would like to say: </p> <b class="foo">Hello</b> <b class="foo">Good Bye</b> <script src="jquery-2.2.3.js"></script> <script> //向所有段落中前置一些HTML标记代码。 $("p").prepend("<b>Hello</b>"); //将一个DOM元素前置入所有段落 $("p").prepend( $(".foo")[0] ); //向所有段落中前置一个jQuery对象(类似于一个DOM元素数组)。 $("p").prepend( $("b") ); </script></body></html> |
4、prependTo(content)
把所有匹配的元素前置到另一个、指定的元素元素集合中。
实际上，使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。
在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，要选择先前选中的元素，需要使用end()方法。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <p>I would like to say: </p><div id="foo"></div> <script src="jquery-2.2.3.js"></script> <script> //把所有段落追加到ID值为foo的元素中。 $("p").prependTo("#foo"); </script></body></html> |
结果：
5、after(content|fn)
在每个匹配的元素之后插入内容。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <!--<p>I would like to say: </p>--> <!--<b id="foo">Hello</b><p>I would like to say: </p>--> <b>Hello</b><p>I would like to say: </p> <script src="jquery-2.2.3.js"></script> <script> //在所有段落之后插入一些HTML标记代码。 //$("p").after("<b>Hello</b>"); //在所有段落之后插入一个DOM元素。 //$("p").after( $("#foo")[0] ); //在所有段落中后插入一个jQuery对象(类似于一个DOM元素数组)。 $("p").after( $("b") ); </script></body></html> |
6、 before(content|fn)
在每个匹配的元素之前插入内容。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <!--<p>I would like to say: </p>--> <!--<p>I would like to say: </p><b id="foo">Hello</b>--> <p>I would like to say: </p><b>Hello</b> <script src="jquery-2.2.3.js"></script> <script> //在所有段落之前插入一些HTML标记代码。 //$("p").before("<b>Hello</b>"); //在所有段落之前插入一个元素。 //$("p").before( $("#foo")[0] ); //在所有段落中前插入一个jQuery对象(类似于一个DOM元素数组)。 $("p").before( $("b") ); </script></body></html> |
7、 insertAfter(content)
把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
实际上，使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面。
在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，要选择先前选中的元素，需要使用end()方法。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <p>I would like to say: </p><div id="foo">Hello</div> <script src="jquery-2.2.3.js"></script> <script> //把所有段落插入到一个元素之后。与 $("#foo").after("p")相同 $("p").insertAfter("#foo"); </script></body></html> |
结果：
8、insertBefore(content)
把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
实际上，使用这个方法是颠倒了常规的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面。
在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，要选择先前选中的元素，需要使用end()方法。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="foo">Hello</div><p>I would like to say: </p> <script src="jquery-2.2.3.js"></script> <script> //把所有段落插入到一个元素之前。与 $("#foo").before("p")相同。 $("p").insertBefore("#foo"); </script></body></html> |
结果：
9、empty()
删除匹配的元素集合中所有的子节点。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <p>Hello, <span>Person</span> <a href="#">and person</a></p> <script src="jquery-2.2.3.js"></script> <script> //把所有段落的子元素（包括文本节点）删除 $("p").empty(); </script></body></html> |
结果：
10、 remove([expr])
从DOM中删除所有匹配的元素。
这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <!--<p>Hello</p> how are <p>you?</p>--> <p class="hello">Hello</p> how are <p>you?</p> <script src="jquery-2.2.3.js"></script> <script> //从DOM中把所有段落删除 //$("p").remove(); //从DOM中把带有hello类的段落删除 $("p").remove(".hello"); </script></body></html> |
11、detach([expr])
从DOM中删除所有匹配的元素。
这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <!--<p>Hello</p> how are <p>you?</p>--> <p class="hello">Hello</p> how are <p>you?</p> <script src="jquery-2.2.3.js"></script> <script> //从DOM中把所有段落删除 //$("p").detach(); //从DOM中把带有hello类的段落删除 $("p").detach(".hello"); </script></body></html> |
12、clone([Even[,deepEven]])
克隆匹配的DOM元素并且选中这些克隆的副本。
在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <p>Hello</p> how are <p>you?</p> <button>Clone Me!</button> <script src="jquery-2.2.3.js"></script> <script> //克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中。 $("b").clone().prependTo("p"); //创建一个按钮，他可以复制自己，并且他的副本也有同样功能。 $("button").click(function(){ $(this).clone(true).insertAfter(this); }); </script></body></html> |
结果：
jQuery筛选
1、eq(index|-index)
获取当前链式操作中第N个jQuery对象，返回jQuery对象，当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个，具体可以看以下示例。
类似的有get(index),不过get(index)返回的是DOM对象。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <p> This is just a test.</p> <p> So is this</p> <script src="jquery-2.2.3.js"></script> <script> //获取匹配的第二个元素 //$("p").eq(1) //获取匹配的第二个元素 $("p").eq(-2) </script></body></html> |
2、first()
获取第一个元素
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> <script src="jquery-2.2.3.js"></script> <script> //获取匹配的第一个元素 $(‘li‘).first() </script></body></html> |
结果：
3、 last()
获取最后个元素
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> <script src="jquery-2.2.3.js"></script> <script> //获取匹配的最后个元素 $(‘li‘).last(); </script></body></html> |
结果：
4、children([expr])
取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <!--<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>--> <div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div> <script src="jquery-2.2.3.js"></script> <script> //查找DIV中的每个子元素。 //$("div").children() //在每个div中查找 .selected 的类。 $("div").children(".selected") </script></body></html> |
5、find(e|o|e)
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <p><span>Hello</span>, how are you?</p> <script src="jquery-2.2.3.js"></script> <script> //从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同。 $("p").find("span") </script></body></html> |
结果：
6、next([expr])
取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <!--<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>--> <p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div> <script src="jquery-2.2.3.js"></script> <script> //找到每个段落的后面紧邻的同辈元素。 //$("p").next() //找到每个段落的后面紧邻的同辈元素中类名为selected的元素。 $("p").next(".selected") </script></body></html> |
7、nextAll([expr])
查找当前元素之后所有的同辈元素。
可以用表达式过滤
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div></div><div></div><div></div><div></div> <script src="jquery-2.2.3.js"></script> <script> //给第一个div之后的所有元素加个类 $("div:first").nextAll().addClass("after"); </script></body></html> |
结果：
8、nextUntil([e|e][,f])
查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。
如果提供的jQuery代表了一组DOM元素，.nextUntil()方法也能让我们找遍所有元素所在的DOM树，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个新jQuery对象里包含了下面所有找到的同辈元素，但不包括那个选择器匹配到的元素。
如果没有选择器匹配到，或者没有提供参数，那么跟在后面的所有同辈元素都会被选中。这就跟用没有提供参数的 .nextAll() 效果一样。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <dl> <dt>term 1</dt> <dd>definition 1-a</dd> <dd>definition 1-b</dd> <dd>definition 1-c</dd> <dd>definition 1-d</dd> <dt id="term-2">term 2</dt> <dd>definition 2-a</dd> <dd>definition 2-b</dd> <dd>definition 2-c</dd> <dt>term 3</dt> <dd>definition 3-a</dd> <dd>definition 3-b</dd> </dl> <script src="jquery-2.2.3.js"></script> <script> //给#term-2后面直到dt前的元素加上红色背景 $(‘#term-2‘).nextUntil(‘dt‘).css(‘background-color‘, ‘red‘); var term3 = document.getElementById("term-3"); $("#term-1").nextUntil(term3, "dd").css("color", "green"); </script></body></html> |
结果：
9、parent([expr])
取得一个包含着所有匹配元素的唯一父元素的元素集合。
你可以使用可选的表达式来筛选。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <!--<div><p>Hello</p><p>Hello</p></div>--> <div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div> <script src="jquery-2.2.3.js"></script> <script> //查找每个段落的父元素 //$("p").parent() //查找段落的父元素中每个类名为selected的父元素。 $("p").parent(".selected") </script></body></html> |
10、parents([expr])
取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html> <script src="jquery-2.2.3.js"></script> <script> //找到每个span元素的所有祖先元素。 $("span").parents(); //找到每个span的所有是p元素的祖先元素。 $("span").parents("p"); </script></body></html> |
11、parentsUntil([e|e][,f])
查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
如果提供的jQuery代表了一组DOM元素，.parentsUntil()方法也能让我们找遍所有元素的祖先元素，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个返回的jQuery对象里包含了下面所有找到的父辈元素，但不包括那个选择器匹配到的元素。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li> </ul> <script src="jquery-2.2.3.js"></script> <script> //查找item-a的祖先，但不包括level-1 $(‘li.item-a‘).parentsUntil(‘.level-1‘) .css(‘background-color‘, ‘red‘); </script></body></html> |
12、prev([expr])
取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <!--<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>--> <div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p> <script src="jquery-2.2.3.js"></script> <script> //找到每个段落紧邻的前一个同辈元素。 //$("p").prev() //找到每个段落紧邻的前一个同辈元素中类名为selected的元素。 $("p").prev(".selected") </script></body></html> |
13、prevall([expr])
查找当前元素之前所有的同辈元素
可以用表达式过滤。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div></div><div></div><div></div><div></div> <script src="jquery-2.2.3.js"></script> <script> //给最后一个之前的所有div加上一个类 $("div:last").prevAll().addClass("before"); </script></body></html> |
结果：
14、prevUntil([e|e][,f])
查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。
如果提供的jQuery代表了一组DOM元素，.prevUntil()方法也能让我们找遍所有元素所在的DOM树，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个新jQuery对象里包含了前面所有找到的同辈元素，但不包括那个选择器匹配到的元素。
如果没有选择器匹配到，或者没有提供参数，那么排在前面的所有同辈元素都会被选中。这就跟用没有提供参数的 .prevAll()效果一样。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <dl> <dt>term 1</dt> <dd>definition 1-a</dd> <dd>definition 1-b</dd> <dd>definition 1-c</dd> <dd>definition 1-d</dd> <dt id="term-2">term 2</dt> <dd>definition 2-a</dd> <dd>definition 2-b</dd> <dd>definition 2-c</dd> <dt>term 3</dt> <dd>definition 3-a</dd> <dd>definition 3-b</dd> </dl> <script src="jquery-2.2.3.js"></script> <script> //给#term-2前面直到dt前的元素加上红色背景 $(‘#term-2‘).prevUntil(‘dt‘).css(‘background-color‘, ‘red‘); </script></body></html> |
15、siblings([expr])
取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <!--<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>--> <div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p> <script src="jquery-2.2.3.js"></script> <script> //找到每个div的所有同辈元素。 //$("div").siblings() //找到每个div的所有同辈元素中带有类名为selected的元素。 $("div").siblings(".selected") </script></body></html> |
jQuery事件
1、ready(fn)
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。
有一个参数－－对jQuery函数的引用－－会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字，并因此可以不再担心命名冲突而放心地使用$别名。
请确保在 <body> 元素的onload事件中没有注册函数，否则不会触发+$(document).ready()事件。
可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。
1 2 3 4 5 6 7 8 9 10 | <script> //在DOM加载完成时运行的代码，可以这样写： $(document).ready(function(){ // 在这里写你的代码... }); //使用 $(document).ready() 的简写，同时内部的 jQuery 代码依然使用 $ 作为别名，而不管全局的 $ 为何。 $(function($) { // 你可以在这里继续使用$作为别名... }); </script> |
2、on(eve,[sel],[data],fn)
在选择元素上绑定一个或多个事件的事件处理函数。
on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中，.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换，see .bind(), .delegate(), 和 .live(). 要删除的.on()绑定的事件，请参阅.off()。要附加一个事件，只运行一次，然后删除自己， 请参阅.one()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <script> //Display a paragraph‘s text in an alert when it is clicked: $("p").on("click", function(){ alert( $(this).text() ); }); //Pass data to the event handler, which is specified here by name: function myHandler(event) { alert(event.data.foo); } $("p").on("click", {foo: "bar"}, myHandler); //Cancel a form submit action and prevent the event from bubbling up by returning false: $("form").on("submit", false); //Cancel only the default action by using .preventDefault(). $("form").on("submit", function(event) { event.preventDefault(); }); //Stop submit events from bubbling without preventing form submit, using .stopPropagation(). $("form").on("submit", function(event) { event.stopPropagation(); }); </script> |
3、off(eve,[sel],[fn])
在选择元素上移除一个或多个事件的事件处理函数。
off() 方法移除用.on()绑定的事件处理程序。有关详细信息，请参阅该网页上delegated和directly绑定事件。特定的事件处理程序可以被移除元素上提供事件的名称，命名空间，选择器，或处理函数名称的组合。当有多个过滤参数，所提供的参数都必须匹配的事件处理程序被删除。
如果一个简单的事件名称，比如提供"click"，所有 这种类型的事件（包括直接和委派）从jQuery设置的元素上删除。当编写代码，将作为一个插件使用，或者干脆当一个大的代码基础工作，最好的做法是安装和取下使用命名空间的事件，从而使代码不会无意中删除其他代码附加事件处理程序。在一个特定的命名空间中的所有类型的所有事件，可以从一个元素中删除，只是提供了一个命名空间，比如 ".myPlugin"。至少，无论是命名空间或事件名称必须提供。
要删除特定的委派事件处理程序，提供一个selector 的参数。选择器字符串必须是完全匹配递到.on()事件处理程序附加的选择器。要删除非委托元素上的所有事件，使用特殊值 "**" 。
处理程序也可以删除handler参数指定名称的函数。当jQuery的绑定一个事件处理程序，它分配一个唯一的ID给处理函数。函数用jQuery.proxy()代理或类似有相同的唯一ID机制（代理函数），因此，通过代理处理程序.off 可能会删除比预期更多的处理程序。在这些情况下，最好是附加和移除事件处理程序，使用命名空间。
和.on()一样，你可以传递一个 events-map>参数明确的指定而不是用events 和 handler作为单独参数。键事件和/或命名空间;值是处理函数或为false的特殊价值。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <script> //Remove all event handlers from all paragraphs: $("p").off(); //Remove all delegated click handlers from all paragraphs: $("p").off( "click", "**" ); //Remove just one previously bound handler by passing it as the third argument: var foo = function () { // code to handle some kind of event }; // ... now foo will be called when paragraphs are clicked ... $("body").on("click", "p", foo); // ... foo will no longer be called. $("body").off("click", "p", foo); //Unbind all delegated event handlers by their namespace: var validate = function () { // code to validate form entries }; // delegate events under the ".validator" namespace $("form").on("click.validator", "button", validate); $("form").on("keypress.validator", "input[type=‘text‘]", validate); // remove event handlers in the ".validator" namespace $("form").off(".validator"); </script> |
4、bind(type,[data],fn)
为每个匹配元素的特定事件绑定事件处理函数。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <script> //当每个段落被点击的时候，弹出其文本。 $("p").bind("click", function(){ alert( $(this).text() ); }); //同时绑定多个事件类型 $(‘#foo‘).bind(‘mouseenter mouseleave‘, function() { $(this).toggleClass(‘entered‘); }); //同时绑定多个事件类型/处理程序 $("button").bind({ click:function(){$("p").slideToggle();}, mouseover:function(){$("body").css("background-color","red");}, mouseout:function(){$("body").css("background-color","#FFFFFF");} }); //你可以在事件处理之前传递一些附加的数据。 function handler(event) { alert(event.data.foo); } $("p").bind("click", {foo: "bar"}, handler) //通过返回false来取消默认的行为并阻止事件起泡。 $("form").bind("submit", function() { return false; }) //通过使用 preventDefault() 方法只取消默认的行为。 $("form").bind("submit", function(event){ event.preventDefault(); }); //通过使用 stopPropagation() 方法只阻止一个事件起泡。 $("form").bind("submit", function(event){ event.stopPropagation(); }); </script> |
5、one(type,[data],fn)
为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。
多数情况下，可以把事件处理函数定义为匿名函数（见示例一）。在不可能定义匿名函数的情况下，可以传递一个可选的数据对象作为第二个参数（而事件处理函数则作为第三个参数）。
1 2 3 4 5 6 | <script> //当所有段落被第一次点击的时候，显示所有其文本。 $("p").one("click", function(){ alert( $(this).text() ); }); </script> |
6、trigger(type,[data])
在每一个匹配的元素上触发某类事件。
这个函数也会导致浏览器同名的默认行为的执行。比如，如果用trigger()触发一个‘submit‘，则同样会导致浏览器提交表单。如果要阻止这种默认行为，应返回false。
你也可以触发由bind()注册的自定义事件而不限于浏览器默认事件。
事件处理函数会收到一个修复的(规范化的)事件对象，但这个对象没有特定浏览器才有的属性，比如keyCode。
jQuery也支持 <a href="http://docs.jquery.com/Namespaced_Events">命名空间事件</a>。这允许你触发或者解除绑定一组特定的事件处理函数，而无需一一个指定。你可以在事件类型后面加上感叹号 ! 来只触发那些没有命名空间的事件处理函数。
jQuery 1.3中新增：
所有触发的事件现在会冒泡到DOM树上了。举例来说，如果你在一个段落p上触发一个事件，他首先会在这个元素上触发，其次到父元素，在到父元素的父元素，直到触发到document对象。这个事件对象有一个 .target 属性指向最开始触发这个事件的元素。你可以用 stopPropagation() 来阻止事件冒泡，或者在事件处理函数中返回false即可。
事件对象构造器现在已经公开，并且你可以自行创建一个事件对象。这个事件对象可以直接传递给trigger所触发的事件处理函数。事件对象的完整属性列表可以在 <a href="http://docs.jquery.com/Events/jQuery.Event">jQuery.Event</a> 的文档里找到。
你可以有三种方式指定事件类型：
* 你可以传递字符串型的事件名称(type参数)。
* 你可以使用jQuery.Event对象。可以将数据放进这个对象，并且这个对象可以被触发的事件处理函数获取到。
* 最后，你可以传递一个带有数据的字面量对象。他将被复制到真正的jQuery.Event对象上去。 注意在这种情况下你‘‘‘必须‘‘‘指定一个 <em>type</em> 属性。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script> //提交第一个表单，但不用submit() $("form:first").trigger("submit") //给一个事件传递参数 $("p").click( function (event, a, b) { // 一个普通的点击事件时，a和b是undefined类型 // 如果用下面的语句触发，那么a指向"foo",而b指向"bar" } ).trigger("click", ["foo", "bar"]); //下面的代码可以显示一个"Hello World" $("p").bind("myEvent", function (event, message1, message2) { alert(message1 + ‘ ‘ + message2); }); $("p").trigger("myEvent", ["Hello","World!"]); </script> |
7、triggerHandler(type, [data])
这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。
这个方法的行为表现与trigger类似，但有以下三个主要区别：
* 第一，他不会触发浏览器默认事件。
* 第二，只触发jQuery对象集合中第一个元素的事件处理函数。
* 第三，这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。此外，如果最开始的jQuery对象集合为空，则这个方法返回 undefined 。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <button id="old">.trigger("focus")</button> <button id="new">.triggerHandler("focus")</button><br/><br/> <input type="text" value="To Be Focused"/> <script src="jquery-2.2.3.js"></script> <script> //如果你对一个focus事件执行了 .triggerHandler() ，浏览器默认动作将不会被触发，只会触发你绑定的动作。 $("#old").click(function(){ $("input").trigger("focus"); }); $("#new").click(function(){ $("input").triggerHandler("focus"); }); $("input").focus(function(){ $("<span>Focused!</span>").appendTo("body").fadeOut(1000); }); </script></body></html> |
8、unbind(t,[d|f])
bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
如果没有参数，则删除所有绑定的事件。
你可以将你用bind()注册的自定义事件取消绑定。
如果提供了事件类型作为参数，则只删除该类型的绑定事件。
如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <script> //把所有段落的所有事件取消绑定 $("p").unbind() //将段落的click事件取消绑定 $("p").unbind( "click" ) //删除特定函数的绑定，将函数作为第二个参数传入 var foo = function () { // 处理某个事件的代码 }; $("p").bind("click", foo); // ... 当点击段落的时候会触发 foo $("p").unbind("click", foo); // ... 再也不会被触发 foo </script> |
9、blur([[data],fn])
当元素失去焦点时触发 blur 事件。
这个函数会调用执行绑定到blur事件的所有函数，包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的
1 2 3 4 5 6 | <script> //触发所有段落的blur事件 $("p").blur(); //任何段落失去焦点时弹出一个 "Hello World!"在每一个匹配元素的blur事件中绑定的处理函数。 $("p").blur( function () { alert("Hello World!"); } ); </script> |
10、change([[data],fn])
当元素的值发生改变时，会发生 change 事件。
该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。
1 2 3 4 5 6 7 8 | <script> //触发被选元素的 change 事件。 $(selector).change(); //给所有的文本框增加输入验证 $("input[type=‘text‘]").change( function() { // 这里可以写些验证代码 }); </script> |
11、click([[data],fn])
触发每一个匹配元素的click事件。
这个函数会调用执行绑定到click事件的所有函数。
1 2 3 4 5 6 | <script> //触发页面内所有段落的点击事件 $("p").click(); //将页面内所有段落点击后隐藏。 $("p").click( function () { $(this).hide(); }); </script> |
12、dblclick([[data],fn])
当双击元素时，会发生 dblclick 事件。
当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。在很短的时间内发生两次 click，即是一次 double click 事件。提示：如果把 dblclick 和 click 事件应用于同一元素，可能会产生问题。
1 2 3 4 | <script> //给页面上每个段落的双击事件绑上 "Hello World!" 警告框 $("p").dblclick( function () { alert("Hello World!"); });</script> |
13、error([[data],fn])
当元素遇到错误（没有正确载入）时，发生 error 事件。
这个函数会调用所有绑定到error事件上的函数，包括在对应元素上的浏览器默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。error事件通常可以在元素由于点击或者tab导航失去焦点时触发。
对于error事件，没有一个公众的标准。在大多数浏览器中，当页面的JavaScript发生错误时，window对象会触发error事件;当图像的src属性无效时，比如文件不存在或者图像数据错误时，也会触发图像对象的error事件。
如果异常是由window对象抛出，事件处理函数将会被传入三个参数：
1. 描述事件的信息 ("varName is not defined", "missing operator in expression", 等等.),
2. 包含错误的文档的完整URL
3. 异常发生的行数 如果事件处理函数返回true，则表示事件已经被处理，浏览器将认为没有异常。
更多相关信息:
Gecko DOM Reference - onerror Event
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <script> //在服务器端记录JavaScript错误日志: $(window).error(function(msg, url, line){ jQuery.post("js_error_log.php", { msg: msg, url: url, line: line }); }); //隐藏JavaScript错误: $(window).error(function(){ return true; }); //给你IE的用户隐藏无效的图像: $("img").error(function(){ $(this).hide(); });</script> |
14、focus([[data],fn])
当元素获得焦点时，触发 focus 事件。
可以通过鼠标点击或者键盘上的TAB导航触发。这将触发所有绑定的focus函数，注意，某些对象不支持focus方法。
1 2 3 4 5 6 7 8 9 10 | <script> //当页面加载后将 id 为 ‘login‘ 的元素设置焦点: $(document).ready(function(){ $("#login").focus(); }); //使人无法使用文本框: $("input[type=text]").focus(function(){ this.blur(); }); </script> |
15、focusin([data],fn)
当元素获得焦点时，触发 focusin 事件。
focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <p><input type="text" /> <span>focusout fire</span></p> <p><input type="password" /> <span>focusout fire</span></p> <script src="jquery-2.2.3.js"></script> <script> //获得焦点后会触发动画: $("p").focusin(function() { $(this).find("span").css(‘display‘,‘inline‘).fadeOut(1000); }); </script></body></html> |
16、 focusout([data],fn)
当元素失去焦点时触发 focusout 事件。
focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <p><input type="text" /> <span>focusout fire</span></p> <p><input type="password" /> <span>focusout fire</span></p> <script src="jquery-2.2.3.js"></script> <script> //失去焦点后会触发动画: $("p").focusout(function() { $(this).find("span").css(‘display‘,‘inline‘).fadeOut(1000); }); </script></body></html> |
17、keydown([[data],fn])
当键盘或按钮被按下时，发生 keydown 事件。
注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。
1 2 3 4 5 6 7 8 9 10 11 12 | <script> //在页面内对键盘按键做出回应，可以使用如下代码: $(window).keydown(function(event){ switch(event.keyCode) { // ... // 不同的按键可以做不同的事情 // 不同的浏览器的keycode不同 // 更多详细信息: http://unixpapa.com/js/key.html // 常用keyCode： 空格 32 Enter 13 ESC 27 } });</script> |
原文：http://www.cnblogs.com/hetan/p/5406535.html