Comprehensive explanation of Jquery selector

1 Overview

We have used the jQuery selection function with a simple CSS selector: $(). Now it's time to dive into jQuery selector syntax and some methods for extracting and expanding the set of selected elements.

1. jQuery selector

In the selector syntax defined by the CSS3 selector standard draft, jQuery supports a fairly complete set of subsets, and also adds some non-standard but useful ones. pseudo-class. Note: This section is about jQuery selectors. Many of these selectors (but not all) can be used in CSS style sheets. Selector syntax has a three-level structure. You've no doubt seen selectors in their simplest form. "#te st" selects the element with the id attribute "test". "blockquote" selects all

elements in the document, while "div.note" selects all

elements with the class attribute "note". Simple selectors can be combined into "combined selectors", such as "div.note>p" and "blockquote i", as long as the combining characters are used as separators. Simple and combined selectors can also be grouped into comma-separated lists. This type of selector group is the most common form of selection passed to the $() function. Before explaining combined selectors and selector groups, we must first understand the syntax of simple selectors.

##2 Basic Selector

##2.1 List

##2.2 Sample code

(1)id selector

Set the background color of the element with id lastname to blue

##

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9         $(document).ready(function () {10             $("#lastname").css("background-color", "#0000ff");11            12         });13 14     </script>15 16 17     <div>id为lastname的选择器</div>18 19 

View Code

(2) Class selector

Set the background color of the intro element with class to blue

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9         $(document).ready(function () {10             $(".intro").css("background-color", "#0000ff");11            12         });13 14     </script>15 16 17     <div>div选择器测试</div>18     <p>p测试选择器</p>19 20 

View Code

(3)Element Selector

Set the background color of the p element to blue

##

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9         $(document).ready(function () {10             $("p").css("background-color", "#0000ff");11            12         });13 14     </script>15 16 17      <p>p测试选择器</p>18 19 

View Code

(4) All selectors

Traverse all elements under the body and set their background color to blue

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9         $(document).ready(function () {10             $("body *").css("background-color", "#0000ff");11            12         });13 14     </script>15 16 17     <div>选择器测试</div>18     <p>p元素</p>19 20 

View Code

(5)并列选择器

 将元素p和元素div背景色设置为蓝色

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9         $(document).ready(function () {10             $("p,div").css("background-color", "#0000ff");11            12         });13 14     </script>15 16 17     <div>选择器测试</div>18     <p>p元素</p>19 20 

View Code

3   层次选择器

3.1 一览表

3.2 示例代码

(1)parent>child(直系子元素，即直接下一代元素)

设置div元素的第一代元素为span的元素的背景色为蓝色

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9         $(document).ready(function () {10             $("div>span").css("background-color", "#0000ff");11            12         });13 14     </script>15 16 17     <div>18         <span>DOM树，DIV第一代</span>19         <p>20             <span>DOM树，第二代</span>21         </p>22         <span>DOM树，DIV第一代</span>23     </div>24 25 

View Code

测试结果：

结果分析：根据如上代码画出的DOM树如下，可以很清晰看出，DIV有三个直接孩子，即第一代span,p,span，代码中div>span，表示div下的直接第一代span，因此，测试结果就不难理解了。

(2)prev+next(prev元素的下一个兄弟元素，等同于next()方法)

