3.4JQuery选择器
3.4.1基本选择器
基本选择器：
1、#ID 选择器：根据 id 查找标签对象；
2、.class 选择器：根据 class查找标签对象；
3、element 选择器：根据标签名查找标签对象；
4、* 选择器：表示任意的，所有的元素；
5、selector1，selector2 组合选择器：合并选择器1，选择器2的结果并返回。
特殊案例：
[p.myclass]表示：标签名必须是p标签，而且class类型要是mycalss。
基本选择器的实现：
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. * 1.选择 id 为 one 的元素 "background-color","#bbffaa"
33. */
34. $(function () {//记住要在页面加载完成之后
35. $("#btn1").click(function () {
36. //给按钮一绑定单击响应事件
37. //css方法：可以获取和设置标签的样式
38. $("#one").css("background-color", "#bbffaa");
39. })
40.
41. })
42.
43. /**
44. * 2.选择 class 为 mini 的所有元素
45. */
46. $(function () {//要在页面加载完成之后
47. $("#btn2").click(function () {//绑定单击响应函数
48. $(".mini").css("background-color", "blue");
49. })
50. })
51.
52. /**
53. * 3.选择 元素名是 div 的所有元素
54. */
55. $(function () {
56. $("#btn3").click(function () {
57. $("div").css("background-color", "yellow");
58. })
59. })
60.
61. /**
62. * 4.选择所有的元素
63. */
64. $(function () {
65. $("#btn4").click(function () {
66. $("*").css("background-color", "purple");
67. })
68. })
69.
70. /**
71. * 5.选择所有的 span 元素和id为two的元素
72. */
73. $(function () {
74. $("#btn5").click(function () {
75. $("span, #two").css("background-color", "green");
76. })
77. })
78.
79. </script>
80. </head>
81. <body>
82. <!-- <div>
83. <h1>基本选择器</h1>
84. </div> -->
85. <input type="button" value="选择 id 为 one 的元素" id="btn1"/>
86. <input type="button" value="选择 class 为 mini 的所有元素" id="btn2"/>
87. <input type="button" value="选择 元素名是 div 的所有元素" id="btn3"/>
88. <input type="button" value="选择 所有的元素" id="btn4"/>
89. <input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5"/>
90.
91. <br>
92. <div class="one" id="one">
93. id 为 one,class 为 one 的div
94. <div class="mini">class为mini</div>
95. </div>
96. <div class="one" id="two" title="test">
97. id为two,class为one,title为test的div
98. <div class="mini" title="other">class为mini,title为other</div>
99. <div class="mini" title="test">class为mini,title为test</div>
100. </div>
101. <div class="one">
102. <div class="mini">class为mini</div>
103. <div class="mini">class为mini</div>
104. <div class="mini">class为mini</div>
105. <div class="mini"></div>
106. </div>
107. <div class="one">
108. <div class="mini">class为mini</div>
109. <div class="mini">class为mini</div>
110. <div class="mini">class为mini</div>
111. <div class="mini" title="tesst">class为mini,title为tesst</div>
112. </div>
113. <div style="display:none;" class="none">style的display为"none"的div</div>
114. <div class="hide">class为"hide"的div</div>
115. <div>
116. 包含input的type为"hidden"的div<input type="hidden" size="8">
117. </div>
118. <span class="one" id="span">^^span元素^^</span>
119. </body>
120. </html>
3.4.2层级选择器
层级选择器：
1、 ancestor descendant 后代选择器 ：在给定的祖先元素下匹配所有的后代元素；
2、 parent > child 子元素选择器：在给定的父元素下匹配所有的子元素；
3、 prev + next 相邻元素选择器：匹配所有紧接在 prev 元素后的 next 元素；
4、 prev ~ sibings 之后的兄弟元素选择器：匹配 prev 元素之后的所有 siblings 元素
层级选择器的实现：
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. * 1.选择 body 内的所有 div 元素
33. */
34. $(function () {//表示页面加载完成之后
35. $("#btn1").click(function () {//给按键一绑定单击响应事件
36. //在body标签中选择他的后代div标签
37. $("body div").css("background-color", "green");
38. })
39. });
40.
41. /**
42. * 2.在 body 内, 选择div子元素
43. */
44. $(function () {
45. $("#btn2").click(function () {
46. //寻找body的子元素div
47. $("body > div").css("background-color", "green");
48. })
49. });
50.
51. /**
52. * 3.选择 id 为 one 的下一个 div 元素
53. */
54. $(function () {
55. $("#btn3").click(function () {
56. $("#one + div").css("background-color", "green");
57. })
58. });
59.
60. /**
61. * 4.选择 id 为 two 的元素后面的所有 div 兄弟元素
62. */
63. $(function () {
64. $("#btn4").click(function () {
65. $("#two ~ div").css("background-color", "green");
66. })
67. });
68. </script>
69. </head>
70. <body>
71.
72. <!-- <div>
73. <h1>层级选择器:根据元素的层级关系选择元素</h1>
74. ancestor descendant ：
75. parent > child ：
76. prev + next ：
77. prev ~ siblings ：
78. </div> -->
79. <input type="button" value="选择 body 内的所有 div 元素" id="btn1"/>
80. <input type="button" value="在 body 内, 选择div子元素" id="btn2"/>
81. <input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3"/>
82. <input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4"/>
83. <br><br>
84. <div class="one" id="one">
85. id 为 one,class 为 one 的div
86. <div class="mini">class为mini</div>
87. </div>
88. <div class="one" id="two" title="test">
89. id为two,class为one,title为test的div
90. <div class="mini" title="other">class为mini,title为other</div>
91. <div class="mini" title="test">class为mini,title为test</div>
92. </div>
93. <div class="one">
94. <div class="mini">class为mini</div>
95. <div class="mini">class为mini</div>
96. <div class="mini">class为mini</div>
97. <div class="mini"></div>
98. </div>
99. <div class="one">
100. <div class="mini">class为mini</div>
101. <div class="mini">class为mini</div>
102. <div class="mini">class为mini</div>
103. <div class="mini" title="tesst">class为mini,title为tesst</div>
104. </div>
105. <div style="display:none;" class="none">style的display为"none"的div</div>
106. <div class="hide">class为"hide"的div</div>
107. <div>
108. 包含input的type为"hidden"的div<input type="hidden" size="8">
109. </div>
110. <span id="span">^^span元素^^</span>
111. </body>
112. </html>
3.4.3过滤选择器
基本过滤器：
1、:first 获取第一个元素；
2、:last 获取最后个元素；
3、:not(selector) 去除所有与给定选择器匹配的元素；
4、:even 匹配所有索引值为偶数的元素，从 0 开始计数；
5、:odd 匹配所有索引值为奇数的元素，从 0 开始计数；
6、:eq(index) 匹配一个给定索引值的元素；
7、:gt(index) 匹配所有大于给定索引值的元素；
8、:lt(index) 匹配所有小于给定索引值的元素；
9、:header 匹配如 h1, h2, h3 之类的标题元素；
10、: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. $(document).ready(function () {
32. function anmateIt() {
33. $("#mover").slideToggle("slow", anmateIt);
34. }
35.
36. anmateIt();
37. });
38. /**
39. * 1.选择第一个 div 元素
40. */
41. $(function () {//表示在页面加载完成之后
42. $("#btn1").click(function () {//给按钮一绑定单击响应事件
43. $("div:first").css("background-color", "green");
44. })
45. });
46.
47. /**
48. * 2.选择最后一个 div 元素
49. */
50. $(function () {
51. $("#btn2").click(function () {
52. $("div:last").css("background-color", "green");
53. })
54. });
55.
56. /**
57. * 3.选择class不为 one 的所有 div 元素
58. */
59. $(function () {
60. $("#btn3").click(function () {
61. $("div:not(.one)").css("background-color", "green");
62. })
63. });
64.
65. /**
66. * 4.选择索引值为偶数的 div 元素
67. */
68. $(function () {
69. $("#btn4").click(function () {
70. $("div:even").css("background-color", "green");
71. })
72. });
73.
74. /**
75. * 5.选择索引值为奇数的 div 元素
76. */
77. $(function () {
78. $("#btn5").click(function () {
79. $("div:odd").css("background-color", "green");
80. })
81. });
82.
83. /**
84. * 6.选择索引值为大于 3 的 div 元素
85. */
86. $(function () {
87. $("#btn6").click(function () {
88. $("div:gt(3)").css("background-color", "green");
89. })
90. });
91.
92. /**
93. * 7.选择索引值为等于 3 的 div 元素
94. */
95. $(function () {
96. $("#btn7").click(function () {
97. $("div:eq(3)").css("background-color", "green");
98. })
99. });
100.
101. /**
102. * 8.选择索引值为小于 3 的 div 元素
103. */
104. $(function () {
105. $("#btn8").click(function () {
106. $("div:lt(3)").css("background-color", "green");
107. })
108. });
109.
110. /**
111. * 9.选择所有的标题元素
112. */
113. $(function () {
114. $("#btn9").click(function () {
115. $(":header").css("background-color", "green");
116. })
117. });
118.
119. /**
120. * 10.选择当前正在执行动画的所有元素
121. */
122. $(function () {
123. $("#btn10").click(function () {
124. $(":animated").css("background-color", "green");
125. })
126. });
127.
128. /**
129. * 11、选择没有执行动画的最后一个元素
130. */
131. $(function () {
132. $("#btn11").click(function () {
133. $("div:not(:animated):last").css("background-color", "green");
134. })
135. })
136. </script>
137. </head>
138. <body>
139. <!-- <div>
140. :first
141. :last
142. :not(selector)
143. :even
144. :odd
145. :eq(index)
146. :gt(index)
147. :lt(index)
148. :header
149. :animated
150. </div> -->
151. <input type="button" value="选择第一个 div 元素" id="btn1"/>
152. <input type="button" value="选择最后一个 div 元素" id="btn2"/>
153. <input type="button" value="选择class不为 one 的所有 div 元素" id="btn3"/>
154. <input type="button" value="选择索引值为偶数的 div 元素" id="btn4"/>
155. <input type="button" value="选择索引值为奇数的 div 元素" id="btn5"/>
156. <input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6"/>
157. <input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7"/>
158. <input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8"/>
159. <input type="button" value="选择所有的标题元素" id="btn9"/>
160. <input type="button" value="选择当前正在执行动画的所有元素" id="btn10"/>
161. <input type="button" value="选择没有执行动画的最后一个div" id="btn11"/>
162.
163. <h3>基本选择器.</h3>
164. <br><br>
165. <div class="one" id="one">
166. id 为 one,class 为 one 的div
167. <div class="mini">class为mini</div>
168. </div>
169. <div class="one" id="two" title="test">
170. id为two,class为one,title为test的div
171. <div class="mini" title="other">class为mini,title为other</div>
172. <div class="mini" title="test">class为mini,title为test</div>
173. </div>
174. <div class="one">
175. <div class="mini">class为mini</div>
176. <div class="mini">class为mini</div>
177. <div class="mini">class为mini</div>
178. <div class="mini"></div>
179. </div>
180. <div class="one">
181. <div class="mini">class为mini</div>
182. <div class="mini">class为mini</div>
183. <div class="mini">class为mini</div>
184. <div class="mini" title="tesst">class为mini,title为tesst</div>
185. </div>
186. <div style="display:none;" class="none">style的display为"none"的div</div>
187. <div class="hide">class为"hide"的div</div>
188. <div>
189. 包含input的type为"hidden"的div<input type="hidden" size="8">
190. </div>
191. <div id="mover">正在执行动画的div元素.</div>
192. </body>
193. </html>
内容过滤器：
1、:contains(text) 匹配包含给定文本的元素；
2、:empty 匹配所有不包含子元素或者文本的空元素；
3、:parent 匹配含有子元素或者文本的元素；
4、:has(selector) 匹配含有选择器所匹配的元素的元素
内容过滤器的实现：
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. /**
40. 注意：内容过滤器主要有以下四种：
41. :contains(text)
42. :empty
43. :has(selector)
44. :parent（也就是非空元素）
45. */
46.
47. /**
48. * 1.选择 含有文本 'di' 的 div 元素
49. */
50. $(function () {//表示页面加载完成之后
51. $("#btn1").click(function () {//给按键一绑定单击响应事件
52. $("div:contains('di')").css("background-color", "green");
53. })
54. });
55.
56. /**
57. * 2.选择不包含子元素(或者文本元素) 的 div 空元素
58. */
59. $(function () {
60. $("#btn2").click(function () {
61. $("div:empty").css("background-color", "green");
62. })
63. });
64.
65. /**
66. * 3.选择含有 class 为 mini 元素的 div 元素
67. */
68. $(function () {
69. $("#btn3").click(function () {
70. /**
71. * 注意：上面也有一个表示含有，但是使用的是contains，应该是表示含有文本
72. * 这里的含有应该是表示含有标签，使用has
73. */
74. $("div:has(.mini)").css("background-color", "green");
75. })
76. });
77.
78. /**
79. *4、选择含有子元素(或者文本元素)的div元素
80. */
81. $(function () {
82. $("#btn4").click(function () {
83. //也就是非空的div
84. $("div:parent").css("background-color", "green");
85. })
86. });
87. </script>
88. </head>
89. <body>
90. <input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1"/>
91. <input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2"/>
92. <input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3"/>
93. <input type="button" value="选择含有子元素(或者文本元素)的div元素" id="btn4"/>
94.
95. <br><br>
96. <div class="one" id="one">
97. id 为 one,class 为 one 的div
98. <div class="mini">class为mini</div>
99. </div>
100. <div class="one" id="two" title="test">
101. id为two,class为one,title为test的div
102. <div class="mini" title="other">class为mini,title为other</div>
103. <div class="mini" title="test">class为mini,title为test</div>
104. </div>
105. <div class="one">
106. <div class="mini">class为mini</div>
107. <div class="mini">class为mini</div>
108. <div class="mini">class为mini</div>
109. <div class="mini"></div>
110. </div>
111. <div class="one">
112. <div class="mini">class为mini</div>
113. <div class="mini">class为mini</div>
114. <div class="mini">class为mini</div>
115. <div class="mini" title="tesst">class为mini,title为tesst</div>
116. </div>
117. <div style="display:none;" class="none">style的display为"none"的div</div>
118. <div class="hide">class为"hide"的div</div>
119. <div>
120. 包含input的type为"hidden"的div<input type="hidden" size="8">
121. </div>
122. <div id="mover">正在执行动画的div元素.</div>
123. </body>
124. </html>
属性过滤器：
1、[attribute] 匹配包含给定属性的元素；
2、[attribute=value] 匹配给定的属性是某个特定值的元素；
3、[attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素；
4、[attribute^=value] 匹配给定的属性是以某些值开始的元素；
5、[attribute$=value] 匹配给定的属性是以某些值结尾的元素；
6、[attribute*=value] 匹配给定的属性是以包含某些值的元素；
7、[attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用。
属性过滤器的实现：
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. [attribute]
33. [attribute=value]
34. [attribute!=value]
35. [attribute^=value]
36. [attribute$=value]
37. [attribute*=value]
38. [attrSel1][attrSel2][attrSelN]
39. */
40.
41. /**
42. * 1.选取含有 属性title 的div元素
43. */
44. $(function () {//表示在页面加载完成之后
45. $("#btn1").click(function () {//给按钮绑定单击响应事件
46. $("div[title]").css("background-color", "green");
47. })
48. });
49.
50. /**
51. * 2.选取 属性title值等于'test'的div元素
52. */
53. $(function () {
54. $("#btn2").click(function () {
55. $("div[title = 'test']").css("background-color", "green");
56. })
57. });
58.
59. /**
60. * 3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中)
61. */
62. $(function () {
63. $("#btn3").click(function () {
64. $("div[title != 'test']").css("background-color", "green");
65. })
66. });
67.
68. /**
69. * 4.选取 属性title值 以'te'开始 的div元素
70. */
71. $(function () {
72. $("#btn4").click(function () {
73. $("div[title^='te']").css("background-color", "green");
74. })
75. });
76.
77. /**
78. * 5.选取 属性title值 以'est'结束 的div元素
79. */
80. $(function () {
81. $("#btn5").click(function () {
82. $("div[title$='est']").css("background-color", "green");
83. })
84. });
85.
86. /**
87. * 6.选取 属性title值 含有'es'的div元素
88. */
89. $(function () {
90. $("#btn6").click(function () {
91. $("div[title*='es']").css("background-color", "green");
92. })
93. });
94.
95. /**
96. * 7.首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素
97. */
98. $(function () {
99. $("#btn7").click(function () {
100. $("div[id][title*='es']").css("background-color", "green");
101. })
102. });
103.
104. /**
105. * 8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素
106. */
107. $(function () {
108. $("#btn8").click(function () {
109. $("div[title][title != 'test']").css("background-color", "green");
110. })
111. });
112. </script>
113. </head>
114. <body>
115. <input type="button" value="选取含有 属性title 的div元素." id="btn1"/>
116. <input type="button" value="选取 属性title值等于'test'的div元素." id="btn2"/>
117. <input type="button"
118. value="选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)." id="btn3"/>
119. <input type="button" value="选取 属性title值 以'te'开始 的div元素." id="btn4"/>
120. <input type="button" value="选取 属性title值 以'est'结束 的div元素." id="btn5"/>
121. <input type="button" value="选取 属性title值 含有'es'的div元素." id="btn6"/>
122. <input type="button"
123. value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素."
124. id="btn7"/>
125. <input type="button"
126. value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8"/>
127.
128. <br>
129. <br>
130. <div class="one" id="one">
131. id 为 one,class 为 one 的div
132. <div class="mini">class为mini</div>
133. </div>
134. <div class="one" id="two" title="test">
135. id为two,class为one,title为test的div
136. <div class="mini" title="other">class为mini,title为other</div>
137. <div class="mini" title="test">class为mini,title为test</div>
138. </div>
139. <div class="one">
140. <div class="mini">class为mini</div>
141. <div class="mini">class为mini</div>
142. <div class="mini">class为mini</div>
143. <div class="mini"></div>
144. </div>
145. <div class="one">
146. <div class="mini">class为mini</div>
147. <div class="mini">class为mini</div>
148. <div class="mini">class为mini</div>
149. <div class="mini" title="tesst">class为mini,title为tesst</div>
150. </div>
151. <div style="display: none;" class="none">style的display为"none"的div</div>
152. <div class="hide">class为"hide"的div</div>
153. <div>
154. 包含input的type为"hidden"的div<input type="hidden" value="123456789"
155. size="8">
156. </div>
157. <div id="mover">正在执行动画的div元素.</div>
158. </body>
159. </html>
表单过滤器：
1、:input 匹配所有 input, textarea, select 和 button 元素
2、:text 匹配所有文本输入框；
3、:password 匹配所有的密码输入框；
4、:radio 匹配所有的单选框；
5、:checkbox 匹配所有的复选框；
6、:submit 匹配所有提交按钮；
7、:image 匹配所有 img 标签；
8、:reset 匹配所有重置按钮；
9、:button 匹配所有 input type=button 按钮；
10、:file 匹配所有 input type=file 文件上传；
11、:hidden 匹配所有不可见元素 display:none 或 input type=hidden
表单对象属性过滤器：
1、:enabled 匹配所有可用元素；
2、:disabled 匹配所有不可用元素；
3、:checked 匹配所有选中的单选，复选，和下拉列表中选中的 option 标签对象；
4、:selected 匹配所有选中的 option。
表单过滤器和表单对象属性过滤器的实现：
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.
9. /**
10. :input
11. :text
12. :password
13. :radio
14. :checkbox
15. :submit
16. :image
17. :reset
18. :button
19. :file
20. :hidden
21.
22. 表单对象的属性
23. :enabled
24. :disabled
25. :checked
26. :selected
27. */
28.
29. /**
30. * 1.对表单内 可用input 赋值操作
31. */
32. $(function () {//表示在页面加载完成之后
33. $("#btn1").click(function () {
34. //给按钮一绑定单击响应事件
35. //val方法是实现jQuery对象操作表单的方法，可以表单项的内容进行获取与赋值
36. $(":text:enabled").val("我是可以进行操作的表单项");
37. })
38. });
39.
40. /**
41. * 2.对表单内 不可用input 赋值操作
42. */
43. $(function () {
44. $("#btn2").click(function () {
45. $(":text:disabled").val("我是不可用的表单项");
46. })
47. });
48.
49. /**
50. * 3.获取多选框选中的个数 使用size()方法获取选取到的元素集合的元素个数
51. */
52. $(function () {
53. $("#btn3").click(function () {
54. alert($(":checkbox:checked").length);
55. })
56. });
57.
58. /**
59. * 4.获取多选框，每个选中的value值
60. */
61. $(function () {
62. $("#btn4").click(function () {
63. var $checkbox = $(":checkbox:checked");
64.
65. //这是JavaScript中的遍历方法
66. // for (var i = 0; i < $checkbox.length; i++) {
67. // //注意：$checkbox[i]已经是DOM对象了，要使用DOM对象的方法
68. // alert($checkbox[i].value);
69. // }
70.
71. //在jQuery中提供了一个人遍历方法：each
72. $checkbox.each(function () {
73. //this就是一个DOM对象
74. alert(this.value);
75. })
76. })
77. });
78.
79. /**
80. * 5.获取下拉框选中的内容
81. */
82. $(function () {
83. $("#btn5").click(function () {
84. var $selected = $("select option:selected");
85. $selected.each(function () {
86. alert(this.innerHTML);
87. })
88. })
89. });
90.
91. </script>
92. </head>
93. <body>
94. <h3>表单对象属性过滤选择器</h3>
95. <button id="btn1">对表单内 可用input 赋值操作.</button>
96. <button id="btn2">对表单内 不可用input 赋值操作.</button>
97. <br/><br/>
98. <button id="btn3">获取多选框选中的个数.</button>
99. <button id="btn4">获取多选框选中的内容.</button>
100. <br/><br/>
101. <button id="btn5">获取下拉框选中的内容.</button>
102. <br/><br/>
103.
104. <form id="form1" action="#">
105. 可用元素: <input name="add" value="可用文本框1"/><br>
106. 不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br>
107. 可用元素: <input name="che" value="可用文本框2"/><br>
108. 不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br>
109. <br>
110.
111. 多选框: <br>
112. <input type="checkbox" name="newsletter" checked="checked" value="test1"/>test1
113. <input type="checkbox" name="newsletter" value="test2"/>test2
114. <input type="checkbox" name="newsletter" value="test3"/>test3
115. <input type="checkbox" name="newsletter" checked="checked" value="test4"/>test4
116. <input type="checkbox" name="newsletter" value="test5"/>test5
117.
118. <br><br>
119. 下拉列表1: <br>
120. <select name="test" multiple="multiple" style="height: 100px" id="sele1">
121. <option>浙江</option>
122. <option selected="selected">辽宁</option>
123. <option>北京</option>
124. <option selected="selected">天津</option>
125. <option>广州</option>
126. <option>湖北</option>
127. </select>
128.
129. <br><br>
130. 下拉列表2: <br>
131. <select name="test2">
132. <option>浙江</option>
133. <option>辽宁</option>
134. <option selected="selected">北京</option>
135. <option>天津</option>
136. <option>广州</option>
137. <option>湖北</option>
138. </select>
139. </form>
140. </body>
141. </html>
扫一扫
1056
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
