2023.3.2 jQuery 选择器与元素筛选

jQuery 选择器（重点）

基本选择器（重点）

查看jQueryAPI_1.7.1_CN.chm文档

  • #ID 选择器：根据 id 查找标签对象

  • .class 选择器：根据 class 查找标签对象

  • element 选择器：根据标签名查找标签对象

  • 选择器：表示任意的，所有的标签对象

  • selector1，selector2 组合选择器：合并选择器 1，选择器 2 的结果并返回 ，结果顺序为标签在html中从上到下的顺序

    • p.myClass 表示标签名必须是 p 标签，而且 class 类型还要是 myClass 

​
  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2 <html>
  3     <head>
  4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5         <title>Untitled Document</title>
  6         <style type="text/css">
  7             div, span, p {
  8                 width: 140px;
  9                 height: 140px;
 10                 margin: 5px;
 11                 background: #aaa;
 12                 border: #000 1px solid;
 13                 float: left;
 14                 font-size: 17px;
 15                 font-family: Verdana;
 16             }
 17             
 18             div.mini {
 19                 width: 55px;
 20                 height: 55px;
 21                 background-color: #aaa;
 22                 font-size: 12px;
 23             }
 24             
 25             div.hide {
 26                 display: none;
 27             }
 28         </style>
 29         <!--引入jquery文件-->
 30         <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
 31         <script type="text/javascript">
 32 ​
 33             $(function () {
 34                 //1.选择 id 为 one 的元素 设置为"background-color","#bbffaa"
 35                 $("#btn1").click(function () {
 36                     //css方法可以获取和设置样式
 37                     $("#one").css("background-color","#bbffaa")
 38 ​
 39                 });
 40 ​
 41                 //2.选择 class 为 mini 的所有元素
 42                 $("#btn2").click(function () {
 43                     $(".mini").css("background-color","red")
 44 ​
 45                 });
 46 ​
 47                 //3.选择 元素名是 div 的所有元素
 48                 $("#btn3").click(function () {
 49                     $("div").css("background-color","green")
 50 ​
 51                 });
 52 ​
 53                 //4.选择所有的元素
 54                 $("#btn4").click(function () {
 55                     $("*").css("background-color","yellow")
 56 ​
 57                 });
 58 ​
 59                 //5.选择所有的 span 元素和id为two的元素
 60                 $("#btn5").click(function () {
 61                     $("span,#two").css("background-color","blue")
 62 ​
 63                 });
 64             });
 65 ​
 66         </script>
 67     </head>
 68     <body>
 69 ​
 70         <input type="button" value="选择 id 为 one 的元素" id="btn1" />
 71         <input type="button" value="选择 class 为 mini 的所有元素" id="btn2" />
 72         <input type="button" value="选择 元素名是 div 的所有元素" id="btn3" />
 73         <input type="button" value="选择 所有的元素" id="btn4" />
 74         <input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" />
 75         
 76         <br>
 77         <div class="one" id="one">
 78             id 为 one,class 为 one 的div
 79             <div class="mini">class为mini</div>
 80         </div>
 81         <div class="one" id="two" title="test">
 82     id为two,class为one,title为test的div
 83 <div class="mini" title="other">class为mini,title为other</div>
 84 <div class="mini" title="test">class为mini,title为test</div>
 85 </div>
 86 <div class="one">
 87 <div class="mini">class为mini</div>
 88 <div class="mini">class为mini</div>
 89 <div class="mini">class为mini</div>
 90 <div class="mini"></div>
 91 </div>
 92 <div class="one">
 93 <div class="mini">class为mini</div>
 94 <div class="mini">class为mini</div>
 95 <div class="mini">class为mini</div>
 96 <div class="mini" title="tesst">class为mini,title为tesst</div>
 97 </div>
 98 ​
 99 <div style="display:none;" class="none">style的display为"none"的div   display:none就是不显示</div>
100 <div class="hide">class为"hide"的div</div>
101 ​
102 <div>
103     包含input的type为"hidden"的div<input type="hidden" size="8">
104 </div>
105 <span class="one" id="span">^^span元素^^</span>
106 </body>
107 </html>

层级选择器（重点）

  • ancestor descendant 后代选择器 ：在给定的祖先元素下匹配所有的后代元素

    • 找到表单中所有的 input 元素：$("form input")

  • parent > child 子元素选择器：在给定的父元素下匹配所有的子元素

    • 匹配表单中所有的子级input元素：$("form > input")

  • prev + next 相邻元素选择器：匹配所有紧接在 prev 元素后的同级 next 元素

    • 匹配跟在 label 后面的一个同级 input 元素：$("label + input")

  • prev ~ sibings 之后的兄弟元素选择器：匹配 prev 元素之后的所有同级 siblings 元素

    • 找到所有与表单同级的 input 元素：$("form ~ input")

