Jquery 遍历函数

2018-07-17 本文已影响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 遍历函数

猜你喜欢

热点阅读