jQuery之选择器

Posted 2020-10-08

　　选择器允许你对元素组合单个元素进行操作；CSS3中的选择器在jQuery中也适用，如id选择器、class选择器、标签选择器、属性选择器、后代选择器等等。

　　将选择器作为参数传给$()或者jQuery()，返回包含零个或一个DOM元素集合的jQuery对象。

基本选择器（*、id、class、element、selector1,selector2,selectorN）

 1 //  选择所有元素
 2 $("*")
 3 
 4 //  选择id为app的元素
 5 $("#app")
 6 
 7 // 选择class为app的元素
 8 $(".app")
 9 
10 // 选择所有div元素
11 $("div")
12 
13 // 选择所有div、p、li元素
14 $("div,p,li")

 层级选择器（后代选择器、兄弟元素选择器）

 1 //   后代选择器，包括子子孙孙
 2 $("form input")    //  选择form中的所有input元素
 3 $("#main div")    //  选择id为main的元素中的所有div
 4 
 5 //   子元素选择器，只选择儿子辈的元素
 6 $("form > input")   //  选择form中所有儿子为input的元素
 7 
 8 //   兄弟元素选择器，必须具有相同的父元素
 9 $("div ~ p")    //  选择div元素后面的且具有相同父元素的所有p元素
10 $("div + p")    //  选择紧跟在div元素后的p元素，即相邻的p元素，如：<div></div><p></p>（假设其具有相同父元素）

伪类选择器

 1  //  基本过滤选择器
 2  $("tr:first")               //  选择所有tr元素中的第一个 
 3  $("tr:last")                //  选择所有tr元素中的最后一个 
 4  $("input:not(:checked)")    //  不包含checked的选择器的所有的input元素 
 5  $("tr:even")                //  选择所有的tr元素中索引为偶数的tr元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始） 
 6  $("tr:odd")                 //  选择所有的tr元素中索引为奇数的tr元素
 7  $("td:eq(2)")               //  选择所有td元素中索引为2的td元素 
 8  $("td:gt(4)")               //  选择td元素中索引大于4的所有td元素 
 9  $("td:lt(4)")               //  选择td元素中索引小于4的所有的td元素 
10  $(":header") 
11  $("div:animated") 
12  
13  //  内容过滤选择器
14  $("div:contains(‘John‘)")    //  选择所有div中含有John文本的元素 
15  $("td:empty")                //  选择所有的空（也不包括文本节点）的td元素
16  $("div:has(p)")              //  选择所有含有p标签的div元素 
17 $("td:parent")                //  选择所有含有子元素或者文本的td元素
18 
19 //  可视化过滤选择器
20  $("div:hidden")            //  选择所有的被hidden的div元素 
21  $("div:visible")           //  选择所有的可视化的div元素 
22   
23 //  子元素过滤选择器
24  $("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)") 
25  $("div span:first-child")          //  选择div中的第一个孩子且标签名为span元素
26  $("div span:last-child")           //  选择div中的最后一个孩子且标签名为span元素
27  $("div button:only-child")         //  选择div中button是唯一子元素的button元素
28  $("div span:nth-of-type(2)")       //  选择所有div中的第二个span元素 
29  
30 //表单元素选择器： 
31  $(":input")                //  选择所有的表单输入元素，包括input, textarea, select 和 button 
32  $(":text")                 //  选择所有的text input元素 
33  $(":password")             //  选择所有的password input元素 
34  $(":radio")                //  选择所有的radio input元素 
35  $(":checkbox")             //  选择所有的checkbox input元素 
36  $(":submit")               //  选择所有的submit input元素 
37  $(":image")                //  选择所有的image input元素 
38  $(":reset")                //  选择所有的reset input元素 
39  $(":button")               //  选择所有的button input元素 
40  $(":file")                 //  选择所有的file input元素 
41  $(":hidden")               //  选择所有类型为hidden的input元素或表单的隐藏域 
42 
43 //表单元素过滤选择器
44  $(":enabled")                  //   选择所有的可操作的表单元素 
45  $(":disabled")                 //   选择所有的不可操作的表单元素 
46  $(":checked")                  //   选择所有的被checked的表单元素 
47  $("select option:selected")    //   选择所有的select的子元素中被selected的元素 

属性选择器

 1 //   选择带有某个属性的元素
 2 $("[name]")    //  选择所有带有name属性的元素
 3 $("div[id]")      //  选择所有带有id属性的div元素
 4 
 5 //    选择指定属性值的元素
 6 $("[type=‘text‘]")    //  选择所有type属性为text的元素
 7 $("a[href=‘button.html‘]")    //  选择所有href属性为button.html的a元素
 8 $("[type!=‘button‘]")    //  选择所有type属性不为button的元素
 9 $("[type$=‘button‘]")    //  选择所有type属性以button结尾的元素
10 $("[type^=‘button‘]")    //  选择所有type属性以button开始的元素
11 $("[type|=‘button‘]")
12 $("[type*=‘button‘]")
13 $("[type~=‘button‘]")