+与~前后查找的是同级关系

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5         <title>Untitled Document</title>
 6         <style type="text/css">
 7             div, span, p {
 8                 width: 140px;
 9                 height: 140px;
10                 margin: 5px;
11                 background: #aaa;
12                 border: #000 1px solid;
13                 float: left;
14                 font-size: 17px;
15                 font-family: Verdana;
16             }
17             
18             div.mini {
19                 width: 55px;
20                 height: 55px;
21                 background-color: #aaa;
22                 font-size: 12px;
23             }
24             
25             div.hide {
26                 display: none;
27             }           
28         </style>
29         <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
30         <script type="text/javascript">
31             $(document).ready(function(){   //这个是 $(function () {}); 的全写
32                 //1.选择 body 内的所有 div 元素 
33                 $("#btn1").click(function(){
34                     $("body div").css("background", "#bbffaa");
35                 });
36 ​
37                 //2.在 body 内, 选择div子元素  
38                 $("#btn2").click(function(){
39                     $("body > div").css("background", "#bbffaa");
40                 });
41 ​
42                 //3.选择 id 为 one 的下一个同级 div 元素 
43                 $("#btn3").click(function(){
44                     $("#one+div").css("background", "#bbffaa");
45                 });
46 ​
47                 //4.选择 id 为 two 的元素后面的所有同级 div 兄弟元素
48                 $("#btn4").click(function(){
49                     $("#two~div").css("background", "#bbffaa");
50                 });
51             });
52         </script>
53     </head>
54     <body>  
55     
56 <!--    <div>
57         <h1>层级选择器:根据元素的层级关系选择元素</h1>
58         ancestor descendant  ：
59         parent > child         ：
60         prev + next            ：
61         prev ~ siblings        ：
62     </div>   -->
63         <input type="button" value="选择 body 内的所有 div 元素" id="btn1" />
64         <input type="button" value="在 body 内, 选择div子元素" id="btn2" />
65         <input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />
66         <input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />
67         <br><br>
68         <div class="one" id="one">
69             id 为 one,class 为 one 的div
70             <div class="mini">class为mini</div>
71         </div>
72         <div class="one" id="two" title="test">
73             id为two,class为one,title为test的div
74             <div class="mini" title="other">class为mini,title为other</div>
75             <div class="mini" title="test">class为mini,title为test</div>
76 </div>
77 <div class="one">
78 <div class="mini">class为mini</div>
79 <div class="mini">class为mini</div>
80 <div class="mini">class为mini</div>
81 <div class="mini"></div>
82 </div>
83 <div class="one">
84 <div class="mini">class为mini</div>
85 <div class="mini">class为mini</div>
86 <div class="mini">class为mini</div>
87 <div class="mini" title="tesst">class为mini,title为tesst</div>
88 </div>
89 <div style="display:none;" class="none">style的display为"none"的div</div>
90 <div class="hide">class为"hide"的div</div>
91 <div>
92     包含input的type为"hidden"的div<input type="hidden" size="8">
93 </div>
94 <span id="span">^^span元素^^</span>
95 </body>
96 </html>

过滤选择器

 