设置类为intro元素的下一个兄弟元素背景色为蓝色

 1  nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9         $(document).ready(function () {10             $(".intro+div").css("background-color", "#0000ff");11             //$(".intro").next("div").css("background-color", "#0000ff");12            13         });14 15     </script>16 17 18     <div>1</div>19     <p>2</p>20     <div>3</div>21     <div>4</div>22     <span>5</span>23     <div>6</div>24 25 

View Code

测试结果：

结果分析：根据如上代码画出DOM树如下图，测试结果显而易见。

(3)prev~siblings(prev元素的所有兄弟元素，等同于nextAll()方法)

 设置类为intro元素之后的所有兄弟元素为div元素的背景色为蓝色

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9         $(document).ready(function () {10             $(".intro~div").css("background-color", "#0000ff");11         });12 13     </script>14 15 16     <div>G0</div>17     <div>G1</div>18     <div>G2</div>19     <span>G3</span>20     <div>G4</div>21 22 

View Code

测试结果：

分析测试结果：根据如上代码画出DOM树如下图，测试结果显而易见。

4   过滤选择器

4.1 基本过滤选择器

4.1.1  一览表

4.1.2  代码示例

(1):first(选取第一个元素)

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9         $(document).ready(function () {10             $("span:first").css("background-color", "#0000ff");11         });12 13     </script>14 15 16     <span>G1</span>17     <span>G2</span>18     <span>G3</span>19 20 

View Code

测试结果：

(2):last(选取最后一个元素)

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9         $(document).ready(function () {10             $("span:last").css("background-color", "#0000ff");11         });12 13     </script>14 15 16     <span>G1</span>17     <span>G2</span>18     <span>G3</span>19 20 

View Code

测试结果：

(3)：not(取非元素)

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9         $(document).ready(function () {10             $("div:not(.wrap)").css("background-color", "#0000ff");11         });12 13     </script>14 15 16     <div>G1</div>17     <div>G2</div>18 19 

View Code

但是，请注意下面的代码：当G1所在div和G2所在div是父子关系时，G1和G2都会变色。

1 <div>2     G1    <div>G2</div>3 </div>

View Code

(4):even(索引为偶数，索引 index从0开始)

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9         $(document).ready(function () {10             $("div:even").css("background-color", "#0000ff");11         });12 13     </script>14 15 16     <div>G1</div>17     <div>G2</div>18     <div>G3</div>19     <div>G4</div>20 21 

View Code

测试结果：

(5):odd(索引为奇数，索引 index从0开始)

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9         $(document).ready(function () {10             $("div:odd").css("background-color", "#0000ff");11         });12 13     </script>14 15 16     <div>G1</div>17     <div>G2</div>18     <div>G3</div>19     <div>G4</div>20 21 

View Code

测试结果：

(6):eq(x)(取指定索引的元素，x为从0开始的索引)

设置索引为2的div元素背景为蓝色

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9         $(document).ready(function () {10             $("div:eq(2)").css("background-color", "#0000ff");11         });12 13     </script>14 15 16     <div>G1</div>17     <div>G2</div>18     <div>G3</div>19     <div>G4</div>20 21 

View Code

测试结果：

(7):lt(x))(取小于指定索引的元素，x为从0开始的索引)

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9         $(document).ready(function () {10             $("div:lt(2)").css("background-color", "#0000ff");11         });12 13     </script>14 15 16     <div>G1</div>17     <div>G2</div>18     <div>G3</div>19     <div>G4</div>20 21 

View Code

测试结果：

(8):gt(x))(取大于指定索引的元素，x为从0开始的索引)

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9         $(document).ready(function () {10             $("div:gt(2)").css("background-color", "#0000ff");11         });12 13     </script>14 15 16     <div>G1</div>17     <div>G2</div>18     <div>G3</div>19     <div>G4</div>20 21 

View Code

测试结果：

(8):header(取h1-h6标题元素)

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9         $(document).ready(function () {10             $(":header").css("background-color", "#0000ff");11         });12 13     </script>14 15 16     <h1 id="测试H-标题">测试H1标题</h1>17     <div>G1</div>18     <div>G2</div>19     <div>G3</div>20     <h2 id="测试h-标题">测试h2标题</h2>21     <h3 id="测试h-标题">测试h3标题</h3>22     <h4 id="测试h-标题">测试h4标题</h4>23     <div>G4</div>24     <h5 id="测试h-标题">测试h5标题</h5>25     <h6 id="测试h-标题">测试h6标题</h6>26 27 

View Code

测试结果：

