目录

jquery筛选

目录

选择器查找出来一个集合之后,使用筛选(过滤、查找、串联)方法对集合进行筛选。

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>DOM查询</title>
      <style type="text/css">
         div, span, p {
             width: 140px;
             height: 140px;
             margin: 5px;
             background: #aaa;
             border: #000 1px solid;
             float: left;
             font-size: 17px;
             font-family: Verdana;
         }
         
         div.mini {
             width: 55px;
             height: 55px;
             background-color: #aaa;
             font-size: 12px;
         }
         
         div.hide {
             display: none;
         }        
      </style>
      <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
      <script type="text/javascript">
         $(document).ready(function(){
            function anmateIt(){
               $("#mover").slideToggle("slow", anmateIt);
            }
            anmateIt();
            
/**
            
过滤
eq(index|-index)         选出索引为index 的元素(0开始)  ,负号表示可以倒着选(-1开)
first()                选出第一个元素
last()                    选出最后一个元素
hasClass(class)          是否含有class值
filter(expr|obj|ele|fn)    按照表达式过滤
is(expr|obj|ele|fn)1.6*    是否满足表达式
has(expr|ele)           是否含有表达式的元素
not(expr|ele|fn)         判断一个元素是不是符合表达式
slice(start,[end])           表示从start开始选择直到end,只传递一个start表示从start开始直至结束

查找
children([expr])         查找所有子元素,传入表达式,表示满足表达式的子元素
closest(expr,[con]|obj|ele)1.6*   表示查找和当前元素最接近的元素
find(expr|obj|ele)              表示查找元素,查找的是后代元素
next([expr])               查找下一个元素
nextall([expr])             查找下面所有的元素
nextUntil([exp|ele][,fil])1.6*     查找相邻相邻元素一致到结束
parent([expr])                 返回父元素
parents([expr])             返回所有祖先元素
parentsUntil([exp|ele][,fil])1.6*  返回所有祖先元素直到满足表达式为止
prev([expr])               返回之前的那个元素
prevall([expr])             返回之前所有的兄弟元素
prevUntil([exp|ele][,fil])1.6*     返回之前所有兄弟元素直到满足表达式为止
siblings([expr])            返回满足表达式的同辈元素

串联
add(expr|ele|html|obj[,con])   并联关系。选择当前的元素和add条件中的元素,返回的是这些元素的集合
andSelf()                 表示包括自己 $("div").find("p").andSelf().css();   不常用    
contents()                    查找匹配元素内部所有的子节点(包括文本节点)。   :contains('')                
end()                    将匹配的元素列表变为前一次的状态  $("div").find("p").end(); 不常用

*/
            
            //(1)eq()  选择索引值为等于 3 的 div 元素
            $("#btn1").click(function(){
               //eq(index)  选出索引为index的元素  0
               //1、index为正数   从0开始往下找
               //2、index为负数  -1开始  --》倒数第一个   -2--》倒数第二个
               $("div").eq(3).css("background-color","#bfa");
               //
               
            });
            //(2)first()选择第一个 div 元素
             $("#btn2").click(function(){
                //first()   选取第一个元素
               $("div").first().css("background-color","#bfa");
            });
            
            //(3)last()选择最后一个 div 元素
            $("#btn3").click(function(){
               //last()  选取最后一个元素
               $("div").last().css("background-color","#bfa");
            });
            //(4)filter()在div中选择索引为偶数的
            $("#btn4").click(function(){
               //filter()  过滤   传入的是选择器字符串
               $("div").filter(":even").css("background-color","#bfa");
            });
             //(5)is()判断#one是否为:empty或:parent
            //is用来检测jq对象是否符合指定的选择器
            $("#btn5").click(function(){
               //is()  判断是否符合指定的选择器   传入选择器字符串
               /* var flag = $("#two").is("#one");
               alert(flag); */
               //alert($("#one").is(":empty"));
               alert($("div.one:eq(2)>:last").is(":empty"));
            });
            
            //(6)has()选择div中包含.mini的
            $("#btn6").click(function(){
               //has(selector)  选择器字符串    是否包含selector
               $("div").has(".mini").css("background-color","#bfa");
            });
            //(7)not()选择div中class不为one的
            $("#btn7").click(function(){
               //not(selector)  选择不是selector的元素
               $("div").not(".one").css("background-color","#bfa");
            });
            //(8)children()在body中选择所有class为one的div子元素
            $("#btn8").click(function(){
               //children()  选出所有的子元素
               $("body").children("div.one").css("background-color","#bfa");
            });
            
            
            //(9)find()在body中选择所有class为mini的div后代元素
            $("#btn9").click(function(){
               //find()  选出所有的后代元素
               $("body").find("div.mini").css("background-color","#bfa");
            });
            //(10)next() #one的下一个div
            $("#btn10").click(function(){
               //next()  选择下一个兄弟元素
               $("#one").next().css("background-color","#bfa");
            });
            //(11)nextAll() #one后面所有的span元素
            $("#btn11").click(function(){
               //nextAll()   选出后面所有的元素
               $("#one").nextAll("span").css("background-color","#bfa");
            });
            //(12)nextUntil() #one和span之间的元素
            $("#btn12").click(function(){
               //
               $("#one").nextUntil("span").css("background-color","#bfa")
            });
            //(13)parent() .mini的父元素
            $("#btn13").click(function(){
               $(".mini").parent().css("background-color","#bfa");
            });
            //(14)prev() #two的上一个div
            $("#btn14").click(function(){
               //prev()  
               $("#two").prev("div").css("background-color","#bfa")
            });
            //(15)prevAll() span前面所有的div
            $("#btn15").click(function(){
               //prevAll()   选出前面所有的元素
               $("span").prevAll("div").css("background-color","#bfa")
            });
            //(16)prevUntil() span向前直到#one的元素
            $("#btn16").click(function(){
               //prevUntil(exp)   找到之前所有的兄弟元素直到找到exp停止
               $("span").prevUntil("#one").css("background-color","#bfa")
            });
            //(17)siblings() #two的所有兄弟元素
            $("#btn17").click(function(){
               //siblings()    找到所有的兄弟元素,包括前面的和后面的
               $("#two").siblings().css("background-color","#bfa")
            });
            
            
            //(18)add()选择所有的 span 元素和id为two的元素
            $("#btn18").click(function(){
               //$("span , #two").css("background-color","#bfa"); 
               //add()相当于向数组中添加对象,他会按照元素在文档中的顺序进行添加
               //jQuery方法的链式调用,之所以可以使用链式调用,是因为大部的jquery方法,都会返回调用方法的对象
               
               //add()  合并多个选择器的结果
               
               ////   $("span,#two,.mini,#one")
               $("span").add("#two")
                     .add(".mini").add("#one").css("background-color","#bfa");
               
            });
            
            //19.andSelf()
            $("#btn19").click(function(){
               //andSelf()  包括自己
               $("#two").children(".mini").andSelf().css("background-color","#bfa");
               
            });
            
            //20.end()
            $("#btn20").click(function(){
               //end()  回到上一步状态
               $("#two").find("div").find("b").end().end().css("background-color","#bfa");       
            }); /**/
         });
         
         
      </script>
   </head>
   <body>    
      <input type="button" value="eq()选择索引值为等于 3 的 div 元素" id="btn1" />
      <input type="button" value="first()选择第一个 div 元素" id="btn2" />
      <input type="button" value="last()选择最后一个 div 元素" id="btn3" />
      <input type="button" value="filter()在div中选择索引为偶数的" id="btn4" />
      <input type="button" value="is()判断#one是否为:empty或:parent" id="btn5" />
      <input type="button" value="has()选择div中包含.mini的" id="btn6" />
      <input type="button" value="not()选择div中class不为one的" id="btn7" />
      <input type="button" value="children()在body中选择所有class为one的div子元素" id="btn8" />
      <input type="button" value="find()在body中选择所有class为mini的div后代元素" id="btn9" />
      <input type="button" value="next()#one的下一个div" id="btn10" />
      <input type="button" value="nextAll()#one后面所有的span元素" id="btn11" />
      <input type="button" value="nextUntil()#one和span之间的元素" id="btn12" />
      <input type="button" value="parent().mini的父元素" id="btn13" />
      <input type="button" value="prev()#two的上一个div" id="btn14" />
      <input type="button" value="prevAll()span前面所有的div" id="btn15" />
      <input type="button" value="prevUntil()span向前直到#one的元素" id="btn16" />
      <input type="button" value="siblings()#two的所有兄弟元素" id="btn17" />
      <input type="button" value="add()选择所有的 span 元素和id为two的元素" id="btn18" />
      <input type="button" value="addSelf(),选出#two 下面的.mini的元素,并改变他们所有颜色" id="btn19" />
      <input type="button" value="end(),选出#two 下面的.mini的元素,改变变#two的颜色" id="btn20" />
      
      <h3>基本选择器.</h3>
      <br /><br />
      文本框<input type="text" name="account" disabled="disabled" />
      <br><br>
      <div class="one" id="one">
         id  one,class  one 的div
         <div class="mini">class为mini</div>
      </div>
      <div class="one" id="two" title="test">
         id为two,class为one,title为test的div
         <div class="mini" title="other"><b>class为mini,title为other</b></div>
         <div class="mini" title="test">class为mini,title为test</div>
      </div>
      
      <div class="one">
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini"></div>
      </div>
      <div class="one">
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini" title="tesst">class为mini,title为tesst</div>
      </div>
      <div style="display:none;" class="none">style的display为"none"的div</div>
      <div class="hide">class为"hide"的div</div>
      <span id="span1">^^span元素 111^^</span>
      <div>
         包含input的type为"hidden"的div<input type="hidden" size="8">
      </div>
      <span id="span2">^^span元素 222^^</span>
      <div id="mover">正在执行动画的div元素.</div>
   </body>
</html>

注意:要匹配文本节点,得使用contents()方法。