【jQuery使用手册】二：选择器

　　　　二、选择器

　　　　#id　　返回值：Array<Element>

　　　　根据给定的ID匹配一个元素。如果选择器中包含特殊字符，可以用两个斜杠(\\)转义。参数id：用于搜索的元素的id属性值。

　　　　示例：查找ID为"myDiv"的元素。　　　　

1 HTML代码：
2         <div id="notMe"><p>id="notMe"</p></div>
3        <div id="myDiv">id="myDiv"</div>
4 jQuery代码：
5         $("#myDiv");
6 结果：
7         [<div id="myDiv">id="myDiv"</div>]
8         

 

　　　　示例：查找含有特殊字符的元素。　　　　

代码 1 HTML代码:
2         <span id="foo:bar"></span>      
3         <span id="foo[bar]"></span>
4         <span id="foo.bar"></span>
5 jQuery代码：
6           $("#foo\\:bar");
7          $("#foo\\[bar\\]");
8          $("#foo\\.bar");

 

　　　　element　　返回值：Array<Element(s)>

　　　　根据给定的元素名匹配所有元素。参数element：一个用于搜索的元素。执行DOM节点的标签名。

　　　　示例：查找一个DIV元素。　　　　

1 HTML代码：
2         <div>DIV1</div>
3        <div>DIV2</div>
4        <span>SPAN</span>
5 jQuery代码：
6         $("div");
7 结果：
8         [<div>DIV1</div>,<div>DIV2</div>]

 

　　　　.class　　返回值：Array<Element(s)>

　　　　根据给定的类匹配元素。参数class：一个用以搜索的类，一个元素可以有多个类，只要有一个复合就能被匹配到。

　　　　示例：查找所有类是"myClass"的元素。　　　　

代码 1 HTML代码：
2        <div class="notMe">div class="notMe"</div>
3        <div class="myClass">div class="myClass"</div>
4        <span class="myClass">span class="myClass"</span>
5 jQuery代码：
6         $(".myClass");
7 结果：
8         [<div class="myClass">div class="myClass"</div>
9        <span class="myClass">span class="myClass"</span>]

 

　　　　*　　返回值：Array<Element(s)>

　　　　 匹配所有元素，多用于结合上下文来搜索。

　　　　 示例：找到每一个元素。　　　　

1 HTML代码：
2         <div>DIV</div>
3        <span>SPAN</span>
4        <p>P</p>
5 jQuery代码：
6         $("*");
7 结果：
8         [<div>DIV</div>,<span>SPAN</span>,<p>P</p>]

 

　　　　selector1,selector2,selectorN　　返回值：Array<element(s)>

　　　　将每一个选择器匹配到的元素合并后一起返回。可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。　　　　

代码 1 HTML代码：
2         <div>div</div>
3        <p class="myClass">p class="myClass"</p>
4        <span>span</span> 
5        <p class="notMyClass">p class="notMyClass"</p>
6 jQuery代码：
7         $("div,span,p.myClass");
8 结果：
9         [<div>div</div>,<p class="myClass">p class="myClass"]</p>,<span>span</span>]

 

　　　　ancestor descendant　　返回值：Array<Element(s)>

　　　　在给定的祖先元素下匹配所有的后代元素。参数 ancestor：任何有效的选择器；参数：descendant：用以匹配元素的选择器，并且它是第一个选择器的后代元素。

　　　　示例：找到表单中所有的input元素。　　

代码

 1 HTML代码：
 2         <form>
 3         <label>Name:</label>
 4         <input name="name" />
 5         <fieldset>
 6           <lable>Newsletter:</label><input name="newsletter"/>
 7         </fieldset>
 8         </form>
 9         <input name="none" />
10 jQuery代码：
11         $("form input");
12 结果：
13         [<input name="name" />,<input name="newsletter" />]     

 

　　　　parent>child　　返回值：Array<Element(s)>

　　　　在给定的父元素下匹配所有的子元素。参数parent：任何有效的选择器；参数child：用以匹配元素的选择器，并且它是第一个选择器的子元素。

　　　　示例：匹配表单中所有的子级input元素。　　　　

代码 HTML代码：
        <form>
        <label>Name:</label>
        <input name="name"/>
        <fieldset>
          <label>NewSletter:</label><input name="newsletter">
        </fieldset>
        </form>
        <input name="none" />
jQuery代码：
        $("form>input");
结果：
        [<input name="name" />]

 

