jQuery 学习七(选择器)

    ●  在指定的上下文搜索  

Javascript代码  

1. /** 
2.  * 在指定的上下文环境中搜索满足选择器表达式的 jQuery 对象。  
3.  * 
4.  * @selector(String) 选择器 
5.  * @context(Selector, DOM, jQuery 对象) 上下文环境(可选)。若不提供，则在整个文档中搜索； 
6.  *                                                      若提供，则在当前的上下文环境中搜索 
7.  * @return jQuery Object(Array<Element>) 
8.  */  
9. $(selector, context);  

    ●  *  

Javascript代码  

1. /** 
2.  * 匹配所有元素，多用于结合上下文来搜索。 
3.  * 
4.  * @return jQuery Object(Array<Element>) 
5.  */  
6. $("*");  

    ●  .class  

Javascript代码  

1. /** 
2.  * 根据给定的类匹配元素。 
3.  *  
4.  * @className(String) 类名 
5.  * @return jQuery Object(Array<Element>) 
6.  */  
7. $(".className");  

    ●  element(即 tagName)  

Javascript代码  

1. /** 
2.  * 根据给定的元素名(tagName)匹配符合的元素。 
3.  *  
4.  * @tagName(String) 一个用于搜索的元素。指向 DOM 节点的标签名。 
5.  * @return jQuery Object(Array<Element>) 
6.  */  
7. $("tagName");  
8.   
9. // 例子：查找 DIV 元素。  
10. <div>DIV1</div>  
11. <div>DIV2</div>  
12. <span>SPAN</span>  
13.   
14. $("div") -> [ <div>DIV1</div>, <div>DIV2</div> ]  

    ●  #id  

Javascript代码  

1. /** 
2.  * 根据给定的 ID 匹配一个元素。 
3.  *  
4.  * @id(String) 元素的 id 属性中给定的值。 
5.  * @return jQuery Object(Element) 
6.  */  
7. $("#id");  
8.   
9. // 例子：查找 ID 为 "myDiv" 的元素  
10. <div id="notMe"><p>id="notMe"</p></div>  
11. <div id="myDiv">id="myDiv"</div>  
12.   
13. $("#myDiv")  -> [ <div id="myDiv">id="myDiv"</div> ]  

    ●  selector1,selector2,selectorN(并集)  

Javascript代码  

1. /** 
2.  * 将每一个选择器匹配到的元素合并后一起返回。 
3.  * 你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。 
4.  *  
5.  * @selector1(Selector) 一个有效的选择器 
6.  * @selector2(Selector) 另一个有效的选择器 
7.  * @selectorN(Selector) (可选) 任意多个有效选择器 
8.  * @return jQuery Object(Array<Element>) 
9.  */  
10. $("selector1,selector2,selectorN");  
11.   
12. // 例子：找到匹配任意一个类的元素。  
13. <div>div</div>  
14. <p class="myClass">p class="myClass"</p>  
15. <span>span</span>  
16. <p class="notMyClass">p class="notMyClass"</p>  
17.   
18. $("div,span,p.myClass") ->   
19.     [ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]  

    ●  ancestor descendant(直接孩子 + 间接孩子)  

Javascript代码  

1. /** 
2.  * 在给定的祖先元素下匹配所有的后代(直接孩子 + 间接孩子)元素。 
3.  *  
4.  * @ancestor(Selector) 任何有效选择器 
5.  * @descendant(Selector) 用以匹配元素的选择器，并且它是第一个选择器的后代元素 
6.  * @return jQuery Object(Array<Element>) 
7.  */  
8. $("ancestor descendant");  
9.   
10. // 例子：找到表单中所有的 input 元素。  
11. <form>  
12.   <label>Name:</label>  
13.   <input name="name" />  
14.   <fieldset>  
15.     <label>Newsletter:</label>  
16.     <input name="newsletter" />  
17.   </fieldset>  
18. </form>  
19. <input name="none" />  
20.   
21. $("form input") -> [ <input name="name" />, <input name="newsletter" /> ]  

    ●  parent > child(直接孩子)  

