|
|
|
示例 2 : 父 祖先 示例 3 : 儿子 后代 示例 4 : 同级
首先通过 $("div") 选择了多个div元素，接下来做进一步的筛选
first() 第1个元素 last() 最后一个元素 eq(num) 第num个元素 注: num基0 <script src="https://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("div").first().toggleClass("pink");
});
$("#b2").click(function(){
$("div").last().toggleClass("pink");
});
$("#b3").click(function(){
$("div").eq(4).toggleClass("pink");
});
});
</script>
<button id="b1">切换第1个div背景色</button>
<button id="b2">切换最后1个div背景色</button>
<button id="b3">切换第5个div背景色</button>
<br>
<br>
<style>
.pink{
background-color:pink;
}
</style>
<div>
<span>Hello JQuery 1</span>
</div>
<div >
<span>Hello JQuery 2</span>
</div>
<div >
<span>Hello JQuery 3</span>
</div>
<div >
<span>Hello JQuery 4</span>
</div>
<div >
<span>Hello JQuery 5</span>
</div>
<div >
<span>Hello JQuery 6</span>
</div>
parent() 选取最近的一个父元素
parents() 选取所有的祖先元素 <script src="https://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("#currentDiv").parent().toggleClass("b");
});
$("#b2").click(function(){
$("#currentDiv").parents().toggleClass("b");
});
});
</script>
<style>
div{
padding:20px;
}
div#grandParentDiv{
background-color:pink;
}
div#parentDiv{
background-color:green;
}
div#currentDiv{
background-color:red;
}
.b{
border: 2px solid black;
}
</style>
<button id="b1">改变parent()的边框</button>
<button id="b2">改变parents()的边框</button>
<div id="grandParentDiv" >
祖先元素
<div id="parentDiv">
父元素
<div id="currentDiv">当前元素</div>
</div>
</div>
children(): 筛选出儿子元素 (紧挨着的子元素)
find(selector): 筛选出后代元素 注: find() 必须使用参数 selector <script src="https://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("#currentDiv").children().toggleClass("b");
});
$("#b2").click(function(){
$("#currentDiv").find("div").toggleClass("b");
});
});
</script>
<style>
div{
padding:20px;
}
div.grandChildrenDiv{
background-color:pink;
}
div.childrenDiv{
background-color:green;
margin:10px;
}
div#currentDiv{
background-color:red;
}
.b{
border: 2px solid black;
}
</style>
<button id="b1">改变children()的边框</button>
<button id="b2">改变find()的边框</button>
<div id="currentDiv" >
当前元素
<div class="childrenDiv">
儿子元素1
<div class="grandChildrenDiv">后代元素n</div>
</div>
<div class="childrenDiv">
儿子元素2
<div class="grandChildrenDiv">后代元素n</div>
</div>
</div>
siblings(): 同级(同胞)元素
<script src="https://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("#currentDiv").siblings().toggleClass("b");
});
});
</script>
<style>
div{
padding:20px;
background-color:pink;
margin:10px;
}
div#parentDiv{
background-color:green;
}
div#currentDiv{
background-color:red;
}
.b{
border: 2px solid black;
}
</style>
<button id="b1">给同级加上边框</button>
<div id="parentDiv" >
父元素
<div id="currentDiv">
当前元素
</div>
<div >
同级元素
</div>
<div >
同级元素
</div>
</div>
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2020-06-29
布局怎么是这样的
2019-09-28
find 后代属性怎么指定所有的后代！还是一定的指定某个元素的所有后代
2017-06-21
好像我之前遇到有个next，那个是同级的下一个意思吗
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
