jQuery基础3-筛选(过滤、查找、串联)

版权声明:作者:shenroom 来源:CSDN 版权声明:本文为博主原创文章,转载请附上博文链接! https://blog.csdn.net/qq_41772754/article/details/88083015

jQuery筛选

1.过滤

     eq(index|-index)        // 获取集合中第[index]个元素,[-index]倒数。返回JQ对象
     first()                          // 获取集合中第一个元素。返回JQ对象
     last()                          // 获取集合中最后一个元素。返回JQ对象
     slice(start,[end])         // 依据位置下标,获取集合中的部分子集。返回JQ对象
     map(callback)            // 遍历集合中每个元素执行一次函数,返回新的集合
     has(expr|ele)              // 获取包含特定要求的元素(传参选择器或DOM对象)。返回JQ对象
     hasClass(class)         // 检查是否含有某个类,返回布尔值
     is(expr|obj|ele|fn)       // 检查集合中是否有符合要求的元素(传参选择器,JQ对象,DOM对象,函数),返回布尔值
     filter(expr|obj|ele|fn)   // 筛选出与指定表达式匹配的元素集合(传参选择器,JQ对象,DOM对象)。返回JQ对象
     not(expr|ele|fn)           // 删除与指定表达式匹配的元素(传参选择器,DOM对象,函数)

用法:

<html>
    <p>A</p>                           
    <p class="a">B</p>
    <p>C<span></span></p>
</html>

<script>
    $("p").eq(0).css("color", "red");            //"A"显示为红色
    $("p").first().css("color", "green");        //"A"显示为绿色
    $("p").last().css("color", "red");           //"C"显示为红色
    $("p").slice(0,2).css("color", "blue");      //"A","B"显示为蓝色 ([0]至[2],不包含[2])
    $("p").slice(0,-1).css("color", "pink");     //"A","B"显示为粉色 ([0]至倒数第一个,不包含倒数第一个)
    $("p").has("span").css("color", "blue");     //"C"显示为蓝色  (含有span元素的p)
    $("p").filter(".a").css("color", "blue");    //"B"显示为蓝色  (含有class="a"元素的p)
    $("p").not(".a").css("color", "yellow");     //"A","C"显示为黄色  (不含class="a"元素的p)

    $("p").filter(function(index) {             
        return $("span", this).length == 1;      //"C"显示为红色 (含有一个span元素的p)   
    }).css("color","red");

    $("p").not(function(){
        return $("span", this).length == 1;     //"A","B"显示为蓝色 (含span元素个数不为1的p)
    }).css("color","blue"); 

    $("p").map(function(i,d){                   //i是每个元素对应下标,d是该元素DOM对象
        return $(this).text(i+"|"+d.tagName)  
    });                                         //页面显示: 0|P 1|P 2|P

    $("p").hasClass("a");                       //返回 true  (集合中有元素的class="a")

    $("span").parent().is("p");                 //返回true   (span元素的父元素是p元素)

    $("p").is(function(){                       //返回true
        return $("span").length==1;            //集合中,包含span元素的个数是否等于1
    }); 

</script>  