Javascript代码  

1. /** 
2.  * 在给定的父元素下匹配所有的子元素(直接孩子)。 
3.  *  
4.  * @parent(Selector) 任何有效选择器 
5.  * @child(Selector) 用以匹配元素的选择器，并且它是第一个选择器的子元素 
6.  * @return jQuery Object(Array<Element>) 
7.  */  
8. $("parent > child");  
9.   
10. // 例子：匹配表单中所有的子级 input 元素。  
11. <form>  
12.   <label>Name:</label>  
13.   <input name="name" />  
14.   <fieldset>  
15.     <label>Newsletter:</label>  
16.     <input name="newsletter" />  
17.   </fieldset>  
18. </form>  
19. <input name="none" />  
20.   
21. $("form > input") -> [ <input name="name" /> ]  

    ●  prev + next  

Javascript代码  

1. /** 
2.  * 匹配所有紧接在 prev 元素后的 next 元素。 
3.  *  
4.  * @prev(Selector) 任何有效选择器 
5.  * @next(Selector) 一个有效选择器并且紧接着第一个选择器 
6.  * @return jQuery Object(Array<Element>) 
7.  */  
8. $("prev + next");  
9.   
10. // 例子：匹配所有跟在 label 后面的 input 元素。  
11. <form>  
12.   <label>Name:</label>  
13.   <input name="name" />  
14.   <fieldset>  
15.     <label>Newsletter:</label>  
16.     <input name="newsletter" />  
17.   </fieldset>  
18. </form>  
19. <input name="none" />  
20.   
21. $("label + input") -> [ <input name="name" />, <input name="newsletter" /> ]  

    ●  prev ~ siblings  

Javascript代码  

1. /** 
2.  * 匹配 prev 元素之后的所有 siblings 元素。 
3.  *  
4.  * @prev(Selector) 任何有效选择器 
5.  * @siblings(Selector) 一个选择器，并且它作为第一个选择器的同辈 
6.  * @return jQuery Object(Array<Element>) 
7.  */  
8. $("prev ~ siblings");  
9.   
10. // 例子：找到所有与表单同辈的 input 元素。  
11. <form>  
12.   <label>Name:</label>  
13.   <input name="name" />  
14.   <fieldset>  
15.     <label>Newsletter:</label>  
16.     <input name="newsletter" />  
17.   </fieldset>  
18. </form>  
19. <input name="none" />  
20.   
21. $("form ~ input") -> [ <input name="none" /> ]  

    ●  :animated  

Javascript代码  

1. /** 
2.  * 匹配所有正在执行动画效果的元素。 
3.  *  
4.  * @prev(Selector) 任何有效选择器 
5.  * @siblings(Selector) 一个选择器，并且它作为第一个选择器的同辈 
6.  * @return jQuery Object(Array<Element>) 
7.  */  
8.   
9. // 例子：只有对不在执行动画效果的元素执行一个动画特效。  
10. <button id="run">Run</button><div></div>  
11.   
12. $("#run").click(function() {  
13.   $("div:not(:animated)").animate({ left: "+=20" }, 1000);  
14. });  

    ●  :eq(index)  

Javascript代码  

1. /** 
2.  * 匹配一个给定索引值的元素。 
3.  *  
4.  * @index (Number) 从 0 开始计数的索引值 
5.  * @return jQuery Object(Element) 
6.  */  
7.   
8. /* 
9.  * 例子：查找表格的第二行。即在所有的 tr 中得到第二个 tr。此方法只会得到一个结果集。此方式拿不到每个  
10.  * table 的第二行，拿到只是页面所有 tr 中的第二个 tr。若想得到每个表格的第二行，需要用到 nth-child 
11.  * 后续讲到的 :gt, :lt, :first, :last, :even, :odd 都是这样的逻辑 
12.  */  
13. <table>  
14.   <tr><td>Header 1</td></tr>  
15.   <tr><td>Value 1</td></tr>  
16.   <tr><td>Value 2</td></tr>  
17. </table>  
18.   
19. <table>  
20.   <tr><td>Header 1-1</td></tr>  
21.   <tr><td>Value 1-1</td></tr>  
22.   <tr><td>Value 2-1</td></tr>  
23. </table>  
24.   
25. $("tr:eq(1)") -> [ <tr><td>Value 1</td></tr> ]  
26.   
27. <table>  
28.   <tr><td>Header 1</td></tr>  
29. </table>  
30.   
31. <table>  
32.   <tr><td>Header 1-1</td></tr>  
33.   <tr><td>Value 1-1</td></tr>  
34.   <tr><td>Value 2-1</td></tr>  
35. </table>  
36.   
37. $("tr:eq(1)") -> [ <tr><td>Header 1-1</td></tr> ]  

    ●  :even  