　　　 prev + next　　返回值：Array<Element(s)>

　　　　匹配所有紧接在prev元素后的next元素。参数prev：任何有效的选择器；参数next：一个有效的选择器并且紧接着第一个选择器。

　　　　示例：匹配所有跟在label后面的input元素。

代码  1 HTML代码：
 2         <form>
 3         <label>Name:</label>
 4         <input name="name" />
 5         <fieldset>
 6           <label>Newsletter:</label><input name="newsletter" />
 7         </fieldset>
 8         </form>
 9         <input name="none">
10 jQuery代码：
11         $("label+input");
12 结果：
13         [<input name="name" />,<input name="newsletter" />]

 

　　　　 prev~siblings　　返回值：Array<Element(s)>

　　　　　匹配prev元素之后的所有siblings元素。参数prev：任何有效的选择器；参数siblings：一个选择器，并且它作为第一个选择器的同辈。

　　　　  示例：找到所有与表单同辈的input元素。　　　　 

代码  1 HTML代码：
 2         <form>
 3        <label>Name:</label>
 4        <input name="name" /> 
 5         <fieldset>
 6           <label>Newsletter:</label><input name="newsletter" />
 7         </fieldset>
 8        </form>        
 9        <input name="none">
10 jQuery代码：
11         $("label~input");
12 结果：
13         [<input name="none" />]

 

　　　　first()　　返回值：jQuery

　　　　获取第一个元素。示例：获取匹配的第一个元素。　　　　

代码  1 HTML代码：
 2         <ul>
 3           <li>list item 1</li>
 4           <li>list item 2</li>
 5           <li>list item 3</li>
 6           <li>list item 4</li>
 7           <li>list item 5</li>
 8        </ul>
 9 jQuery代码：
10         $("li").first();
11 结果：
12         [<li>list item 1</li>]

 

　　　　last()　　返回值：jQuery

　　　　获取最后个元素。示例：获取匹配的最后个元素。　　　　

代码  1 HTML代码：
 2        <ul>
 3          <li>list item 1</li>
 4          <li>list item 2</li>
 5          <li>list item 3</li>
 6          <li>list item 4</li>
 7          <li>list itme 5</li>
 8       </ul>
 9 jQuery代码：
10        $("li").last();
11 结果：
12        [<li>list item 5</li>]

 

　　　　:not　　返回值：Array<Element(s)>

　　　　去除所有与给定选择器匹配的元素。参数selector：用于筛选的选择器。

　　　　示例：查找所有未选中的input元素。　　　　

1 HTML代码：
2        <input name="apple" />
3       <input name="flower" checked="checked">
4 jQuery代码：
5        $("input:not(:checked)");
6 结果：
7        [<input name="apple" />]

 

　　　　:even　　返回值：Array<Element(s)>

　　　　匹配所有索引值为偶数的元素，从0开始计数。示例：查找表格的1、3、5行(即索引值为0、2、4)。　　　　

代码  1 HTML代码：
 2        <table>
 3        <tr><td>Header 1</td></tr>
 4        <tr><td>Value 1</td></tr>
 5        <tr><td>Value 2</td></tr>
 6       </table>
 7 jQuery代码：
 8        $("tr:even");
 9 结果：
10        [<tr><td>Header 1</td></tr>,<tr><td>Value2</td></tr>]

 

　　　　:odd　　返回值：Array<Element(s)>

　　　　匹配所有索引值为奇数的元素，从0开始计数。示例：查找表格的2、4、6行(即索引值1、3、5)。　　　　

代码 HTML代码：
        <table>
       <tr><td>Header 1</td></tr>
       <tr><td>Value 1</td></tr>
       <tr><td>Value 2</td></tr>
       </table>
jQuery代码：
        $("tr:odd");
结果：
        [<tr><td>Value1</td></tr>]

 

　　　　:eq　　返回值：Array<Element>

　　　　匹配一个给定索引的元素。示例：查找第二行。　　　　

代码  1 HTML代码：
 2         <table>
 3         <tr><td>Header 1</td></tr>
 4         <tr><td>Value 1</td></tr>
 5         <tr><td>Value 2</td></tr>
 6        </table>
 7 jQuery代码：
 8         $("tr:eq(1)");
 9 结果：
10         [<tr><td>Value 1</td></tr>]

 

　　　:gt　　返回值：Array<Element(s)>　

　　　匹配所有大于给定索引值的元素。示例：查找第二第三行，即索引值为1和2，也就是比0大(本示例共三行)。　　　

