子元素伪类选择器,就是选择某一个元素下面的子元素的方式。选择子元素,在jQuery中是很常用的操作。jQuery为我们提供了大量选择子元素的方式,使得我们操作元素更加的方便快捷。 在jQuery中,子元素伪类选择器分为2大类。 一、第1类子元素伪类选择器子元素伪类选择器(1)选择器 | 说明 |
---|
:first-child | 选择父元素的第1个子元素 | :last-child | 选择父元素的最后1个子元素 | :nth-child(n) | 选择父元素下的第n个元素或奇偶元素,n的值为“整数|odd|even” | :only-child | 选择父元素中唯一的子元素(该父元素只有一个子元素) | 下面我们通过几个实例,来让大家深刻地理解这些选择器。 举例: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!DOCTYPE html>
<head>
<title></title>
<style type= "text/css" >
*{padding:0;margin:0;}
ul
{
display:inline-block;
width:200px;
list-style-type:none;
}
li{height:20px;}
</style>
<script type= "text/javascript" src= "jquery-1.12.0.min.js" ></script>
<script type= "text/javascript" >
$( function () {
$( "ul li:first" ).css( "background-color" , "red" );
$( "ul li:nth-child(2)" ).css( "background-color" , "orange" );
$( "ul li:nth-child(3)" ).css( "background-color" , "yellow" );
$( "ul li:nth-child(4)" ).css( "background-color" , "green" );
$( "ul li:last" ).css( "background-color" , "blue" );
})
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
|
在浏览器预览效果如下: 分析: $("ul li:first")表示选择ul元素下的第1个li元素。其实$("ul li:first")也等价于$("ul li:nth-child(1)")。$("ul li:last")表示选择ul元素下的最后一个元素,在这个例子中也等价于$("ul li:nth-child(5)")。 没有接触子元素伪类选择器的同学,如果要操作某一个元素的子元素,往往都是给该子元素添加一个id或者class。但是这样会导致id或class泛滥成灾,影响HTML结构,使得代码难以维护。不过有了子元素伪类选择器,我们可以轻松地进行选择操作。 学过CSS3的小伙伴就会问了,上面的效果用CSS操作岂不是来得更简单些?废话,当然是啦。大家在后面的学习中,特别是入门阶段的实例,很多时候我们重在讲解知识概念,而不会在乎哪个方法更好。如果实例能够帮助大家理解该知识点,目的就达到了。对于知识的实践部分,我们都会在进阶教程都会介绍,大家不用担心。此外,关于CSS3的学习,大家可以关注我们的CSS3教程。 举例: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!DOCTYPE html>
<head>
<title></title>
<style type= "text/css" >
*{padding:0;margin:0;}
ul
{
display:inline-block;
width:200px;
list-style-type:none;
}
li{height:20px;}
</style>
<script type= "text/javascript" src= "jquery-1.12.0.min.js" ></script>
<script type= "text/javascript" >
$( function () {
//设置奇数列的背景颜色
$( "ul li:nth-child(odd)" ).css( "background-color" , "red" );
//设置偶数列的背景颜色
$( "ul li:nth-child(even)" ).css( "background-color" , "red" );
})
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
|
在浏览器预览效果如下: 分析: $("ul li:nth-child(odd)")表示选择ul元素下奇数的li元素,$("ul li:nth-child(even)")表示选择ul元素下偶数的li元素。 二、第2类子元素伪类选择器子元素伪类选择器(2)选择器 | 说明 |
---|
:first-of-type | 选择同元素类型的第1个同级兄弟元素 | :last-of-type | 选择同元素类型的最后1个同级兄弟元素 | :nth-of-type | 选择同元素类型的第n个同级兄弟元素,n的值可以是“整数|odd|even” | :only-of-type | 匹配父元素中特定类型的唯一子元素(但是父元素可以有多个子元素) | 对于这些选择器,我们一定要结合实例来理解其定义。其实,这2类子元素伪类选择器在形式上非常相似的,但是却有着本质上的区别。 “第1类选择器不分元素类型,第2类选择器区分元素类型。”大家一定要记住这句话,对于你区分和理解这2类选择器极其重要。除此之外,我们仔细观察会发现,第2类选择器的命名上都有一个“type”(元素类型),这还给我们带来了一个记忆小技巧。 下面我们通过具体实例,来帮助大家真正去理解这2类子元素伪类选择器。 1、:first-child和:first-of-type1 2 3 4 5 6 | <div>
<h1></h1>
<p></p>
<span></span>
<span></span>
</div>
|
(1):first-childh1:first-child:选择的是h1元素,因为h1元素是div的第1个子元素。 p:first-child:选择不到任何元素,因为p并不是div的第1个子元素,而是div的第2个子元素。 span:first-child:选择不到任何元素,因为span并不是div的第1个子元素,而是div的第3个子元素; (2):first-of-typeh1: first-of-type:选择的是h1元素,因为h1元素是div中所有h1元素中的第1个h1元素,事实上也只有一个为h1的子元素。 p: first-of-type:选择的是p元素,因为p元素是div中所有p元素中的第1个p元素,事实上也只有一个为p的子元素。 span: first-of-type:选择的是id="first"的span元素,因为在div元素中有2个span元素,这里我们选择的是两个span中的第1个。 总结: ①“:first-child”是选择父元素下的第1个子元素(不区分元素类型),而“:first-of-type”是选择父元素下某个元素类型的第1个子元素(区分元素类型); ②“:last-child”和“:last-of-type”、“nth-child(n)”和“:nth-of-type(n)”的使用原理跟“:first-child”和“:first-of-type”是一样的,大家试着想一下另外几个用在这个例子上的区别。 2、:only-child和:only-of-child在“:only-child选择器”中,父元素是只有一个子元素的。但是在“:only-of-type选择器”中,却可以有多个子元素。“:only-of-type”相对“:only-child”来说,只是多了一个type(元素类型)的限制。 举例: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html>
<head>
<title></title>
<style type= "text/css" >
/*去除所有元素默认外边距以及内边距*/
*{padding:0;margin:0;}
</style>
<script type= "text/javascript" src= "jquery-1.12.0.min.js" ></script>
<script type= "text/javascript" >
$( function () {
$( "div p:only-child" ).css( "background-color" , "red" );
})
</script>
</head>
<body>
<div>
<p>这是一个段落</p>
</div>
<div>
<p>这是一个段落</p>
<span>这是一个span</span>
</div>
</body>
</html>
|
在浏览器预览效果如下: 分析: 对于“:only-child选择器”来说,其父元素下面只能有一个子元素。在这个例子中,第1个div元素内部只有一个子元素,因此被选中。第2个div元素有2个子元素(p和span),因此没有被选中。 当我们把$("div p:only-child")改为$("div p:only-of-type")时,在浏览器预览效果如下,大家仔细琢磨一下原因。
|