Javascript代码  

1. /** 
2.  * 匹配所有索引值为偶数的元素，从 0 开始计数。 
3.  *  
4.  * @return jQuery Object(Array<Element>) 
5.  */  
6.   
7. // 例子：查找表格的 1, 3, 5 ... 行(即索引值 0, 2, 4 ... )。  
8. // 和 :eq 一样，它是在页面所有的元素中取 even。要取每个表格的 even 行，就不能像 :eq 一样用 :nth-child 了，需要用到筛选：$(table).find(tr:even);  
9. <table>  
10.   <tr><td>Header 1</td></tr>  
11.   <tr><td>Value 1</td></tr>  
12.   <tr><td>Value 2</td></tr>  
13. </table>  
14.   
15. $("tr:even") -> [ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]  

    ● dd  

Javascript代码  

1. /** 
2.  * 匹配所有索引值为奇数的元素，从 0 开始计数 
3.  *  
4.  * @return jQuery Object(Array<Element>) 
5.  */  
6.   
7. // 例子：查找表格的 2, 4, 6 ... 行(即索引值 1, 3, 5 ... )。  
8. // 和 :eq 一样，它是在页面所有的元素中取 odd。要取每个表格的 odd 行，就不能像 :eq 一样用 :nth-child 了，需要用到筛选：$(table).find(tr:odd);  
9. <table>  
10.   <tr><td>Header 1</td></tr>  
11.   <tr><td>Value 1</td></tr>  
12.   <tr><td>Value 2</td></tr>  
13. </table>  
14.   
15. $("tr:odd") -> [ <tr><td>Value 1</td></tr> ]  

    ●  :first  

Javascript代码  

1. /** 
2.  * 匹配找到的第一个元素。等价于 :eq(0) 
3.  *  
4.  * @return jQuery Object(Element) 
5.  */  
6.   
7. // 例子：查找表格的第一行。  
8. <table>  
9.   <tr><td>Header 1</td></tr>  
10.   <tr><td>Value 1</td></tr>  
11.   <tr><td>Value 2</td></tr>  
12. </table>  
13.   
14. $("tr:first") -> [ <tr><td>Header 1</td></tr> ]  

    ●  :last  

Javascript代码  

1. /** 
2.  * 匹配找到的最后一个元素。 
3.  *  
4.  * @return jQuery Object(Element) 
5.  */  
6.   
7. // 例子：查找表格的最后一行。  
8. <table>  
9.   <tr><td>Header 1</td></tr>  
10.   <tr><td>Value 1</td></tr>  
11.   <tr><td>Value 2</td></tr>  
12. </table>  
13.   
14. $("tr:last") -> [ <tr><td>Value 2</td></tr> ]  

    ●  :gt(index)  

Javascript代码  

1. /** 
2.  * 匹配所有大于给定索引值的元素。 
3.  *  
4.  * @index(Number) 从 0 开始计数的索引值 
5.  * @return jQuery Object(Array<Element>) 
6.  */  
7.   
8. // 例子：查找第 2, 3 行，即索引值是 1 和 2，也就是比 0 大。  
9. <table>  
10.   <tr><td>Header 1</td></tr>  
11.   <tr><td>Value 1</td></tr>  
12.   <tr><td>Value 2</td></tr>  
13. </table>  
14.   
15. $("tr:gt(0)") -> [ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]  

    ●  :lt(index)  

