jQuery中的子（后代）元素过滤选择器（四、六）：nth-child()、first-child、last-child、only-child
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>子(后代)元素过滤选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<style type="text/css">
body{
font-family: "Microsoft YaHei"
}
.cGreen{color: #4CA902}
.cPink{color: #ED4A9F}
.cBlue{color: #0092E7}
.cCyan{color: #01A6A2}
.cYellow{color: #DCA112}
.cRed{color: #B7103B}
.cPurple{color: #792F7C}
.cBlack{color: #110F10}
.cOrange{color: #FF4500}
.cGray{color: #A9A9A9}
.hide{display: none;}
span {
float:left;
}
ul{
}
ul li {
width:120px;
float: left;
}
</style>
<script type="text/javascript">
/*
说是子元素过滤选择器，我觉得是后代元素过滤选择器
更准确。
子元素过滤选择器，对层级中的后代选择器做了加强。
为什么加强的是后代不是子元素选择器呢？
因为我们在使用层次选择器的时候，可以看出来，
层次选择器中，子元素选择器只能涉及一层，比后代选择器
范围小多了，后代选择器范围可以到全部。
所以虽然名字是子元素过滤选择器，其实是对后代选择器的加强。
可以对选择出来的后代元素再通过冒号的形式进行选择。
选择形式：
(1).精确到递几个孩子：nth-child()
1.其中的参数可以是数字(从1开始)
2.可以是奇数add、偶数even的表示
3.可以n的倍数。(注意必须是n，不能是其他的x、y之类的是约束好了的)
也可以倍数+1 ... m 3n+1、3n+2 ...
(2).第一个孩子：first-child
(3).最后一个孩子：last-child
(4).唯一一个孩子：only-child
*/
$(document).ready(function(){
// <input type="button" id="btn1" value=":nth-child()选取ul的第二个(从1开始)li元素">
$("#btn1").click(function(){
$("ul li:nth-child(2)").addClass("cGreen");
});
// <input type="button" id="btn2" value=":nth-child()选取ul的第奇数个li元素">
$("#btn2").click(function(){
$("ul li:nth-child(odd)").addClass("cPink");
});
// <input type="button" id="btn3" value=":nth-child()选取ul的第3n(n从1开始)个li元素">
$("#btn3").click(function(){
$("ul li:nth-child(3n)").addClass("cBlue"); // 也可以倍数+1 ... m 3n+1、3n+2 ...
});
// <input type="button" id="btn4" value=":first-child选取ul第一个li元素">
$("#btn4").click(function(){
$("ul li:first-child").addClass("cCyan");
});
// <input type="button" id="btn5" value=":last-child选取ul最后一个li元素">
$("#btn5").click(function(){
$("ul li:last-child").addClass("cYellow");
});
// <input type="button" id="btn6" value=":only-child选取ul中只有唯一li元素">
$("#btn6").click(function(){
$("ul li:only-child").addClass("cRed");
});
});
</script>
</head>
<body>
<span>中国城市：</span><br>
<ul id="chn">
<li id="bj">北京</li>
<li id="sh">上海</li>
<li id="gz">广州</li>
<li id="sz">深圳</li>
<li id="hk">香港</li>
</ul>
<br><br>
<span>美国城市：</span><br>
<ul id="usa">
<li id="wst">华盛顿特区</li>
<li id="ny">纽约</li>
<li id="la">洛杉矶</li>
<li id="scg">芝加哥</li>
</ul>
<br><br>
<span>德国城市：</span><br>
<ul id="ger">
<li id="mnh">慕尼黑</li>
</ul>
<div style="clear:both;"></div>
<br><br>
<hr>
<input type="button" id="btn1" value=":nth-child()选取ul的第二个(从1开始)li元素">
<input type="button" id="btn2" value=":nth-child()选取ul的第奇数个li元素">
<input type="button" id="btn3" value=":nth-child()选取ul的第3n(n从1开始)个li元素">
<input type="button" id="btn4" value=":first-child选取ul第一个li元素">
<input type="button" id="btn5" value=":last-child选取ul最后一个li元素">
<input type="button" id="btn6" value=":only-child选取ul中只有唯一li元素">
</body>
</html>手机扫一扫
移动阅读更方便
你可能感兴趣的文章