Nearth===>WEB前端--第16课/JQuery/索引选择器案列

最新推荐文章于 2020-12-09 14:50:39 发布

码字界陈冠希

最新推荐文章于 2020-12-09 14:50:39 发布

阅读量136

点赞数

分类专栏： WEB前端第三季/JQuery

本文链接：https://blog.csdn.net/ly1716/article/details/102782669

版权

WEB前端第三季/JQuery 专栏收录该内容

52 篇文章 0 订阅

订阅专栏

索引选择器案列:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <title>Nearth</title>
    <script src="jquery-1.12.2.js"></script>
	<style type="text/css">
		ul{
			list-style-type: none;
			width:200px;
			position: absolute;
			left:600px;
		}
		ul li{
			margin-top:10px;
			cursor: pointer;
			text-align: center;
			font-size:20px;
		}
	</style>
	<script>
		$(function(){
			$("#btn").click(function(){
				$("#uu>li:eq(4)").css("backgroundColor","red");//等于
				$("#uu>li:gt(4)").css("backgroundColor","pink");//大于
				$("#uu>li:lt(4)").css("backgroundColor","yellow");//小于
			})
		})

	</script>
</head>
<body>
	<h1>索引选择器案列</h1>
	<hr >
<input type="button" name="" id="btn" value="点击我,显示效果" />
<ul id="uu">
	<li>西施1号</li>
	<li>西施2号</li>
	<li>西施3号</li>
    <li>西施4号</li>
	<li>西施5号</li>
	<li>西施6号</li>
	<li>西施7号</li>
	<li>西施8号</li>
</ul>

</body>
</html>

元气满满的一天鸭······有没有感受到哒···················

码字界陈冠希

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Nearth===>WEB前端--第16课/JQuery/索引选择器案列

索引选择器案列:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>...
复制链接

扫一扫