Javascript代码  

1. /** 
2.  * 匹配所有小于给定索引值的元素。 
3.  *  
4.  * @index(Number) 从 0 开始计数的索引值 
5.  * @return jQuery Object(Array<Element>) 
6.  */  
7.   
8. // 例子：查找第 1, 2 行，即索引值是 0 和 1，也就是比 2 小。  
9. <table>  
10.   <tr><td>Header 1</td></tr>  
11.   <tr><td>Value 1</td></tr>  
12.   <tr><td>Value 2</td></tr>  
13. </table>  
14.   
15. $("tr:lt(2)") -> [ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]  

    ●  :header  

Javascript代码  

1. /** 
2.  * 匹配如 h1, h2, h3 之类的标题元素。 
3.  *  
4.  * @return jQuery Object(Array<Element>) 
5.  */  
6.   
7. // 例子：给页面内所有标题加上背景色。  
8. <h1>Header 1</h1>  
9. <p>Contents 1</p>  
10. <h2>Header 2</h2>  
11. <p>Contents 2</p>  
12.   
13. $(":header").css("background", "#EEE") ->   
14. [ <h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2> ]  

    ●  :not(selector)  

Javascript代码  

1. /** 
2.  * 去除所有与给定选择器匹配的元素。 
3.  *  
4.  * @selector(Selector) 用于筛选的选择器 
5.  * @return jQuery Object(Array<Element>) 
6.  */  
7.   
8. // 例子：查找所有未选中的 input 元素。  
9. <input name="apple" />  
10. <input name="flower" checked="checked" />  
11.   
12. $("input:not(:checked)") -> [ <input name="apple" /> ]  

    ●  :contains(text)  

Javascript代码  

1. /** 
2.  * 匹配包含给定文本的元素。 
3.  *  
4.  * @text(String) 一个用以查找的字符串 
5.  * @return jQuery Object(Array<Element>) 
6.  */  
7.   
8. // 例子：查找所有包含 "John" 的 div 元素。  
9. <div><span>John Re</span></div>  
10. <div>George Martin</div>  
11. <div>Malcom John Sinclair</div>  
12. <div>J. Ohn</div>  
13.   
14. $("div:contains('John')") -> [ <div><span>John Re</span></div>, <div>Malcom John Sinclair</div> ]  

    ●  :empty  

Javascript代码  

1. /** 
2.  * 匹配所有不包含子元素或者文本的空元素。 
3.  *  
4.  * @return jQuery Object(Array<Element>) 
5.  */  
6.   
7. // 例子：查找所有不包含子元素或者文本的空元素。  
8. <table>  
9.   <tr><td>Value 1</td><td></td></tr>  
10.   <tr><td>Value 2</td><td></td></tr>  
11. </table>  
12.   
13. $("td:empty") -> [ <td></td>, <td></td> ]  

    ●  :has(selector)(text)  

Javascript代码  

1. /** 
2.  * 匹配含有选择器所匹配的元素的元素。 
3.  *  
4.  * @selector(Selector) 一个用于筛选的选择器 
5.  * @return jQuery Object(Array<Element>) 
6.  */  
7.   
8. // 例子：给所有包含 p 元素的 div 元素添加一个 text 类。  
9. <div><span><p>Hello</p></span></div>  
10. <div>Hello again!</div>  
11.   
12. $("div:has(p)").addClass("text") -> [ <div class="text"><span><p>Hello</p></span></div> ]  

    ●  :parent  

Javascript代码  

1. /** 
2.  * 匹配含有子元素或者文本的元素。 
3.  *  
4.  * @return jQuery Object(Array<Element>) 
5.  */  
6.   
7. // 例子：查找所有含有子元素或者文本的 td 元素。  
8. <table>  
9.   <tr><td>Value 1</td><td></td></tr>  
10.   <tr><td>Value 2</td><td></td></tr>  
11. </table>  
12.   
13. $("td:parent") -> [ <td>Value 1</td>, <td>Value 2</td> ]  

    ●  :hidden  

Javascript代码  

