js选择器的复杂选择器
原创
©著作权归作者所有：来自51CTO博客作者啄木鸟伍迪_的原创作品，请联系作者获取转载授权，否则将追究法律责任
冒号：$("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）根据元素的属性进行选择([])
$("[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元素后面添加内容“台词”
|
|
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>
我从来不相信什么懒洋洋的自由。我向往的自由是通过勤奋和努力实现的更广阔的人生。
我要做一个自由又自律的人，靠势必实现的决心认真地活着。
