jQuery中的基本的选择器学习(补充版)

先看整体代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>05jQuery中的基本的选择器学习C</title>
		<script type="text/javascript" src="js/jquery-1.9.1.js" charset="UTF-8"></script>
		<style>
			div{
				width: 300px;
				height: 300px;
				border: 2px solid darkred;
			}
		
		</style>
		
		<script>
		$(function(){
			$("ul li:first").css("color","aqua");只有第一行变色
			$("ul li").first().css("color","aqua");只有第一行变色
			
			$("ul li:last").css("color","aqua");只有最后一行变色
			$("ul li").first().css("color","aqua");只有最后一行变色
			
			$("ul li:odd").css("color","aqua");//只有奇数行变色，从下标0开始
			$("ul li:even").css("color","royalblue");//只有偶数行变色,从下标0开始
	
			$("ul li:eq(3)").css("color","aqua");按照索引下标从0开始，第三个元素变色
			
			/*************子选择器********************/
			$("ul li:first-child").css("color","aqua");将所有列表的第一个元素变色
			$("ul li:last-child").css("color","aqua");将所有列表的最后一个一个元素变色
			$("ul li:only-child").css("color","aqua");将只有一个元素的改变
			$("ul li:nth-child(2)").css("color","aqua");将所有列表的第二个元素变色
		})
			
		</script>
	</head>
	<body>
		<div>
			<ul>
				<li>列表1</li>
				<li>列表2</li>
				<li>列表3</li>
				<li>列表4</li>
			</ul>
			<ul>
				<li>列表1</li>
				<li>列表2</li>
				
			</ul>
			<ul>
				<li>列表1</li>
			</ul>
		</div>
	</body>
</html>

我们对jQuery操作逐行分析：

1.将ul中的所有元素看做一个整体，对其进行整体操作（这是jQuery的俩种操作方式）：

$("ul li:first").css("color","aqua");
$("ul li").first().css("color","aqua");

所以只有第一行会变色：

 

2.和第一个相似，是将最后一个变色：

$("ul li:last").css("color","aqua");
$("ul li").first().css("color","aqua");

 

3.奇偶数行变色，可以认为是隔行变色（索引下标为0开始的）：

$("ul li:odd").css("color","aqua");
$("ul li:even").css("color","royalblue");

4. 按照索引的方式去将元素改变颜色：

$("ul li:eq(3)").css("color","aqua");

由此可见，这个方法，是以索引下标为0开始的。

 

这些都是将ul看做是一个整体，我们的子选择器将是li与li之间分开的。

$("ul li:first-child").css("color","aqua");

 

$("ul li:last-child").css("color","aqua");

 

 

$("ul li:only-child").css("color","aqua");

$("ul li:nth-child(2)").css("color","aqua");

 

 

 

 

 

 

 

 

 

 

posted @ 2019-12-11 08:56  sakura-yxf  阅读(83)  评论(0)    收藏  举报