1. /** 
2.  * 匹配所有的不可见元素，input 元素的 type 属性为 "hidden" 时也会被匹配到。 
3.  *  
4.  * @return jQuery Object(Array<Element>) 
5.  */  
6.   
7. // 例子：查找所有不可见的 tr 元素。  
8. <table>  
9.   <tr style="display:none"><td>Value 1</td></tr>  
10.   <tr><td>Value 2</td></tr>  
11. </table>  
12.   
13. $("tr:hidden") -> [ <tr style="display:none"><td>Value 1</td></tr> ]  

    ●  :visible  

Javascript代码  

1. /** 
2.  * 匹配所有的可见元素。 
3.  *  
4.  * @return jQuery Object(Array<Element>) 
5.  */  
6.   
7. // 例子：查找所有可见的 tr 元素。  
8. <table>  
9.   <tr style="display:none"><td>Value 1</td></tr>  
10.   <tr><td>Value 2</td></tr>  
11. </table>  
12.   
13. $("tr:visible") -> [ <tr><td>Value 2</td></tr> ]  

    ●  [attribute]  

Javascript代码  

1. /** 
2.  * 匹配包含给定属性的元素(若某个元素有这个属性，可是值为 ""，那么这个元素不将被包含进来)。 
3.  *  
4.  * @attribute(String) 属性名 
5.  * @return jQuery Object(Array<Element>) 
6.  */  
7.   
8. // 例子：查找所有含有 id 属性的 div 元素。  
9. <div>  
10.   <p>Hello!</p>  
11. </div>  
12. <div id="test2"></div>  
13.   
14. $("div[id]") -> [ <div id="test2"></div> ]  

    ●  [attribute=value]  

Javascript代码  

1. /** 
2.  * 匹配给定的属性是某个特定值的元素。 
3.  *  
4.  * @attribute(String) 属性名 
5.  * @value(String) 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含 "]" 时，用以避免冲突。 
6.  * @return jQuery Object(Array<Element>) 
7.  */  
8.   
9. // 例子：查找所有 name 属性是 "newsletter" 的 input 元素。  
10. <input type="checkbox" name="newsletter" value="Hot Fuzz" />  
11. <input type="checkbox" name="newsletter" value="Cold Fusion" />  
12. <input type="checkbox" name="accept" value="Evil Plans" />  
13.   
14. $("input[name='newsletter']").attr("checked", true) -> [ <div id="test2"></div> ] ->  
15.     [ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />,   
16.     <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]  

    ●  [attribute!=value]  

Javascript代码  

1. /** 
2.  * 匹配给定的属性是不包含某个特定值的元素。 
3.  *  
4.  * @attribute(String) 属性名 
5.  * @value(String) 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含 "]" 时，用以避免冲突。 
6.  * @return jQuery Object(Array<Element>) 
7.  */  
8.   
9. // 例子：查找所有 name 属性不是 "newsletter" 的 input 元素。  
10. <input type="checkbox" name="newsletter" value="Hot Fuzz" />  
11. <input type="checkbox" name="newsletter" value="Cold Fusion" />  
12. <input type="checkbox" name="accept" value="Evil Plans" />  
13.   
14. $("input[name!='newsletter']").attr("checked", true) ->   
15.     [ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ]  

    ●  [attribute*=value]  

Javascript代码  

1. /** 
2.  * 匹配给定的属性是以包含某些值的元素。 
3.  *  
4.  * @attribute(String) 属性名 
5.  * @value(String) 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含 "]" 时，用以避免冲突。 
6.  * @return jQuery Object(Array<Element>) 
7.  */  
8.   
9. // 例子：查找所有 name 包含 "man" 的 input 元素。  
10. <input name="man-news" />  
11. <input name="milkman" />  
12. <input name="letterman2" />  
13. <input name="newmilk" />  
14.   
15. $("input[name*='man']") ->   
16. [ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]  

    ●  [attribute^=value]  

Javascript代码  

