007-JQuery 筛选

 

过滤

  •  eq(index|-index) ：获取第N个元素
  •  first() ：获取第一个元素
  •  last() ：获取最后一个元素
  •  hasClass(class) ：判断是否有元素拥有指定的类
  •  filter(expr|obj|ele|fn) ：筛选出指定表达式匹配的元素集合
  •  is(expr|obj|ele|fn) ：判断是否有元素满足指定的表达式
  •  map(callback) ：所有指定元素的列表，callback是给每个元素执行的函数
  •  has(expr|ele) ：筛选拥有指定后代的元素
  •  not(expr|ele|fn) ：筛选不满足表达式的所有元素
  •  slice(start, [end]) ：选取从第几个到第几个的子集

示例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>过滤</title>
 6     <script src="js/jquery-1.8.3.min.js"></script>
 7     <style>
 8 
 9     </style>
10 </head>
11 <body>
12     <p>line1</p>
13     <p id="line2">line2</p>
14     <p class="line3">line3</p>
15     <p><b>line4</b></p>
16     <p>line5</p>
17     <button>按钮</button>
18     <script>
19         // 第二个p标签
20         $("p:eq(1)").css("color","red");
21         // 倒数第二个p标签
22         $("p:eq(-2)").css("color","red");
23         // 第一个p标签
24         $("p:first").css("color","blue");
25         // 最后一个p标签
26         $("p:last").css("color","blue");
27 
28         // 是否含有class=line3的p标签
29         alert($("p").hasClass("line3"));
30         // 含有class=line3的p标签
31         $("p").filter(".line3").css("background-color","#aaa");
32         // 是否含有id=line2的p标签，也可以查找class等属性
33         alert($("p").is("#line2"));
34 
35         // 把匹配到的元素依次遍历
36         var str = $("p").map(function () {
37            return $(this).html();
38         }).get().join();
39         alert(str); // 结果：line1,line2,line3,line4,line5
40 
41         // has
42         $("p").has("b").css("background","#aaa");
43         // not
44         $("p").not("#line2").css("font-weight","800");
45         // slice 选取从第几个到第几个的子集
46         $("p").slice(0,2).css("font-style","italic");
47 
48     </script>
49 </body>
50 </html>
View Code

查找

  •  children([expr]) ：获取所有子元素
  •  closest(expr,[context]|object|element) ：逐级向上查找符合条件的元素
  •  find(expr|obj|ele) ：查找满足条件的子元素
  •  next([expr]) ：查找满足条件的下一个兄弟元素
  •  nextAll([expr]) ：查找满足条件的下面的所有兄弟元素
  •  nextUntil([exp|ele][,fil]) ：查找满足条件的下面的所有兄弟元素，直到某一个为止
  •  prev([expr]) ：查找满足条件的前一个兄弟元素
  •  prevAll([expr]) ：查找满足条件的前面的所有兄弟元素
  •  prevUntil([exp|ele][,fil]) ：查找满足条件的前面的所有兄弟元素，直到某一个为止
  •  parent([expr]) ：查找父级元素
  •  parents([expr]) ：查找满足条件的祖先元素
  •  parentsUntil([expr|element][,filter]) ：查找祖先元素，直到某一个为止

示例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>查找</title>
 6     <script src="js/jquery-1.8.3.min.js"></script>
 7 </head>
 8 <body>
 9     <p>line0</p>
10     <div id="box">
11         <span>
12             <p>line1</p>
13             <p>line2</p>
14             <p class="line3">line3</p>
15             <p>line4</p>
16             <p class="line5">line5</p>
17             <p>line6</p>
18         </span>
19     </div>
20     <p>line7</p>
21     <script>
22         // span标签的所有子元素
23         $("span").children().css("font-size","12px");
24         // line2 的祖先级div标签
25         $("p:eq(2)").closest("div").css("border","1px solid #ccc");
26         // span的指定子元素
27         $("span").find(".line3").css("color","red");
28         // line3的下一个兄弟元素
29         $(".line3").next().css("color","blue");
30         // line3的下面所有兄弟元素
31         $(".line3").nextAll().css("color","blue");
32         // line3的下面直到line5的所有兄弟元素
33         $(".line3").nextUntil(".line5").css("font-weight","800");
34         // line3的所有兄弟元素
35         $(".line3").siblings().css("font-style","italic");
36 
37         // line3的父级元素
38         alert($(".line3").parent().html());
39 
40     </script>
41 </body>
42 </html>
View Code

 

串联

  •  add(expr|ele|html|obj[,con]) ：把与表达式匹配的元素添加到jQuery对象中
  •  andSelf() ：加入先前所选的加入当前元素中
  •  contents() ：查找匹配元素内部所有的子节点（包括文本节点）
  •  end() ：将匹配的元素列表变为前一次的状态
posted @ 2017-11-08 15:02  agmj  阅读(198)  评论(0)  编辑  收藏  举报