美文网首页
Jquery 遍历函数

Jquery 遍历函数

作者: 小杰的简书 | 来源:发表于2018-07-17 11:12 被阅读0次

add()将元素添加到匹配元素的集合中

<script>
$(document).ready(function(){
    $("h1").add("p").add("span").css("background-color","yellow");
});
</script>

children()返回被选元素的所有直接子元素

<style>
.descendants *{ 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("ul").children().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="descendants">body (曾祖先节点)
    
<div style="width:500px;">div (祖先节点)
    <ul>ul (直接父节点)  
        <li>li (子节点)
            <span>span (孙节点)</span>
        </li>
    </ul>   
</div>

closest()返回被选元素的第一个祖先元素

$(document).ready(function(){
    $("span").closest("ul").css({"color":"red","border":"2px solid red"});
});

contents()返回被选元素的所有直接子元素(包含文本和注释节点)

$(document).ready(function(){
  $("button").click(function(){
    $("div").contents().filter("em").wrap("<b/>");
  });
});

each()为每个匹配元素执行函数

$("button").click(function(){
    $("li").each(function(){
        alert($(this).text())
    });
});

eq()返回带有被选元素的指定索引号的元素

$("p").eq(1).css("background-color","yellow");

filter()把匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素

$(document).ready(function(){
    $("p").filter(".intro").css("background-color","yellow");
});

find()返回被选元素的后代元素

$(document).ready(function(){
    $("ul").find("span").css({"color":"red","border":"2px solid red"});
});

first()返回被选元素的第一个元素

$(document).ready(function(){
    $("div p").first().css("background-color","yellow");
});

has()返回拥有一个或多个元素在其内的所有元素

$(document).ready(function(){
  $("p").has("span").css("background-color","yellow");
});

is()根据选择器/元素/jQuery 对象检查匹配元素集合,如果存在至少一个匹配元素,则返回 true

$(document).ready(function(){
    $("p").click(function(){
        if ($("p").parent().is("div")) {
            alert("p 的父元素是 div"); 
        }
    });
});

last()返回被选元素的最后一个元素

$(document).ready(function(){
  $("div p").last().css("background-color","yellow");
});

map()把当前匹配集合中的每个元素传递给函数,产生包含返回值的新 jQuery 对象
next()返回被选元素的后一个同级元素

$(document).ready(function(){
    $("li.start").next().css({"color":"red","border":"2px solid red"});
});

nextAll()返回被选元素之后的所有同级元素

$(document).ready(function(){
    $("li.start").nextAll().css({"color":"red","border":"2px solid red"});
});

nextUntil()返回介于两个给定参数之间的每个元素之后的所有同级元素

$(document).ready(function(){
    $("li.start").nextUntil("li.stop").css({"color":"red","border":"2px solid red"});
});

not()从匹配元素集合中移除元素

$(document).ready(function(){
    $("p").not(".intro").css("background-color","yellow");
});

offsetParent()返回第一个定位的父元素

$(document).ready(function(){
    $("button").click(function(){
        $("p").offsetParent().css("background-color","red");
    });
});

parent()返回被选元素的直接父元素

$(document).ready(function(){
    $("span").parent().css({"color":"red","border":"2px solid red"});
});

parents()返回被选元素的所有祖先元素

$(document).ready(function(){
    $("span").parents().css({"color":"red","border":"2px solid red"});
});

parentsUntil()返回介于两个给定参数之间的所有祖先元素

$(document).ready(function(){
    $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
});

prev()返回被选元素的前一个同级元素

$(document).ready(function(){
    $("li.start").prev().css({"color":"red","border":"2px solid red"});
});

prevAll()返回被选元素的前一个同级元素

$(document).ready(function(){
    $("li.start").prevAll().css({"color":"red","border":"2px solid red"});
});

preUntil()返回介于两个给定参数之间的每个元素之前的所有同级元素

$(document).ready(function(){
    $("li.start").prevUntil("li.stop").css({"color":"red","border":"2px solid red"});
});

sibings()返回被选元素的所有同级元素

$(document).ready(function(){
    $("li.start").siblings().css({"color":"red","border":"2px solid red"});
});

slice()把匹配元素集合缩减为指定范围的子集

$(document).ready(function(){
    $("p").slice(2).css("background-color","yellow");
});

相关文章

  • jQuery遍历函数

    jQuery 遍历函数jQuery 遍历函数包括了用于筛选、查找和串联元素的方法。| .add()[https:/...

  • jQuery常用方法以及ajax

    jQuery常用函数 .each(function(index,Element)) 遍历一个jQuery对象,为每...

  • Jquery 遍历函数

    add()将元素添加到匹配元素的集合中 children()返回被选元素的所有直接子元素 closest()返回被...

  • 『JavaScript专题』之jQuery通用遍历方法each的

    each介绍 jQuery 的 each 方法,作为一个通用遍历方法,可用于遍历对象和数组。 语法为: 回调函数拥...

  • 04.jQuery 遍历

    jQuery遍历 DOM:Document Object Model 文档对象模型; 通过 jQuery 遍历,可...

  • jQuery常用方法

    .each(function(index,element)):遍历一个jQuery对象,为每个匹配元素指定一个函数...

  • jQuery循环

    each() 定义和用法 jQuery.each() 函数用于遍历指定的对象和数组。 语法 $.each( obj...

  • jQuery 常用方法小结

    jQuery 常用方法小结 each方法 有了隐式迭代,为什么还要使用each函数遍历?

  • jQuery(二)

    offset audio和video each遍历jQuery对象 each遍历jQuery对象 了解date 多...

  • jquery 遍历

    jquery 遍历

网友评论

      本文标题:Jquery 遍历函数

      本文链接:https://www.haomeiwen.com/subject/ytrwpftx.html