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>line1p>
13     <p id="line2">line2p>
14     <p class="line3">line3p>
15     <p><b>line4b>p>
16     <p>line5p>
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>line0p>
10     <div id="box">
11         <span>
12             <p>line1p>
13             <p>line2p>
14             <p class="line3">line3p>
15             <p>line4p>
16             <p class="line5">line5p>
17             <p>line6p>
18         span>
19     div>
20     <p>line7p>
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() :将匹配的元素列表变为前一次的状态

转载于:https://www.cnblogs.com/agmj117/p/7804113.html

你可能感兴趣的:(007-JQuery 筛选)