[网页编程]-03 jQuery 基本选择器

prtyaa 2023-12-27 15:57:35  50851

分类专栏：资讯

01 选择标签中第一个

将所有的ul和li看成一个整体,只有第一个会变颜色

02 选择标签中最后一个

将所有的ul和li看成一个整体,只有第一个会变颜色

03 更改奇偶行

04获得指定下标对象

05更改大于指定对象的行数

06分别更改选择标签中第一个

将所有的ul和li看成一个整体,只有第一个会变颜色

整体代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				height: 200px;
				border: 3px solid red;
				background-color: ;
			}
		</style>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
			//只是第一行会变色
			//	$("ul li:first").css("background-color","red");                          ❤
			//	$("ul li").first().css("background-color","red");效果和上方一致
			
				//整体的最后一行变色
			//	$("ul li:last").css("background-color","red");                          ❤
				//	$("ul li").last().css("background-color","red");效果和上方一致
				
				//获得索引是奇数的对象 索引从0开始
			//	$("ul li:odd").css("background-color","red");                              ❤
				
				//获取索引是偶数的对象
			//	$("ul li:even").css("background-color","blue");
				
			//获得索引下标是3的对象
			//	$("ul li:eq(3)").css("background-color","blue");                         ❤
			
			//获得 大于指定索引的对象
			//$("ul li:gt(3)").css("background-color","blue");
				
			//获得 小于指定索引的对象
		//	$("ul li:lt(3)").css("background-color","blue");	
		
		/* ....................子选择器................................ */
			
			$("ul li:nth-child(1)").css("background-color","green");                  //  ❤
		
			})
		</script>
	</head>
	<body>
		<div>
			<ul>
				<li>List   Item1</li>
				<li>List   Item2</li>
				<li>List   Item3</li>
				<li>List   Item4</li>
			</ul>
			<ul>
				<li>List   Item1</li>
				<li>List   Item2</li>

			</ul>	
		</div>
	</body>
</html>

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=31520

赞同 0

评论 0 条

[网页编程]-03 jQuery 基本选择器

01 选择标签中第一个

02 选择标签中最后一个

03 更改奇偶行

04获得指定下标对象

05更改大于指定对象的行数

06分别更改选择标签中第一个

相关文章

关注我们