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

最新推荐文章于 2024-01-14 11:54:30 发布

有园人

最新推荐文章于 2024-01-14 11:54:30 发布

阅读量109

点赞数

分类专栏：网页编程和设计文章标签： jQuery中的基本的选择器学习(补充版)

本文链接：https://blog.csdn.net/qq_42031653/article/details/99685323

版权

网页编程和设计专栏收录该内容

33 篇文章 0 订阅

订阅专栏

先看整体代码：

<!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");

有园人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery中的基本的选择器学习(补充版)

先看整体代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>05jQuery中的基本的选择器学习C</title> <script type="text/javascript" src="js/jquery-1.9.1.js" ...
复制链接

扫一扫

专栏目录