基本过滤器

  • :first 获取第一个元素

  • 获取li标签匹配的第一个元素：$('li:first');

  • :last 获取最后个元素

    • 获取li标签匹配的最后个元素：$('li:last')

  • :not(selector) 去除所有与给定选择器匹配的元素

    • 查找所有未选中的 input 元素：$("input:not(:checked)")

  • :even 匹配所有索引值为偶数的元素，从 0 开始计数

    • 查找表格的1、3、5...行（即索引值0、2、4...）：$("tr:even")

  • :odd 匹配所有索引值为奇数的元素，从 0 开始计数

    • 查找表格的2、4、6行（即索引值1、3、5...）：$("tr:odd")

  • :eq(index) 匹配一个给定索引值的元素(从 0 开始计数)

    • 查找第二行：$("tr:eq(1)")

  • :gt(index) 匹配所有大于给定索引值的元素，从 0 开始计数

    • 查找第二第三行，即索引值是1和2，也就是比0大：$("tr:gt(0)")

  • :lt(index) 匹配所有小于给定索引值的元素 ，从 0 开始计数

    • 查找第一第二行，即索引值是0和1，也就是比2小：$("tr:lt(2)")

  • :header 匹配如 h1, h2, h3 之类的标题元素

    • 给页面内所有标题加上背景色：$(":header").css("background", "#EEE");

  • :animated 匹配所有正在执行动画效果的元素

 

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2 <html>
  3     <head>
  4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5         <title>Untitled Document</title>
  6         <style type="text/css">
  7             div, span, p {
  8                 width: 140px;
  9                 height: 140px;
 10                 margin: 5px;
 11                 background: #aaa;
 12                 border: #000 1px solid;
 13                 float: left;
 14                 font-size: 17px;
 15                 font-family: Verdana;
 16             }
 17             
 18             div.mini {
 19                 width: 55px;
 20                 height: 55px;
 21                 background-color: #aaa;
 22                 font-size: 12px;
 23             }
 24             
 25             div.hide {
 26                 display: none;
 27             }           
 28         </style>
 29         <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
 30         <script type="text/javascript">
 31             /*执行动画的代码*/
 32             $(document).ready(function(){
 33                 function anmateIt(){
 34                     $("#mover").slideToggle("slow", anmateIt);
 35                 }
 36                 anmateIt();
 37             });
 38             
 39             $(document).ready(function(){
 40                 //1.选择第一个 div 元素  
 41                 $("#btn1").click(function(){
 42                     $("div:first").css("background", "#bbffaa");
 43                 });
 44 ​
 45                 //2.选择最后一个 div 元素
 46                 $("#btn2").click(function(){
 47                     $("div:last").css("background", "#bbffaa");
 48                 });
 49 ​
 50                 //3.选择class不为 one 的所有 div 元素
 51                 $("#btn3").click(function(){
 52                     $("div:not(.one)").css("background", "#bbffaa");
 53                 });
 54 ​
 55                 //4.选择索引值为偶数的 div 元素
 56                 $("#btn4").click(function(){
 57                     $("div:even").css("background", "#bbffaa");
 58                 });
 59 ​
 60                 //5.选择索引值为奇数的 div 元素
 61                 $("#btn5").click(function(){
 62                     $("div:odd").css("background", "#bbffaa");
 63                 });
 64 ​
 65                 //6.选择索引值为大于 3 的 div 元素
 66                 $("#btn6").click(function(){
 67                     $("div:gt(3)").css("background", "#bbffaa");
 68                 });
 69 ​
 70                 //7.选择索引值为等于 3 的 div 元素
 71                 $("#btn7").click(function(){
 72                     $("div:eq(3)").css("background", "#bbffaa");
 73                 });
 74 ​
 75                 //8.选择索引值为小于 3 的 div 元素
 76                 $("#btn8").click(function(){
 77                     $("div:lt(3)").css("background", "#bbffaa");
 78                 });
 79 ​
 80                 //9.选择所有的标题元素
 81 $("#btn9").click(function(){
 82 $(":header").css("background", "#bbffaa");
 83     });//标题标签变化
 84 ​
 85 //10.选择当前正在执行动画的所有元素
 86 $("#btn10").click(function(){
 87 $(":animated").css("background", "#bbffaa");
 88     });
 89 ​
 90                 //11.选择没有执行动画的最后一个div
 91                 $("#btn11").click(function(){
 92                     $("div:not(:animated):last").css("background", "#bbffaa");
 93                 });//选择div  去掉执行动画的  选择最后一个   
 94     });
 95 </script>
 96 </head>
 97 <body>
 98 ​
 99 <input type="button" value="选择第一个 div 元素" id="btn1" />
100 <input type="button" value="选择最后一个 div 元素" id="btn2" />
101 <input type="button" value="选择class不为 one 的所有 div 元素" id="btn3" />
102 <input type="button" value="选择索引值为偶数的 div 元素" id="btn4" />
103 <input type="button" value="选择索引值为奇数的 div 元素" id="btn5" />
104 <input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6" />
105 <input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7" />
106 <input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8" />
107 <input type="button" value="选择所有的标题元素" id="btn9" />
108 <input type="button" value="选择当前正在执行动画的所有元素" id="btn10" />
109 <input type="button" value="选择没有执行动画的最后一个div" id="btn11" />
110 
111 <h3>基本选择器.</h3>
112 <br><br>
113 <div class="one" id="one">
114     id 为 one,class 为 one 的div
115 <div class="mini">class为mini</div>
116 </div>
117 <div class="one" id="two" title="test">
118     id为two,class为one,title为test的div
119 <div class="mini" title="other">class为mini,title为other</div>
120 <div class="mini" title="test">class为mini,title为test</div>
121 </div>
122 <div class="one">
123 <div class="mini">class为mini</div>
124 <div class="mini">class为mini</div>
125 <div class="mini">class为mini</div>
126 <div class="mini"></div>
127 </div>
128 <div class="one">
129 <div class="mini">class为mini</div>
130 <div class="mini">class为mini</div>
131 <div class="mini">class为mini</div>
132 <div class="mini" title="tesst">class为mini,title为tesst</div>
133 </div>
134 <div style="display:none;" class="none">style的display为"none"的div</div>
135 <div class="hide">class为"hide"的div</div>
136 <div>
137     包含input的type为"hidden"的div<input type="hidden" size="8">
138 </div>
139 <div id="mover">正在执行动画的div元素.</div>
140 </body>
141 </html>

