3.5JQuery元素筛选
JQuery元素的筛选：
1、 eq() 获取给定索引的元素 功能跟 :eq() 一样；
2、 first() 获取第一个元素 功能跟 :first 一样；
3、 last() 获取最后一个元素 功能跟 :last 一样；
4、 filter(exp) 留下匹配的元素；
5、 is(exp) 判断是否匹配给定的选择器，只要有一个匹配就返回，true；
6、 has(exp) 返回包含有匹配选择器的元素的元素 功能跟 :has 一样；
7、 not(exp) 删除匹配选择器的元素 功能跟 :not 一样；
8、 children(exp) 返回匹配给定选择器的子元素 功能跟 parent>child 一样；
9、 find(exp) 返回匹配给定选择器的后代元素 功能跟 ancestor descendant 一样；
10、next() 返回当前元素的下一个兄弟元素 功能跟 prev + next 功能一样；
11、nextAll() 返回当前元素后面所有的兄弟元素 功能跟 prev ~ siblings 功能一样；
12、nextUntil() 返回当前元素到指定匹配的元素为止的后面元素；
13、parent() 返回父元素；
14、prev(exp) 返回当前元素的上一个兄弟元素；
15、prevAll() 返回当前元素前面所有的兄弟元素；
16、prevUnit(exp) 返回当前元素到指定匹配的元素为止的前面元素；
17、siblings(exp) 返回所有兄弟元素；
18、add() 把 add 匹配的选择器的元素添加到当前 jquery 对象中。
实现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.
36. anmateIt();
37.
38. /**
39.
40. 过滤
41. eq(index|-index)
42. first()
43. last()
44. hasClass(class)
45. filter(expr|obj|ele|fn)
46. is(expr|obj|ele|fn)1.6*
47. has(expr|ele)
48. not(expr|ele|fn)
49. slice(start,[end])
50.
51. 查找
52. children([expr])
53. closest(expr,[con]|obj|ele)1.6*
54. find(expr|obj|ele)
55. next([expr])
56. nextall([expr])
57. nextUntil([exp|ele][,fil])1.6*
58. parent([expr])
59. parents([expr])
60. parentsUntil([exp|ele][,fil])1.6*
61. prev([expr])
62. prevall([expr])
63. prevUntil([exp|ele][,fil])1.6*
64. siblings([expr])
65.
66. 串联
67. add(expr|ele|html|obj[,con])
68.
69.
70. */
71.
72. //(1)eq() 选择索引值为等于 3 的 div 元素
73. $("#btn1").click(function () {
74. $("div").eq(3).css("background-color", "#bfa");
75. });
76. //(2)first()选择第一个 div 元素
77. $("#btn2").click(function () {
78. //first() 选取第一个元素
79. $("div").first().css("background-color", "#bfa");
80. });
81. //(3)last()选择最后一个 div 元素
82. $("#btn3").click(function () {
83. //last() 选取最后一个元素
84. $("div").last().css("background-color", "#bfa");
85. });
86. //(4)filter()在div中选择索引为偶数的
87. $("#btn4").click(function () {
88. //filter() 过滤 传入的是选择器字符串
89. $("div").filter(":even").css("background-color", "#bfa");
90. });
91. //(5)is()判断#one是否为:empty或:parent
92. //is用来检测jq对象是否符合指定的选择器
93. $("#btn5").click(function () {
94. alert($("#one").is(":empty"));
95. });
96.
97. //(6)has()选择div中包含.mini的
98. $("#btn6").click(function () {
99. //has(selector) 选择器字符串 是否包含selector
100. $("div").has(".mini").css("background-color", "#bfa");
101. });
102. //(7)not()选择div中class不为one的
103. $("#btn7").click(function () {
104. //not(selector) 选择不是selector的元素
105. $("div").not(".one").css("background-color", "#bfa");
106. });
107. //(8)children()在body中选择所有class为one的div子元素
108. $("#btn8").click(function () {
109. //children() 选出所有的子元素
110. $("body").children("div.one").css("background-color", "#bfa");
111. });
112.
113.
114. //(9)find()在body中选择所有class为mini的div元素
115. $("#btn9").click(function () {
116. //find() 选出所有的后代元素
117. $("body").find("div.mini").css("background-color", "#bfa");
118. });
119. //(10)next() #one的下一个div
120. $("#btn10").click(function () {
121. //next() 选择下一个兄弟元素
122. $("#one").next("div").css("background-color", "#bfa");
123. });
124. //(11)nextAll() #one后面所有的span元素
125. $("#btn11").click(function () {
126. //nextAll() 选出后面所有的元素
127. $("#one").nextAll("span").css("background-color", "#bfa");
128. });
129. //(12)nextUntil() #one和span之间的元素
130. $("#btn12").click(function () {
131. //
132. $("#one").nextUntil("span").css("background-color", "#bfa")
133. });
134. //(13)parent() .mini的父元素
135. $("#btn13").click(function () {
136. $(".mini").parent().css("background-color", "#bfa");
137. });
138. //(14)prev() #two的上一个div
139. $("#btn14").click(function () {
140. //prev()
141. $("#two").prev("div").css("background-color", "#bfa")
142. });
143. //(15)prevAll() span前面所有的div
144. $("#btn15").click(function () {
145. //prevAll() 选出前面所有的元素
146. $("span").prevAll("div").css("background-color", "#bfa")
147. });
148. //(16)prevUntil() span向前直到#one的元素
149. $("#btn16").click(function () {
150. //prevUntil(exp) 找到之前所有的兄弟元素直到找到exp停止
151. $("span").prevUntil("#one").css("background-color", "#bfa")
152. });
153. //(17)siblings() #two的所有兄弟元素
154. $("#btn17").click(function () {
155. //siblings() 找到所有的兄弟元素，包括前面的和后面的
156. $("#two").siblings().css("background-color", "#bfa")
157. });
158. //(18)add()选择所有的 span 元素和id为two的元素
159. $("#btn18").click(function () {
160. $("span").add("#two").css("background-color", "#bfa")
161. });
162. });
163.
164.
165. </script>
166. </head>
167. <body>
168. <input type="button" value="eq()选择索引值为等于 3 的 div 元素" id="btn1"/>
169. <input type="button" value="first()选择第一个 div 元素" id="btn2"/>
170. <input type="button" value="last()选择最后一个 div 元素" id="btn3"/>
171. <input type="button" value="filter()在div中选择索引为偶数的" id="btn4"/>
172. <input type="button" value="is()判断#one是否为:empty或:parent" id="btn5"/>
173. <input type="button" value="has()选择div中包含.mini的" id="btn6"/>
174. <input type="button" value="not()选择div中class不为one的" id="btn7"/>
175. <input type="button" value="children()在body中选择所有class为one的div子元素" id="btn8"/>
176. <input type="button" value="find()在body中选择所有class为mini的div后代元素" id="btn9"/>
177. <input type="button" value="next()#one的下一个div" id="btn10"/>
178. <input type="button" value="nextAll()#one后面所有的span元素" id="btn11"/>
179. <input type="button" value="nextUntil()#one和span之间的元素" id="btn12"/>
180. <input type="button" value="parent().mini的父元素" id="btn13"/>
181. <input type="button" value="prev()#two的上一个div" id="btn14"/>
182. <input type="button" value="prevAll()span前面所有的div" id="btn15"/>
183. <input type="button" value="prevUntil()span向前直到#one的元素" id="btn16"/>
184. <input type="button" value="siblings()#two的所有兄弟元素" id="btn17"/>
185. <input type="button" value="add()选择所有的 span 元素和id为two的元素" id="btn18"/>
186.
187.
188. <h3>基本选择器.</h3>
189. <br/><br/>
190. 文本框<input type="text" name="account" disabled="disabled"/>
191. <br><br>
192. <div class="one" id="one">
193. id 为 one,class 为 one 的div
194. <div class="mini">class为mini</div>
195. </div>
196. <div class="one" id="two" title="test">
197. id为two,class为one,title为test的div
198. <div class="mini" title="other"><b>class为mini,title为other</b></div>
199. <div class="mini" title="test">class为mini,title为test</div>
200. </div>
201.
202. <div class="one">
203. <div class="mini">class为mini</div>
204. <div class="mini">class为mini</div>
205. <div class="mini">class为mini</div>
206. <div class="mini"></div>
207. </div>
208. <div class="one">
209. <div class="mini">class为mini</div>
210. <div class="mini">class为mini</div>
211. <div class="mini">class为mini</div>
212. <div class="mini" title="tesst">class为mini,title为tesst</div>
213. </div>
214. <div style="display:none;" class="none">style的display为"none"的div</div>
215. <div class="hide">class为"hide"的div</div>
216. <span id="span1">^^span元素 111^^</span>
217. <div>
218. 包含input的type为"hidden"的div<input type="hidden" size="8">
219. </div>
220. <span id="span2">^^span元素 222^^</span>
221. <div id="mover">正在执行动画的div元素.</div>
222. </body>
223. </html>
扫一扫
265
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