(9):animated(所有动画元素)

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9          $(document).ready(function () {10             function aniDiv() {11                 $("#box").animate({ width: 300 }, "slow");12                 $("#box").animate({ width: 100 }, "slow", aniDiv);13             }14             aniDiv();15             $(".btn1").click(function () {16                 $(":animated").css("background-color", "#0000ff");17             });18         });19 20     </script>21     <style>22         div {23                 background: #98bf21;24                 height: 40px;25                 width: 100px;26                 position: relative;27                 margin-bottom: 5px;28              }29     </style>30 31 32     <div></div>33     <div></div>34     <div></div>35     <button>Mark animated element</button>36 37 

View Code

测试结果：

 

4.2 内容过滤选择器

4.2.1 一览表

4.2.2 示例代码

(1):contains(text)(取包含text文本的元素)

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9          $(document).ready(function () {10              $(&#39;div:contains("G2")&#39;).css("background-color", "#0000ff");11          });12 13     </script>14     15 16 17     <div>G1</div>18     <div>G2</div>19     <div>G3</div>20 21 

View Code

测试结果：

(2):empty（取不包含子元素或文本为空的元素）

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9          $(document).ready(function () {10              $(&#39;div:empty&#39;).html(&#39;没有内容&#39;);11          });12 13     </script>14     15 16 17     <div>G1</div>18     <div>G2</div>19     <div>G3</div>20     <div></div>21 22 

View Code

测试结果：

(3) :has(selector)（取选择器匹配的元素）

即使span不是div的直系子元素，也会生效

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9         $(document).ready(function () {10             // 为包含span元素的div添加边框11             $(&#39;div:has(span)&#39;).css(&#39;border&#39;, &#39;1px solid #000&#39;);12         });13 14     </script>15     16 17 18     <div>19         <h2 id="A-span-B-span">20             A     <span>B</span>21         </h2>22     </div>23 24 

View Code

测试结果：

(4):parent（取包含子元素或文本的元素）

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9         $(document).ready(function () {10             $(&#39;ol li:parent&#39;).css(&#39;border&#39;, &#39;1px solid #000&#39;);11         });12 13     </script>14     15 16 17     <ol>18         <li>19         <li>A</li>20         <li>21         <li>D</li>22     </ol>23 24 

View Code

测试结果：

4.3 可见性过滤选择器

4.3.1 一览表

4.3.2 示例代码

(1):hidden（取不可见的元素）

匹配display:none，，visibility:hidden，capacity:0元素

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9         $(document).ready(function () {10             $(&#39;div:hidden&#39;).show(500);11             alert($(&#39;input:hidden&#39;).val());12         });13     </script>14     <style>15             div         
16             {17                 margin: 10px;18                 width: 200px;19                 height: 40px;20                 border: 1px solid #FF0000;21                 display:block;22              }23 24             .hid-1         
25             {26                 display: none;27              }28 29             .hid-2         
30             {31                 visibility: hidden;32             }33         34     </style>35 36 37     <div>display: none</div>38     <div>visibility: hidden</div>39     <input>40 41 

View Code

测试结果：

(2):visible（取可见的元素）

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9          $(document).ready(function () {10              $(&#39;div:visible&#39;).css("background-color", "#0000ff");11          });12 13     </script>14     15 16 17     <div>G1</div>18     <div>G2</div>19     <div>G3</div>20     <div>G4</div>21 22 23 24 25 26

View Code

测试结果：

4.4 属性过滤选择器

4.4.1 一览表

4.4.2 代码示例

(1)[attribute]（取拥有attribute属性的元素）

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9          $(document).ready(function () {10              $(&#39;div[class]&#39;).css("background-color", "#0000ff");11          });12 13     </script>14     15 16 17     <div>G1</div>18     <div>G2</div>19     <div>G3</div>20     <div>G4</div>21 22 23 24 25 26

View Code

测试结果：

(2)[attribute = value]（取attribute属性值等于value）

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9          $(document).ready(function () {10              $(&#39;div[class=div3]&#39;).css("background-color", "#0000ff");11          });12 13     </script>14     15 16 17     <div>G1</div>18     <div>G2</div>19     <div>G3</div>20     <div>G4</div>21 22 23 24 25 26

View Code

测试结果：

(3) [attribute != value](取attribute属性值不等于value的元素)

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9          $(document).ready(function () {10              $(&#39;div[class!=div3]&#39;).css("background-color", "#0000ff");11          });12 13     </script>14     15 16 17     <div>G1</div>18     <div>G2</div>19     <div>G3</div>20     <div>G4</div>21 22 23 24 25 26

View Code

测试结果：

(4)[attribute $= value](attribute属性值以value结束)

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9          $(document).ready(function () {10              $(&#39;[id$=div]&#39;).css("background-color", "#0000ff");11          });12 13     </script>14     15 16 17     <div>G1</div>18     <div>G2</div>19     <div>G3</div>20     <div>G4</div>21 22 23 

View Code

测试结果：

(5))[attribute^= value](attribute属性值以value开始)

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9          $(document).ready(function () {10              $(&#39;[id^=first]&#39;).css("background-color", "#0000ff");11          });12 13     </script>14     15 16 17     <div>G1</div>18     <div>G2</div>19     <div>G3</div>20     <div>G4</div>21 22 23 24 25 26

View Code

测试结果：

(6)[attribute *= value]（attribute属性值包含value值）

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9          $(document).ready(function () {10              $(&#39;[id*=first]&#39;).css("background-color", "#0000ff");11          });12 13     </script>14     15 16 17     <div>G1</div>18     <div>G2</div>19     <div>G3</div>20     <div>G4</div>21 22 23 

View Code

测试结果：

注释：在属性选择器中，^$符号和正则表达式的开始结束符号表示的含义是一致的，*模糊匹配，类似于sql中的like '%str%'。

(7)[selector1][selector2]（复合型属性过滤器，同时满足多个条件）

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9          $(document).ready(function () {10              $(&#39;div[class=div3][title=3div]&#39;).css("background-color", "#0000ff");11          });12 13     </script>14     15 16 17     <div>G1</div>18     <div>G2</div>19     <div>G3</div>20     <div>G4</div>21 22 23 24 25 26

View Code

测试结果：

4.5 子元素过滤选择器

4.5.1 一览表

4.5.2 代码示例

(1)first-child(表示匹配的第一个元素)和last-child(表示匹配的最后一个子元素)

 需要大家注意的是，:fisrst和:last返回的都是单个元素，而:first-child和:last-child返回的都是集合元素。举个 例子：div:first返回的是整个DOM文档中第一个div元素，而div:first-child是返回所有div元素下的第一个元素合并后的集 合。

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9         $(document).ready(function () {10             $("div:first-child").css("background-color", "#B2E0FF");11             $("div:last-child").css("background-color", "red");12         });13     </script>14 15 16      <div>17          <div>1</div>18          <div>2</div>19          <p>3</p>20      </div>21     <div>4</div>22     <div>last</div>23 24 

View Code

测试结果：

(3)only-child(当某个元素有且仅有一个子元素时，:only-child才会生效)

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9         $(document).ready(function () {10             $("div:only-child").css("background-color", "red");11          });12     </script>13 14 15      <div>16          <div>1</div>17          <div>2</div>18          <p>3</p>19      </div>20     <div>4</div>21     <div>last22     <div>ddd</div>23     </div>24 25 

View Code

测试结果：

(4)nth-child

看到这个就想起英文单词里的，fourth, fifth, sixth……，nth表示第n个，:nth-child就表示第n个child元素。要注意的是，这儿的n不像eq(x)、gt(x)或lt(x)是从 0开始的，它是从1开始的，英文里好像也没有zeroth这样的序号词吧。

:nth-child有三种用法：

1) :nth-child(x)，获取第x个子元素
2) :nth-child(even)和:nth-child(odd)，从1开始，获取第偶数个元素或第奇数个元素
3) :nth-child(xn+y)，x>=0，y>=0。例如x = 3, y = 0时就是3n，表示取第3n个元素（n>=0）。实际上xn+y是上面两种的通项式。（当x=0,y>=0时，等同于:hth- child(x)；当x=2,y=0时，等同于nth-child(even)；当x=2,y=1时，等同于:nth-child(odd)）

4.6 表单对象属性过滤选择器

4.6.1 一览表

4.6.2 代码示例

(1):enabled和:disabled（取可用或不可用元素）

:enabled和:diabled的匹配范围包括input, select, textarea

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9         $(document).ready(function () {10             $(&#39;:enabled&#39;).css(&#39;border&#39;, &#39;1px solid #FF0000&#39;);11             $(&#39;:disabled&#39;).css(&#39;border&#39;, &#39;1px solid #0000FF&#39;);12         });13 14     </script>15     16 17 18     <div>19         <input>20     </div>21     <div>22         <input>23     </div>24     <div>25         <textarea>不可用的文本域</textarea>26     </div>27     <div>28         <select>29             <option>English</option>30             <option>简体中文</option>31         </select>32     </div>33 34 

View Code

测试结果：

(2):checked（取选中的单选框或复选框元素）

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9         $(document).ready(function () {10             $(".btn1").click(function () {11                 $(":checked").hide();12             });13         });14     </script>15     16 17 18     <input> Male19     <br>20     <input> Female21     <br>22     I have a bike:23     <input>24     <br>25     I have a car:26     <input>27     <br>28     I have an airplane:29     <input>30     <button>Hide Checked Options</button>31 32 33 

View Code

(3):selected（取下拉列表被选中的元素）

 1  2  3 <script></script> 4 <script> 5 $(document).ready(function(){ 6   $(".btn1").click(function(){ 7     $(":selected").hide(); 8   }); 9 });10 </script>11 12 13 14 <select>15   <option>Volvo</option>16   <option>Saab</option>17   <option>Mercedes</option>18   <option>Audi</option>19 </select>20 <br>21 <button>Hide Selected</button>22 23 

View Code

5   表单选择器

5.1 一览表

5.2 测试代码

(1):input()(选择所有input元素)

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9         $(document).ready(function () {10             $(":input").css("background-color", "#B2E0FF");11         });12     </script>13 14 15     

16         Name: 17         
18         Password: 19         
20         Useless Button21         22         
23         24         25         
26     

27 28 

View Code

测试结果：

(2):text(选取所有text元素)

 1 nbsp;html> 2  3  4  5     <meta> 6     <script></script> 7     <title>JQuery函数</title> 8     <script> 9         $(document).ready(function () {10             $(":text").css("background-color", "#B2E0FF");11         });12     </script>13 14 15     

16         Name: 17         
18         Password: 19         
20         Useless Button21         22         
23         24         25         
26     

27 28 

View Code

测试结果：

(3):select和:button

(4)其他表单元素比较简单，在此不列举。

The above is the detailed content of Comprehensive explanation of Jquery selector. For more information, please follow other related articles on the PHP Chinese website!