2.查找

    children([expr])             // 获取子元素中匹配的元素(传参选择器)。返回JQ对象      
    find(e|o|e)                    // 获取后代元素中匹配的元素(传参选择器,JQ对象,DOM对象)。返回JQ对象
    offsetParent()               // 获取最近的定位父元素。返回JQ对象
    parent([expr])               // 获取父元素。返回JQ对象
    parents([expr])             // 获取所有祖辈元素,不包括根元素。返回JQ对象
    parentsUntil([e|e][,f])    // 获取部分祖辈元素,从这个倒那个之间的祖辈元素(由外向内)。返回JQ对象
    next([expr])                  // 获取同级下一个元素(传参选择器)。返回JQ对象。
    nextAll([expr])              // 获取同级后所有元素(传参选择器)。返回JQ对象。
    nextUntil([e|e][expr])    // 获取同级后面元素,直到遇到匹配的那个元素为止。
    prev([expr])                 // 获取同级上一个元素(传参选择器)。返回JQ对象。
    prevAll([expr])              // 获取同级前所有元素(传参选择器)。返回JQ对象。
    prevUntil([e|e][,f])        // 获取同级前面元素,直到遇到匹配的那个元素为止。
    siblings([expr])            // 获取所有同级元素,不包含自己。
    closest(e,[c|o|e)          // 1.7-jQuery 1.3新增,1.7后删除。从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素。

用法:

<html>
    <div id="a1">                                     
        <h1></h1>
        <p>A</p>
        <p>B<span>b</span></p>
        <div id="a2">
            <p>n</p>
            <span class="b">m</span>
        </div>
        <p class="a">C</p>
    </div>
</html>

<script>
    $("div").children().css("color","green");                // 全部显示绿色
    $("div").children("span,.a").css("color","red");         // "m","C"显示红色
    $("div").find("span,.a").css("color","green");           // "b","m","C"显示绿色

    $("span").parent().css("color","red");                   // "B","b","n","m"显示为红色     
    $("span").parent("p").css("color","green");              // "B","b"显示为绿色  
    $("p").parents("div").length;                            // 返回 2 
    $(".a").parents("div").length;                           // 返回 1
    $(".b").parentsUntil("#a1","#a2")[0].id;                 // 返回 a2

    $("p").next().length;                                    // 返回 3
    $("p").next("div").length;                               // 返回 1
    $("p").next("div")[0].id;                                // 返回 a2

    $("h1").nextAll().length;                                // 返回 4
    $("h1").nextAll()[0].tagName;                            // 返回 P
    $("h1").nextAll()[2].tagName;                            // 返回 DIV

</script>  

3.串联

    add(e|e|h|o[,c])        // 1.9*连接2个对象集合成一个对象集合(传参选择器,JQ对象,DOM对象,html表达式,)
    addBack(elel0)        // 1.9+将先前所选的加入当前元素中
    contents()                // 查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查找文档内容
    end()                       // 回到最近的一个"破坏性"操作之前。即,将匹配的元素列表变为前一次的状态。
    andSelf()                 // 1.8-在jQuery1.8和更高版本中应使用.addBack()代替。

用法:

<html>
    <div>
        <p></p>
        <p></p>
        <div class="a">
           <p></p>
           <span></span>
        </div>
    </div>
</html>

<script>
    $("span").add("p").length;                           //返回 4
    $("span").add($("p")).length;                        //返回 4   
     
    $("span").add("p")[3].tagName;                       //返回 SPAN  (按照html代码中顺序)
    $("p").add("span")[3].tagName;                       //返回 SPAN  

    $("span").add("<em>123</em>")[1].tagName;            //返回 EM     创建一个对象加入                $("span")集合中

    $("div").find("span").addBack().length;              //返回 3   (1个span再加上2个div)
    $("div").find("span").addBack()[2].tagName;          //返回 SPAN 
    $("div").find("span").addBack(".a").length;          //返回 2   (1个span再加上class="a"的1个div)

    $(".a").contents().not("p").wrap("<b/>");            //将 .a 子元素中非p元素节点包裹一层 b 标签

    $("iframe").contents().find("body").append("123");   //在iframe中插入"aaa"

    $("div").find("span").end();                         //即回到 $("div")
    $("div").length;                                     //返回 2
    $("div").find("span").length;                        //返回 1
    $("div").find("span").end().length;                  //返回 2

</script> 

jQuery基础1-简介、语法

jQuery基础2-选择器

jQuery基础3-筛选(过滤、查找、串联)

jQuery基础4-dom元素操作

jQuery基础5-事件

jQuery基础6-动画效果

jQuery基础7-Ajax请求

jQuery基础8-event事件对象

jQuery基础9-工具函数

jQuery基础10-延迟对象 和 回调函数

猜你喜欢

转载自blog.csdn.net/qq_41772754/article/details/88083015
今日推荐