1. /** 
2.  * 匹配给定的属性是以某些值开始的元素。 
3.  *  
4.  * @attribute(String) 属性名 
5.  * @value(String) 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含 "]" 时，用以避免冲突。 
6.  * @return jQuery Object(Array<Element>) 
7.  */  
8.   
9. // 例子：查找所有 name 以 "news" 开始的 input 元素。  
10. <input name="newsletter" />  
11. <input name="milkman" />  
12. <input name="newsboy" />  
13.   
14. $("input[name^='news']") -> [ <input name="newsletter" />, <input name="newsboy" /> ]  

    ●  [attribute$=value]  

Javascript代码  

1. /** 
2.  * 匹配给定的属性是以某些值结尾的元素。 
3.  *  
4.  * @attribute(String) 属性名 
5.  * @value(String) 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含 "]" 时，用以避免冲突。 
6.  * @return jQuery Object(Array<Element>) 
7.  */  
8.   
9. // 例子：查找所有 name 以 "letter" 结尾的 input 元素。  
10. <input name="newsletter" />  
11. <input name="milkman" />  
12. <input name="jobletter" />  
13.   
14. $("input[name$='letter']") -> [ <input name="newsletter" />, <input name="jobletter" /> ]  

    ●  [selector1][selector2][selectorN]  

Javascript代码  

1. /** 
2.  * 复合属性选择器，需要同时满足多个条件时使用。 
3.  *  
4.  * @selector1(Selector) 属性选择器 
5.  * @selector2(Selector) 另一个属性选择器，用以进一步缩小范围 
6.  * @selectorN(Selector) 任意多个属性选择器 
7.  * @return jQuery Object(Array<Element>) 
8.  */  
9.   
10. // 例子：找到所有含有 id 属性，并且它的 name 属性是以 "man" 结尾的。  
11. <input id="man-news" name="man-news" />  
12. <input name="milkman" />  
13. <input id="letterman" name="new-letterman" />  
14. <input name="newmilk" />  
15.   
16. $("input[id][name$='man']") -> [ <input id="letterman" name="new-letterman" /> ]  

    ●  :first-child  

Javascript代码  

1. /** 
2.  * 匹配第一个子元素。 
3.  * :first 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素 
4.  *  
5.  * @return jQuery Object(Array<Element>) 
6.  */  
7.   
8. // 例子：在每个 ul 中查找第一个 li。  
9. <ul>  
10.   <li>John</li>  
11.   <li>Karl</li>  
12.   <li>Brandon</li>  
13. </ul>  
14. <ul>  
15.   <li>Glen</li>  
16.   <li>Tane</li>  
17.   <li>Ralph</li>  
18. </ul>  
19.   
20. $("ul li:first-child") -> [ <li>John</li>, <li>Glen</li> ]  

    ●  :last-child  

Javascript代码  

1. /** 
2.  * 匹配最后一个子元素。 
3.  * :last 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素 
4.  *  
5.  * @return jQuery Object(Array<Element>) 
6.  */  
7.   
8. // 例子：在每个 ul 中查找最后一个 li。  
9. <ul>  
10.   <li>John</li>  
11.   <li>Karl</li>  
12.   <li>Brandon</li>  
13. </ul>  
14. <ul>  
15.   <li>Glen</li>  
16.   <li>Tane</li>  
17.   <li>Ralph</li>  
18. </ul>  
19.   
20. $("ul li:last-child") -> [ <li>Brandon</li>, <li>Ralph</li> ]  

    ●  :nth-child(index/even/odd/equation)  

Javascript代码  

1. /** 
2.  * 匹配其父元素下的第 N 个子元素或奇偶元素。 
3.  * :eq(index) 只匹配一个元素，而这个将为每一个父元素匹配子元素。 
4.  * :nth-child 从 1 开始的，而 :eq() 是从 0 算起的！ 
5.  * 
6.  * 可以使用： 
7.  * nth-child(even); 
8.  * nth-child(odd); 
9.  * nth-child(3n); 
10.  * nth-child(2); 
11.  * nth-child(3n+1); 
12.  * nth-child(3n+2); 
13.  *  
14.  * @index(Number) 要匹配元素的序号，从 1 开始 
15.  * @return jQuery Object(Array<Element>) 
16.  */  
17.   
18. // 例子：在每个 ul 查找第 2 个li。  
19. <ul>  
20.   <li>John</li>  
21.   <li>Karl</li>  
22.   <li>Brandon</li>  
23. </ul>  
24. <ul>  
25.   <li>Glen</li>  
26.   <li>Tane</li>  
27.   <li>Ralph</li>  
28. </ul>  
29.   
30. $("ul li:nth-child(2)") -> [ <li>Karl</li>,   <li>Tane</li> ]  

    ● nly-child  