内容过滤器

  • :contains(text) 匹配包含给定文本的元素

  • 查找所有包含 "John" 的 div 元素：$("div:contains('John')")

  • :empty 匹配所有不包含子元素或者文本的空元素

    • 查找所有不包含子元素或者文本的空元素：$("td:empty")

  • :parent 匹配含有子元素或者文本的元素 （相当于非空）

    • 查找所有含有子元素或者文本的 td 元素：$("td:parent")

  • :has(selector) 匹配含有选择器所匹配的元素的元素

    • 给所有包含 p 元素的 div 元素添加一个 text 类：$("div:has(p)").addClass("test");

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5         <title>Untitled Document</title>
 6         <style type="text/css">
 7             div, span, p {
 8                 width: 140px;
 9                 height: 140px;
10                 margin: 5px;
11                 background: #aaa;
12                 border: #000 1px solid;
13                 float: left;
14                 font-size: 17px;
15                 font-family: Verdana;
16             }
17             
18             div.mini {
19                 width: 55px;
20                 height: 55px;
21                 background-color: #aaa;
22                 font-size: 12px;
23             }
24             
25             div.hide {
26                 display: none;
27             }           
28         </style>
29         <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
30         <script type="text/javascript">
31             $(document).ready(function(){
32                 function anmateIt(){
33                     $("#mover").slideToggle("slow", anmateIt);
34                 }
35     
36                 anmateIt();             
37             });
38             
39             $(document).ready(function(){
40                 //1.选择 含有文本 'di' 的 div 元素
41                 $("#btn1").click(function(){
42                     $("div:contains('di')").css("background", "#bbffaa");
43                 });
44 ​
45                 //2.选择不包含子元素(或者文本元素) 的 div 空元素
46                 $("#btn2").click(function(){
47                     $("div:empty").css("background", "#bbffaa");
48                 });
49 ​
50                 //3.选择含有 class 为 mini 元素的 div 元素
51                 $("#btn3").click(function(){
52                     $("div:has(.mini)").css("background", "#bbffaa");
53                 });
54 ​
55                 //4.选择含有子元素(或者文本元素)的div元素
56                 $("#btn4").click(function(){
57                     $("div:parent").css("background", "#bbffaa");
58                 });
59             });
60         </script>
61     </head>
62     <body>      
63         <input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1" />
64         <input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2" />
65         <input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3" />
66         <input type="button" value="选择含有子元素(或者文本元素)的div元素" id="btn4" />
67         
68         <br><br>
69         <div class="one" id="one">
70             id 为 one,class 为 one 的div
71             <div class="mini">class为mini</div>
72         </div>
73         <div class="one" id="two" title="test">
74             id为two,class为one,title为test的div
75             <div class="mini" title="other">class为mini,title为other</div>
76 <div class="mini" title="test">class为mini,title为test</div>
77 </div>
78 <div class="one">
79 <div class="mini">class为mini</div>
80 <div class="mini">class为mini</div>
81 <div class="mini">class为mini</div>
82 <div class="mini"></div>
83 </div>
84 <div class="one">
85 <div class="mini">class为mini</div>
86 <div class="mini">class为mini</div>
87 <div class="mini">class为mini</div>
88 <div class="mini" title="tesst">class为mini,title为tesst</div>
89 </div>
90 <div style="display:none;" class="none">style的display为"none"的div</div>
91 <div class="hide">class为"hide"的div</div>
92 <div>
93     包含input的type为"hidden"的div<input type="hidden" size="8">
94 </div>
95 <div id="mover">正在执行动画的div元素.</div>
96 </body>
97 </html>

