概述jQuery的元素筛选(2)

  $($("p").first().is(".p2"))   {     alert("不会弹出,因为第一个P的class不等于p2");    }   <div>     <p>我是第一个P</p>     <p>我是第二个P</p>  //我会被选中,我的class="p2"     <p>我是第三个P</p>     <p>我是第四个P</p>   </div> 

七、map()

八、has()  筛选出包含指定子元素的元素

  语法:has(expr|ele)  expr:选择表达式 | DOM元素选择

  $("div").has("p");   <div>                 //本div会被选中,因为该div含有p子元素     <p>我是第一个P</p>     <p>我是第二个P</p>     <p>我是第三个P</p>     <p>我是第四个P</p>   </div>   <div>     <span>我是一个span</spam>   </div>

九、not()  排除能够被参数中匹配的元素

   语法:not(expr|ele|fn)  expr:选择表达式 | DOM元素选择 | fn的作用还不清楚

  $("p").not(".p2");   <div>     <p>我是第一个P</p>        //会被选中,没有class=p2     <p>我是第二个P</p>  //不会被选中,因为有class=p2被not(".p2")排除了     <p>我是第三个P</p>        //会被选中,没有class=p2     <p>我是第四个P</p>         //会被选中,没有class=p2   </div>  

十、slice()  从指定索引开始,截取指定个数的元素

   语法:slice(start, [end])   start位置, end可选,结束位置,不包含结束位置那个。如果不指定,则匹配到最后一个。

  $("p").slice(1,3)   <div>     <p>我是第一个P</p>        //不会被选中,我索引为0     <p>我是第二个P</p>  //会被选中,我索引为1     <p>我是第三个P</p>        //会被选中,我索引为2     <p>我是第四个P</p>         //不会被选中,虽然我的索引为3,但是不包括我   </div>

********************** 筛选 *********************************

十一、children()  筛选获取指定元素的资源

   语法:children(expr);  获取指定元素的资源,expr为子元素筛选条件

  $("div").children(".p2");     <div>     <p>我是第一个P</p>        //不会被选中,虽然我是div的子元素,但是我没class=p2     <p>我是第二个P</p>  //会被选中,我既是p的子元素,又有class=p2     <p>我是第三个P</p>        //不会被选中,虽然我是div的子元素,但是我没class=p2     <p>我是第四个P</p>         //不会被选中,虽然我是div的子元素,但是我没class=p2   </div>

十二、closest()  从当前元素开始,返回最先匹配到的符合条件的父元素

  $("span").closest("p","div");   <div>                   //不会被选中,被P抢了先机     <p>我是第一个P            //P会被选中,因为P符合条件,而且是最先匹配到的,虽然div也符合条件了,但是div不是最先匹配到的。因此div不会被选中。       <span>我是P里的span</span>     </p>   </div>  

十三、find()    从指定元素中查找子元素

   语法:find(expr|obj|ele)  expr:匹配表达式 | obj用于匹配的jQuery对象 | DOM元素

  $("div").find(".p2");       <div>     <p>我是第一个P</p>        //不会被选中,虽然我是div的子元素,但是我没class=p2     <p>我是第二个P</p>  //会被选中,我既是p的子元素,又有class=p2     <p>我是第三个P</p>        //不会被选中,虽然我是div的子元素,但是我没class=p2     <p>我是第四个P</p>         //不会被选中,虽然我是div的子元素,但是我没class=p2   </div>  

十四、next()    获取指定元素的下一个兄弟元素

   语法:next(expr)  expr:可选,筛选条件,如果下一个兄弟元素不符合改条件,则返回空。

  $(".p2").next();    //如果筛选改为$(".p2").next(".p4")那选中的是哪个呢?答案是:没选中任何元素,因为虽然有个class=p4的P,但它不是.p2的下一个。         <div>     <p>我是第一个P</p>             <p>我是第二个P</p>      <p>我是第三个P</p>        //我是.p2的next     <p>我是第四个P</p>   </div>  

十五、nextAll()    获取其后的所有兄弟元素

    语法:nextAll(expr)  expr:可选,筛选条件,获取其后符合expr条件的所有兄弟元素

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzzgzy.html