Javascript代码  

1. /** 
2.  * 如果某个元素是父元素中唯一的子元素，那它(子元素)将会被匹配。 
3.  * 如果父元素中含有其他元素，那它(子元素)将不会被匹配。 
4.  * 
5.  * @return jQuery Object(Array<Element>) 
6.  */  
7.   
8. // 例子：在 ul 中查找是唯一子元素的 li。  
9. <ul>  
10.   <li>John</li>  
11.   <li>Karl</li>  
12.   <li>Brandon</li>  
13. </ul>  
14. <ul>  
15.   <li>Glen</li>  
16. </ul>  
17.   
18. $("ul li:only-child") -> [ <li>Glen</li> ]  

    ●  form  

Javascript代码  

1. <form>  
2.   <input type="text" />  
3.   <input type="checkbox" />  
4.   <input type="radio" />  
5.   <input type="image" />  
6.   <input type="file" />  
7.   <input type="submit" />  
8.   <input type="reset" />  
9.   <input type="password" />  
10.   <input type="hidden" />  
11.   <input type="button" />  
12.   <select><option /></select>  
13.   <textarea></textarea>  
14.   <button></button>  
15. </form>  
16.   
17. // 匹配按钮?  
18. $(":button") -> [ <input type="button" />,<button></button> ]  
19. // 匹配复选框  
20. $(":checkbox") -> [ <input type="checkbox" /> ]  
21. // 匹配文件域  
22. $(":file") -> [ <input type="file" /> ]  
23. // 匹配不可见元素，或者 type 为 hidden 的元素  
24. $("input:hidden") -> [ <input type="hidden" /> ]  
25. // 匹配图像域  
26. $("input:image") -> [ <input type="image" /> ]  
27. // 匹配 input, textarea, select 和 button 元素  
28. $(":input") -> 全部  
29. // 匹配密码框  
30. $(":password") -> [ <input type="password" /> ]  
31. // 匹配单选按钮  
32. $(":radio") -> [ <input type="radio" /> ]  
33. // 匹配重置按钮  
34. $(":reset") -> [ <input type="reset" /> ]  
35. // 匹配提交按钮  
36. $(":submit") -> [ <input type="submit" /> ]  
37. // 匹配单行文本框  
38. $(":text") -> $(":submit") -> [ <input type="text" /> ]  

    ●  form object attribue  

Javascript代码  

1. <form>  
2.   <input type="checkbox" name="newsletter" checked="checked" value="Daily" />  
3.   <input type="checkbox" name="newsletter" value="Weekly" />  
4.   <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />  
5.   <input name="email" disabled="disabled" />  
6.     
7.   <select>  
8.     <option value="1">Flowers</option>  
9.     <option value="2" selected="selected">Gardens</option>  
10.     <option value="3">Trees</option>  
11.   </select>  
12. </form>  
13.   
14. // 匹配被选择的元素(复选框、单选框等，不包括 select 中的 option)  
15. $("input:checked") ->    
16.     [ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />,  
17.     <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ]  
18. // 匹配可用元素  
19. $("input:enabled") ->  
20.     <input type="checkbox" name="newsletter" checked="checked" value="Daily" />  
21.     <input type="checkbox" name="newsletter" value="Weekly" />  
22.     <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />  
23. // 匹配不可用元素  
24. $("input:disabled") -> [ <input name="email" disabled="disabled" /> ]  
25. // 匹配选中的 option 元素  
26. $("select option:selected") -> [ <option value="2" selected="selected">Gardens</option> ]