概述jQuery的元素筛选

2020-05-27 18:00:36易采站长站整理

/********************  串联 *******************************/

二十四、siblings()  获取指定元素的兄弟元素,不分前后

    语法:siblings(expr);  expr为筛选条件,不符合条件的不会选中


  $(".p2").siblings();    
  <div>
    <p>我是第一个P</p>        //会被选中,我是.p2的兄弟元素
    <p class="p2">我是第二个P</p>  //不会被选中,我是自己
    <p>我是第三个P</p>        //会被选中,我是.p2的兄弟元素
    <p class="p4">我是第四个P</p>  //会被选中,我是.p2的兄弟元素
  </div>

二十五、add()  将选中的元素添加到jQuery对象集合中

    add(expr|elements|html|jQueryObject)  expr:选择器表达式 | DOM表达式 | Html片段 | jQuery对象,将jQuery对象集合一起方便操作;


  $(".p2").add("span").css("background-color","red");    
  <div>
    <p>我是第一个P</p>        
    <p class="p2">我是第二个P</p>  //会变红
    <p>我是第三个P</p>        
    <p class="p4">我是第四个P</p>  
  </div>
  <span>我是一个span</span>      //会变红

二十六、andSelf()  将自身加到选中的jQuery集合中,以方便一次性操作

    andSelf()  此方法无参数


  $(".p2").nextAll().andSelf().css("background-color","red");
  <div>
    <p>我是第一个P</p>        
    <p class="p2">我是第二个P</p>  //会变红,这就是andSelf()的效果
    <p>我是第三个P</p>        //会变红
    <p class="p4">我是第四个P</p>  //会变红
  </div>

二十七、end()      将改变当前选择器选中的操作回退为上一个状态。

    end()   此方法没有参数


  $(".p2").next().end().css("background-color","red");
  <div>
    <p>我是第一个P</p>        
    <p class="p2">我是第二个P</p>  //会变红,这就end()的效果
    <p>我是第三个P</p>        //不会变红,尽管next()方法之后选中的是这一个,但是由于被end()方法回退了因此是上一个。
    <p class="p4">我是第四个P</p>