VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 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>
复制代码

 

 参考地址:

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

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

我从来不相信什么懒洋洋的自由。我向往的自由是通过勤奋和努力实现的更广阔的人生。 我要做一个自由又自律的人,靠势必实现的决心认真地活着。
 
来源:https://www.cnblogs.com/lixiuming521125/p/13941080.html

相关教程