当前位置:

首页 > temp > JavaScript教程 >

js选择器的复杂选择器

冒号：$("input:checkbox")表示input节点下带有checkbox属性的节点，一般用于$("input:checkbox[name='aaaa']");表示input节点下所有name属性值为"aaaa"的checkbox

空格：p span{}选择了P元素下的所有span元素。这是后代选择器，空格是后代选择器的标识符。

逗号：p,span{}选择了P元素和span元素。这是多元素选择器，同时选择多个元素，元素之间用逗号分隔。

回到顶部

1、js选择器

getElementById()通过元素ID获取元素
getElementsByName()通过元素Name获取元素
getElementsByTagName()通过元素的标签名称获取元素
getElementsByClassName()通过元素的CSS类来获取元素

回到顶部

2、jquery选择器

（1）使用元素id、标签名、class选择元素。

$("*")	选取所有元素
$("#id1"）	id="id1"的元素	使用元素id
$(".c1"）	所有class="c1"的元素	使用class
$(".c1.c2"）	所有class="c1"且class="c2"的元素
$("th,td,.intro")	所有带有匹配选择的元素
$("p.intro")	选取 class 为 intro 的 <p> 元素

补充：

选择器	含义
5.	E,F	多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔
6.	E F	后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔
7.	E > F	子元素选择器，匹配所有E元素的子元素F
8.	E + F	毗邻元素选择器，匹配所有紧随E元素之后的同级元素F

（2）根据元素所处位置进行选择：

　　第一个、最后一个、奇数个、偶数个、等于index、大于index、小于index的元素

$("p.intro")	选取 class 为 intro 的 <p> 元素
$("p:first")	选取第一个 <p> 元素	`:first`
$("p:last")	选取最后一个 <p> 元素	`:last`
$("tr:even")	`所有奇数 <tr> 元素`	:even
$("tr:odd")	`所有偶数 <tr> 元素`	`:odd`
`$("ul li:eq(3)")`	`列表中的第四个元素（index 从 0 开始）`	`:eq(index)`
`$("ul li:gt(3)")`	`列出 index 大于 3 的元素`	`:gt(no)`
`$("ul li:lt(3)")`	`列出 index 大于 3 的元素`	`:lt(no)`
$("ul li:first-child")	选取每个 <ul> 元素的第一个 <li> 元素

（3）选择不满足某条件的元素

$("input:not(:empty)")

所有不为空的 input 元素

:not(selector)

（4）根据元素的属性进行选择

属性（名等于、值（等于、不等于、包含xxx结尾））的元素

$("[href]")	选取带有 href 属性的元素	`[attribute]`
`$("[href='#']")`	`所有 href 属性的值等于 "#" 的元素`	`[attribute=value]`
`$("[href!='#']")`	`所有 href 属性的值不等于 "#" 的元素`	`[attribute!=value]`
`$("[href$='.jpg']")`	`所有 href 属性的值包含以 ".jpg" 结尾的元素`	`[attribute$=value]`

（5）选择表单元素（输入、文本、密码、单选、提交、重置、图片、标题、文件等）

$(":button")	选取所有 type="button" 的 <input> 元素和 <button> 元素
$(":input")	所有 <input> 元素	:input
$(":text")	所有 type="text" 的 <input> 元素	:text
$(":password")	所有 type="password" 的 <input> 元素	:password
$(":radio")	所有 type="radio" 的 <input> 元素	:radio
$(":checkbox")	所有 type="checkbox" 的 <input> 元素	:checkbox
$(":submit")	所有 type="submit" 的 <input> 元素	:submit
$(":image")	所有 type="image" 的 <input> 元素	:image
$(":file")	所有 type="file" 的 <input> 元素	:file
$(":reset")	所有 type="reset" 的 <input> 元素	:reset
$(":enable")	所有激活的 input 元素	:enabled
$(":disabled")	所有被禁用的 input 元素	:disabled
$(":selected")	所有被选取的 input 元素	:selected
$(":checked")	所有被选取的 input 元素	:checked

（6）特殊要求的选择

$(":header")	所有标题元素 <h1> - <h6>	:header
$(":"animated)	所有动画元素	:animated
$(":contains('xxx')")	包含指定字符串的所有元素	:contains(text)
$(":empty")	无子（元素）节点的所有元素	:empty
$("p:hidden")	所有隐藏的 <p> 元素	:hidden
$("table:visible")	所有可见的表格	:visible
`p:after` { content:"台词："; }	在每个p元素后面添加内容“台词”

回到顶部

checkbox选择器补充说明：

 1 function getCheckedByType(){
 2         var spCodesTemp = "";
 3         $("input[type='checkbox']:checked").each(function(i) {
 4             if (0 == i) {
 5                 spCodesTemp = $(this).val();
 6             } else {
 7                 spCodesTemp += ("," + $(this).val());
 8             }
 9         });
10         console.log("根据类型打印："+spCodesTemp)
11     }
12     function getCheckedByParentId(){
13         var spCodesTemp = "";
14         $("table#tbTemplate input[type='checkbox']:checked").each(function(i) {
15             if (0 == i) {
16                 spCodesTemp = $(this).val();
17             } else {
18                 spCodesTemp += ("," + $(this).val());
19             }
20         });
21         console.log("父类id限制 根据类型打印："+spCodesTemp)
22     }
23     function getCheckedByName(){
24         var spCodesTemp = "";
25         $("input:checkbox[name='fruit']:checked") .each(function(i) {
26             if (0 == i) {
27                 spCodesTemp = $(this).val();
28             } else {
29                 spCodesTemp += ("," + $(this).val());
30             }
31         });
32         console.log("根据名称 打印："+spCodesTemp)
33     }
34     function getCheckedByClassName(){
35         var spCodesTemp = "";
36         $('input:checkbox[name="spCodeId"]:checked').each(function(i) {
37             if (0 == i) {
38                 spCodesTemp = $(this).val();
39             } else {
40                 spCodesTemp += ("," + $(this).val());
41             }
42         });
43         console.log("根据名称打印："+spCodesTemp)
44     }
45     function getCheckedByNameParentId(){
46         var spCodesTemp = "";
47         $("table#tbTemplate input:checkbox[name='fruit']:checked") .each(function(i) {
48             if (0 == i) {
49                 spCodesTemp = $(this).val();
50             } else {
51                 spCodesTemp += ("," + $(this).val());
52             }
53         });
54         console.log("父类id限制 根据名称 打印："+spCodesTemp)
55     }

补充页面栗子：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <script src="/assets/js/jquery.min.js"></script>
 7 </head>
 8 <body>
 9 <form action="#" onsubmit="return myFunction()" method="post">
10     <table id="tbTemplate" tilte="爱吃的水果">
11         <tr>
12             <td><input type="checkbox" class="spCodeId" name="fruit" value="apple">苹果</td>
13             <td><input type="checkbox" class="spCodeId" name="fruit" value="bnana">香蕉</td>
14             <td><input type="checkbox" class="spCodeId" name="fruit" value="pear">梨</td>
15             <td><input type="checkbox" class="spCodeId" name="fruit" value="watermelon">西瓜</td>
16         </tr>
17         <tr>
18             <td><input type="checkbox" class="spCodeId" name="fruit" value="grape">葡萄</td>
19             <td><input type="checkbox" class="spCodeId" name="fruit" name="fruit" value="strawberry">草莓</td>
20             <td><input type="checkbox" class="spCodeId" name="fruit" value="pomelo">柚子</td>
21             <td><input type="checkbox" class="spCodeId" name="fruit" value="litchi">荔枝</td>
22         </tr>
23     </table>
24     <input type="submit" value="提交">
25 </form>
26 
27 </body>
28 <script>
29     function myFunction(){
30         
31         getCheckedByType();
32         getCheckedByParentId();
33         getCheckedByName();
34         getCheckedByName();
35         getCheckedByNameParentId();
36         return false;
37     }
38 
39     function getCheckedByType(){
40         var spCodesTemp = "";
41         $("input[type='checkbox']:checked").each(function(i) {
42             if (0 == i) {
43                 spCodesTemp = $(this).val();
44             } else {
45                 spCodesTemp += ("," + $(this).val());
46             }
47         });
48         console.log("根据类型打印："+spCodesTemp)
49     }
50     function getCheckedByParentId(){
51         var spCodesTemp = "";
52         $("table#tbTemplate input[type='checkbox']:checked").each(function(i) {
53             if (0 == i) {
54                 spCodesTemp = $(this).val();
55             } else {
56                 spCodesTemp += ("," + $(this).val());
57             }
58         });
59         console.log("父类id限制 打印："+spCodesTemp)
60     }
61     function getCheckedByName(){
62         var spCodesTemp = "";
63         $("input:checkbox[name='fruit']:checked") .each(function(i) {
64             if (0 == i) {
65                 spCodesTemp = $(this).val();
66             } else {
67                 spCodesTemp += ("," + $(this).val());
68             }
69         });
70         console.log("根据名称 打印："+spCodesTemp)
71     }
72     function getCheckedByClassName(){
73         var spCodesTemp = "";
74         $('input:checkbox[name="spCodeId"]:checked').each(function(i) {
75             if (0 == i) {
76                 spCodesTemp = $(this).val();
77             } else {
78                 spCodesTemp += ("," + $(this).val());
79             }
80         });
81         console.log("根据名称打印："+spCodesTemp)
82     }
83     function getCheckedByNameParentId(){
84         var spCodesTemp = "";
85         $("table#tbTemplate input:checkbox[name='fruit']:checked") .each(function(i) {
86             if (0 == i) {
87                 spCodesTemp = $(this).val();
88             } else {
89                 spCodesTemp += ("," + $(this).val());
90             }
91         });
92         console.log("父类id限制 根据名称 打印："+spCodesTemp)
93     }
94 </script>
95 </html>