属性过滤器

  • [attribute] 匹配包含给定属性的元素。

  • 查找所有含有 id 属性的 div 元素：$("div[id]")

  • [attribute=value] 匹配给定的属性是某个特定值的元素

    • 查找所有 name 属性是 newsletter 的 input 元素：$("input[name='newsletter']");

  • [attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。

    • 查找所有 name 属性不是 newsletter 的 input 元素：$("input[name!='newsletter']");

  • [attribute^=value] 匹配给定的属性是以某些值开始的元素

    • 查找所有 name 以 'news' 开始的 input 元素：$("input[name^='news']")

  • [attribute$=value] 匹配给定的属性是以某些值结尾的元素

    • 查找所有 name 以 'letter' 结尾的 input 元素：$("input[name$='letter']")

  • [attribute*=value] 匹配给定的属性是以包含某些值的元素

    • 查找所有 name 包含 'man' 的 input 元素：$("input[name*='man']")

  • [attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用。

    • 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的input 元素：$("input[id][name$='man']")

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5 <title>Untitled Document</title>
  6 <style type="text/css">
  7 div,span,p {
  8     width: 140px;
  9     height: 140px;
 10     margin: 5px;
 11     background: #aaa;
 12     border: #000 1px solid;
 13     float: left;
 14     font-size: 17px;
 15     font-family: Verdana;
 16 }
 17 ​
 18 div.mini {
 19     width: 55px;
 20     height: 55px;
 21     background-color: #aaa;
 22     font-size: 12px;
 23 }
 24 ​
 25 div.hide {
 26     display: none;
 27 }
 28 </style>
 29 <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
 30 <script type="text/javascript">
 31     
 32     $(function() {
 33         //1.选取含有 属性title 的div元素
 34         $("#btn1").click(function() {
 35             $("div[title]").css("background", "#bbffaa");
 36         });
 37         //2.选取 属性title值等于'test'的div元素
 38         $("#btn2").click(function() {
 39             $("div[title='test']").css("background", "#bbffaa");
 40         });
 41         //3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中)
 42         $("#btn3").click(function() {
 43             $("div[title!='test']").css("background", "#bbffaa");
 44         });
 45         //4.选取 属性title值 以'te'开始 的div元素
 46         $("#btn4").click(function() {
 47             $("div[title^='te']").css("background", "#bbffaa");
 48         });
 49         //5.选取 属性title值 以'est'结束 的div元素
 50         $("#btn5").click(function() {
 51             $("div[title$='est']").css("background", "#bbffaa");
 52         });
 53         //6.选取 属性title值 含有'es'的div元素
 54         $("#btn6").click(function() {
 55             $("div[title*='es']").css("background", "#bbffaa");
 56         });
 57         
 58         //7.首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素
 59         $("#btn7").click(function() {
 60             $("div[id][title*='es']").css("background", "#bbffaa");
 61         });
 62         //8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素
 63         $("#btn8").click(function() {
 64             $("div[title][title!='test']").css("background", "#bbffaa");
 65         });
 66     });
 67 </script>
 68 </head>
 69 <body>
 70     <input type="button" value="选取含有 属性title 的div元素." id="btn1" />
 71     <input type="button" value="选取 属性title值等于'test'的div元素." id="btn2" />
 72     <input type="button"
 73         value="选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)." id="btn3" />
 74     <input type="button" value="选取 属性title值 以'te'开始 的div元素." id="btn4" />
 75     <input type="button" value="选取 属性title值 以'est'结束 的div元素." id="btn5" />
 76     <input type="button" value="选取 属性title值 含有'es'的div元素." id="btn6" />
 77     <input type="button"
 78         value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素."
 79         id="btn7" />
 80     <input type="button"
 81         value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8" />
 82 ​
 83     <br>
 84     <br>
 85     <div class="one" id="one">
 86         id 为 one,class 为 one 的div
 87         <div class="mini">class为mini</div>
 88     </div>
 89     <div class="one" id="two" title="test">
 90         id为two,class为one,title为test的div
 91         <div class="mini" title="other">class为mini,title为other</div>
 92         <div class="mini" title="test">class为mini,title为test</div>
 93 </div>
 94 <div class="one">
 95 <div class="mini">class为mini</div>
 96 <div class="mini">class为mini</div>
 97 <div class="mini">class为mini</div>
 98 <div class="mini"></div>
 99 </div>
100 <div class="one">
101 <div class="mini">class为mini</div>
102 <div class="mini">class为mini</div>
103 <div class="mini">class为mini</div>
104 <div class="mini" title="tesst">class为mini,title为tesst</div>
105 </div>
106 <div style="display: none;" class="none">style的display为"none"的div</div>
107 <div class="hide">class为"hide"的div</div>
108 <div>
109     包含input的type为"hidden"的div<input type="hidden" value="123456789"
110 size="8">
111 </div>
112 <div id="mover">正在执行动画的div元素.</div>
113 </body>
114 </html>
115 ​

表单过滤器

  • :input 匹配所有 input, textarea, select 和 button 元素

    • $(":input")

  • :text 匹配所有 文本输入框

    • $(":text")

  • :password 匹配所有密码输入框

    • $(":password")

  • :radio 匹配所有的单选框

    • $(":radio")

  • :checkbox 匹配所有的复选框

  • :submit 匹配所有提交按钮

  • :image 匹配所有 img 标签

  • :reset 匹配所有重置按钮

  • :button 匹配所有 input type=button 按钮

  • :file 匹配所有 input type=file 文件上传

  • :hidden 匹配所有不可见元素 display:none 或 input type=hidden

表单对象属性过滤器

  • :enabled 匹配所有可用元素

    • 查找所有可用的input元素：$("input:enabled")

  • :disabled 匹配所有不可用元素

    • 查找所有不可用的input元素：$("input:disabled")

  • :checked 匹配所有选中的单选，复选，和下拉列表中选中的 option 标签对象，不包括select中的option

    • 查找所有选中的复选框元素：$("input:checked")

  • :selected 匹配所有选中的 option

    • 查找所有选中的选项元素：$("select option:selected")

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5         <title>Untitled Document</title>
 6         <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
 7         <script type="text/javascript">
 8             $(function(){
 9 ​
10                 //1.对表单内 可用input 赋值操作
11                 $("#btn1").click(function(){
12                     //val()操作表单项的value属性值
13                     $(":text:enabled").val("New Value");//先找输入框  选择可用的  赋值
14                 });
15                 //2.对表单内 不可用input 赋值操作
16                 $("#btn2").click(function(){
17                     $(":text:disabled").val("New Value Too");
18                 });
19                 //3.获取多选框选中的个数  使用size()方法获取选取到的元素集合的元素个数
20                 $("#btn3").click(function(){
21                     alert($(":checkbox:checked").size())//复选框   选中的
22                 });
23                 //4.获取多选框，每个选中的value值
24                 $("#btn4").click(function(){
25                     //获取选中的复选框
26                     var $checkbox = $(":checkbox:checked");
27                     //老式遍历
28                     // for (let i = 0; i < $checkbox.length; i++) {
29                     //  alert($checkbox[i].value);//$checkbox[i]变成了dom对象
30                     // }
31 ​
32                     //jquery  each()是jquery对象提供用来遍历元素的方法
33                     //在遍历的funtion函数中,有一个this对象,这个this对象,就是遍历到的dom对象
34                     $checkbox.each(function (){
35                         alert(this.value);//this.value 获取这个对象的value属性值
36                     });
37                     
38                 });
39                 //5.获取下拉框选中的内容  
40                 $("#btn5").click(function(){
41                     //获取选中的option标签对象
42                     let $select = $("select option:selected");//后代选择select option   选中的:selected
43                     $select.each(function (){
44                         alert(this.innerHTML);
45                     })
46 ​
47                 });
48             })  
49         </script>
50     </head>
51     <body>
52         <h3>表单对象属性过滤选择器</h3>
53          <button id="btn1">对表单内 可用input 赋值操作.</button>
54          <button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br />
55          <button id="btn3">获取多选框选中的个数.</button>
56          <button id="btn4">获取多选框选中的内容.</button><br /><br />
57          <button id="btn5">获取下拉框选中的内容.</button><br /><br />
58          
59         <form id="form1" action="#">            
60             可用元素: <input name="add" value="可用文本框1"/><br>
61             不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br>
62             可用元素: <input name="che" value="可用文本框2"/><br>
63             不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br>
64             <br>
65 
66     多选框: <br>
67 <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
68 <input type="checkbox" name="newsletter" value="test2" />test2
69 <input type="checkbox" name="newsletter" value="test3" />test3
70 <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
71 <input type="checkbox" name="newsletter" value="test5" />test5
72 
73 <br><br>
74     下拉列表1: <br> 
75 <!--multiple="multiple"  下拉列表可以选多个-->
76 <select name="test" multiple="multiple" style="height: 100px" id="sele1">
77 <option>浙江</option>
78 <option selected="selected">辽宁</option>
79 <option>北京</option>
80 <option selected="selected">天津</option>
81 <option>广州</option>
82 <option>湖北</option>
83 </select>
84 
85 <br><br>
86     下拉列表2: <br>
87 <select name="test2">
88 <option>浙江</option>
89 <option>辽宁</option>
90 <option selected="selected">北京</option>
91 <option>天津</option>
92 <option>广州</option>
93 <option>湖北</option>
94 </select>
95 </form>
96 </body>
97 </html>

jQuery 元素筛选

  • eq() 获取给定索引的元素 功能跟 :eq() 一样

    • 获取p匹配的第二个元素：$("p").eq(1)

  • first() 获取第一个元素 功能跟 :first 一样

    • 获取li匹配的第一个元素：$('li').first()

  • last() 获取最后一个元素 功能跟 :last 一样

    • 获取li匹配的最后个元素：$('li').last()

  • filter(exp) 留下匹配的元素

  • is(exp) 判断是否匹配给定的选择器，只要有一个匹配就返回true

  • has(exp) 返回包含有匹配选择器的元素的元素 功能跟 :has 一样

  • not(exp) 删除匹配选择器的元素 功能跟 :not 一样

  • children(exp) 返回匹配给定选择器的子元素 功能跟 parent>child 一样

  • find(exp) 返回匹配给定选择器的后代元素 功能跟 ancestor descendant 一样

  • next() 返回当前元素的下一个兄弟元素 功能跟 prev + next 功能一样

  • nextAll() 返回当前元素后面所有的兄弟元素 功能跟 prev ~ siblings 功能一样

  • nextUntil() 返回当前元素到指定匹配的元素为止的后面元素

  • parent() 返回父元素

  • prev(exp) 返回当前元素的上一个兄弟元素

  • prevAll() 返回当前元素前面所有的兄弟元素

  • prevUnit(exp) 返回当前元素到指定匹配的元素为止的前面元素

  • siblings(exp) 返回所有兄弟元素

  • add() 把 add 匹配的选择器的元素添加到当前 jquery 对象中 

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2 <html>
  3     <head>
  4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5         <title>DOM查询</title>
  6         <style type="text/css">
  7             div, span, p {
  8                 width: 140px;
  9                 height: 140px;
 10                 margin: 5px;
 11                 background: #aaa;
 12                 border: #000 1px solid;
 13                 float: left;
 14                 font-size: 17px;
 15                 font-family: Verdana;
 16             }
 17             
 18             div.mini {
 19                 width: 55px;
 20                 height: 55px;
 21                 background-color: #aaa;
 22                 font-size: 12px;
 23             }
 24             
 25             div.hide {
 26                 display: none;
 27             }           
 28         </style>
 29         <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
 30         <script type="text/javascript">
 31             $(document).ready(function(){
 32                 function anmateIt(){
 33                     $("#mover").slideToggle("slow", anmateIt);
 34                 }
 35                 anmateIt();
 36 ​
 37                 //(1)eq()  选择索引值为等于 3 的 div 元素
 38                 $("#btn1").click(function(){
 39                     $("div").eq(3).css("background-color","#bfa");
 40                 });
 41                 //(2)first()选择第一个 div 元素
 42                  $("#btn2").click(function(){
 43                      //first()   选取第一个元素
 44                     $("div").first().css("background-color","#bfa");
 45                 });
 46                 //(3)last()选择最后一个 div 元素
 47                 $("#btn3").click(function(){
 48                     //last()  选取最后一个元素
 49                     $("div").last().css("background-color","#bfa");
 50                 });
 51                 //(4)filter()在div中选择索引为偶数的
 52                 $("#btn4").click(function(){
 53                     //filter()  过滤   传入的是选择器字符串
 54                     $("div").filter(":even").css("background-color","#bfa");
 55                 });
 56                  //(5)is()判断#one是否为:empty或:parent
 57                 //is用来检测jq对象是否符合指定的选择器
 58                 $("#btn5").click(function(){
 59                     alert($("#one").is(":empty"));
 60                 });
 61                 
 62                 //(6)has()选择div中包含.mini的
 63                 $("#btn6").click(function(){
 64                     //has(selector)  选择器字符串    是否包含selector
 65                     $("div").has(".mini").css("background-color","#bfa");
 66                 });
 67                 //(7)not()选择div中class不为one的
 68                 $("#btn7").click(function(){
 69                     //not(selector)  选择不是selector的元素
 70                     $("div").not(".one").css("background-color","#bfa");
 71                 });
 72                 //(8)children()在body中选择所有class为one的div子元素
 73                 $("#btn8").click(function(){
 74 //children()  选出所有的子元素
 75 $("body").children("div.one").css("background-color","#bfa");
 76     });
 77 
 78 
 79 //(9)find()在body中选择所有class为mini的div元素
 80 $("#btn9").click(function(){
 81 //find()  选出所有的后代元素
 82 $("body").find("div.mini").css("background-color","#bfa");
 83     });
 84 //(10)next() #one的下一个div
 85 $("#btn10").click(function(){
 86 //next()  选择下一个兄弟元素
 87 $("#one").next("div").css("background-color","#bfa");
 88     });
 89 //(11)nextAll() #one后面所有的span元素
 90 $("#btn11").click(function(){
 91 //nextAll()   选出后面所有的元素
 92 $("#one").nextAll("span").css("background-color","#bfa");
 93     });
 94 //(12)nextUntil() #one和span之间的元素
 95 $("#btn12").click(function(){
 96 //
 97 $("#one").nextUntil("span").css("background-color","#bfa")
 98     });
 99 //(13)parent() .mini的父元素
100 $("#btn13").click(function(){
101 $(".mini").parent().css("background-color","#bfa");
102     });
103 //(14)prev() #two的上一个div
104 $("#btn14").click(function(){
105 //prev()  
106 $("#two").prev("div").css("background-color","#bfa")
107     });
108 //(15)prevAll() span前面所有的div
109 $("#btn15").click(function(){
110 //prevAll()   选出前面所有的元素
111 $("span").prevAll("div").css("background-color","#bfa")
112     });
113 //(16)prevUntil() span向前直到#one的元素
114 $("#btn16").click(function(){
115 //prevUntil(exp)   找到之前所有的兄弟元素直到找到exp停止
116 $("span").prevUntil("#one").css("background-color","#bfa")
117     });
118 //(17)siblings() #two的所有兄弟元素
119 $("#btn17").click(function(){
120 //siblings()    找到所有的兄弟元素，包括前面的和后面的
121 $("#two").siblings().css("background-color","#bfa")
122     });
123 
124 
125 //(18)add()选择所有的 span 元素和id为two的元素
126 $("#btn18").click(function(){
127 //   $("span,#two,.mini,#one")
128 $("span").add("#two").css("background-color","#bfa");
129     });
130     });
131 
132 
133 </script>
134 </head>
135 <body>
136 <input type="button" value="eq()选择索引值为等于 3 的 div 元素" id="btn1" />
137 <input type="button" value="first()选择第一个 div 元素" id="btn2" />
138 <input type="button" value="last()选择最后一个 div 元素" id="btn3" />
139 <input type="button" value="filter()在div中选择索引为偶数的" id="btn4" />
140 <input type="button" value="is()判断#one是否为:empty或:parent" id="btn5" />
141 <input type="button" value="has()选择div中包含.mini的" id="btn6" />
142 <input type="button" value="not()选择div中class不为one的" id="btn7" />
143 <input type="button" value="children()在body中选择所有class为one的div子元素" id="btn8" />
144 <input type="button" value="find()在body中选择所有class为mini的div后代元素" id="btn9" />
145 <input type="button" value="next()#one的下一个div" id="btn10" />
146 <input type="button" value="nextAll()#one后面所有的span元素" id="btn11" />
147 <input type="button" value="nextUntil()#one和span之间的元素" id="btn12" />
148 <input type="button" value="parent().mini的父元素" id="btn13" />
149 <input type="button" value="prev()#two的上一个div" id="btn14" />
150 <input type="button" value="prevAll()span前面所有的div" id="btn15" />
151 <input type="button" value="prevUntil()span向前直到#one的元素" id="btn16" />
152 <input type="button" value="siblings()#two的所有兄弟元素" id="btn17" />
153 <input type="button" value="add()选择所有的 span 元素和id为two的元素" id="btn18" />
154 ​
155 
156 <h3>基本选择器.</h3>
157 <br /><br />
158     文本框<input type="text" name="account" disabled="disabled" />
159 <br><br>
160 <div class="one" id="one">
161     id 为 one,class 为 one 的div
162 <div class="mini">class为mini</div>
163 </div>
164 <div class="one" id="two" title="test">
165     id为two,class为one,title为test的div
166 <div class="mini" title="other"><b>class为mini,title为other</b></div>
167 <div class="mini" title="test">class为mini,title为test</div>
168 </div>
169 
170 <div class="one">
171 <div class="mini">class为mini</div>
172 <div class="mini">class为mini</div>
173 <div class="mini">class为mini</div>
174 <div class="mini"></div>
175 </div>
176 <div class="one">
177 <div class="mini">class为mini</div>
178 <div class="mini">class为mini</div>
179 <div class="mini">class为mini</div>
180 <div class="mini" title="tesst">class为mini,title为tesst</div>
181 </div>
182 <div style="display:none;" class="none">style的display为"none"的div</div>
183 <div class="hide">class为"hide"的div</div>
184 <span id="span1">^^span元素 111^^</span>
185 <div>
186     包含input的type为"hidden"的div<input type="hidden" size="8">
187 </div>
188 <span id="span2">^^span元素 222^^</span>
189 <div id="mover">正在执行动画的div元素.</div>
190 </body>
191 </html>
192 ​
 
 
posted @ 2023-04-23 10:03  暴躁C语言  阅读(36)  评论(0)    收藏  举报