23.2JQ 选择器

最新推荐文章于 2024-07-19 15:50:46 发布

快乐的小毛毛虫

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量34

点赞数

分类专栏：前端文章标签： css jquery html5

本文链接：https://blog.csdn.net/qq_45689826/article/details/120058000

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width:130px;
				height:220px;
				border : 1px solid red;
			}
		</style>
		<script src = "./js/jquery.js" type = "text/javascript" charset="UTF-8"></script>
		<script>
			$(function(){
				//获得第一行
				// $("ul li:first").css("background-color","red");
				// $("ul li").first().css("background-color","red");
						
				//获得索引是奇数 odd 或者偶数 even
				// $("ul li: odd").css("background-color","red");
				
				//获得索引下标为3的对象 索引从零开始
				// $("ul li:eq(2)").css("background-color","red");
				
				//获得大于指定索引下标的元素gt（） 小于lt（）
				// $("ul li:gt(2)").css("background-color","red");
				
				/****************子选择器************************/
				$("ul li:nth-child(1)").css("background-color","red");
				$("ul li:first-child").css("background-color","red");
				$("ul li:only-child").css("background-color","red");
			})
		</script>
	</head>
	<body>
		<div>
			<ul>
				<li>1</li>
				<li>2</li>
				<li>22</li>
			</ul>
			<ul>
				<li>23</li>
				<li>33</li>
				<li>44</li>
			</ul>
			<ul>
				<li>55</li>
				<li>66</li>
				<li>77</li>
			</ul>
		</div>
	</body>
</html>

快乐的小毛毛虫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
23.2JQ 选择器

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> div{ width:130px; height:220px; border : 1px solid red; } </style> <script src = "./js/jquery...
复制链接

扫一扫