示例 1 : 第一个 最后一个 第几个
<script src="http://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>
<div >
<span>Hello JQuery 5</span>
</div>
<div >
<span>Hello JQuery 6</span>
</div>
示例 2 : 父 祖先
<script src="http://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>
示例 3 : 儿子 后代
<script src="http://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>
示例 4 : 同级
<script src="http://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>