js選擇器的復雜選擇器

本文轉載自查看原文 2020-11-07 15:16 413 css

冒號：$("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>

參考地址：

https://blog.csdn.net/yl2isoft/article/details/54427299

https://www.cnblogs.com/xiaobingch/p/12464684.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js選擇器 JS選擇器 Js選擇器總結 JS日期選擇器 js 屬性選擇器 js 顏色選擇器 JS中的選擇器純JS的日歷選擇器 js、jQuery選擇器 CSS3復雜選擇器