代码  1 HTML代码：
 2         <table>
 3         <tr><td>Header 1</td></tr>
 4         <tr><td>Value 1</td></tr>
 5         <tr><td>Value 2</td></tr>
 6        </table>
 7 jQuery代码：
 8         $("tr:gt(0)");
 9 结果:
10         [<tr><td>Value 1</td></tr>,<tr><td>Value 2</td></tr>]

 

　　　　:lt　　返回值：Array<Element(s)>

　　　　匹配所有小于索引值的元素。示例：查找第一第二行，即索引是0和1，也就是比2小。　　　　

代码  1 HTML代码：
 2         <table>
 3           <tr><td>Header 1</td></tr>
 4           <tr><td>Value 1</td></tr>
 5           <tr><td>Value 2</td></tr>
 6        </table>
 7 jQuery代码：
 8         $("tr:lt(2)");
 9 结果：
10         [<tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr>]

 

　　　　:header　　返回值：Array<Element(s)>

　　　　 匹配如h1、h2、h3之类的标题元素。示例：给页面内所有标题加上背景色。　　　　

代码 1 HTML代码：
2         <h1>Header 1</h1>
3        <p>Contents 1</p>
4        <h2>Header 2</h2>
5        <p>Contents 2</p>
6 jQuery代码：
7         $(":header").css("background","#EEE");
8 结果：
9         [<h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2>]

 

　　　　:animated　　返回值：Array<Element(s)>

　　　　匹配所有正在执行动画效果的元素。示例：只有对不在执行动画效果的元素执行一个动画特效。　　　　

HTML代码：
        <button id="run">Run</button><div></div>
jQuery代码：
        $("#run").click(function(){
          $("div:not(:animated)").animate({left:"+=20"},1000);
        });

 

　　　　:contains　　返回值：Array<Element(s)>

　　　　匹配包含给定文本的元素。示例：查找所有包含"John"的div元素。　　　　

代码 1 HTML代码：
2          <div>John Resig</div>
3         <div>George Martin</div>
4         <div>Malcom John Sinclair</div>
5         <div>J. Ohn
6 jQuery代码：
7         $("div:contains('John')");
8 结果：
9         [<div>John Resig</div>, <div>Malcom John Sinclair</div>]

 

　　　　:empty　　返回值：Array<Element(s)>

　　　　匹配所有不包含子元素或者文本的空元素。示例：查找所有空元素。

代码 HTML代码：
        <table>
        <tr><td>Value 1</td><td></td></tr>
        <tr><td>Value 2</td><td></td></tr>
       </table>
jQuery代码：
        $("td:empty");
结果：
        [<td></td>, <td></td>]

 

　　　　:has　　返回值：Array<Element(s)>

　　　　匹配含有选择器所匹配的元素。示例：给所有包含p元素的div元素添加一个text类。　　　　

HTML代码：
        <div><p>Hello</p></div>
       <div>Hello again!</div>
jQuery代码：
        $("div:has(p)").addClass("test");
结果：
        [<div class="test"><p>Hello</p></div>]

 

　　　　:parent　　返回值：Array<Element(s)>

 　　　　匹配含有子元素或者文本的元素。示例：查找非空的td元素。　　　　

代码 HTML代码：
        <table>
          <tr><td>Value 1</td><td></td></tr>
          <tr><td>Value 2</td><td></td></tr>
        </table>
jQuery代码：
        $("td:parent");
结果：
        [<td>Value 1</td>, <td>Value 2</td>]

 

　　　　:hidden　　返回值：Array<Element(s)>

　　　　匹配所有不可见的元素，或者type为hidden的元素。示例：查找隐藏的tr。

代码 1 HTML代码：
2         <table>
3           <tr style="display:none"><td>Value 1</td></tr>
4           <tr><td>Value 2</td></tr>
5         </table>
6 jQuery代码：
7         $("tr:hidden");
8 结果：
9         [<tr style="display:none"><td>Value 1</td></tr>]

 

　　　　:visible　　返回值：Array<Element(s)>

　　　　匹配所有可见元素。示例：查找所有可见的tr元素。

　　　　

代码 1 HTML代码；
2         <table>
3           <tr style="display:none"><td>Value 1</td></tr>
4           <tr><td>Value 2</td></tr>
5         </table>
6 jQuery代码：
7         $("tr:visible");
8 结果：
9         [<tr><td>Value 2</td></tr>]