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");
});
网友评论