隔行变色

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>06-隔行变色</title>
</head>
<body>
	<ul>
	<li>我是第1个li</li>
	<li>我是第2个li</li>
	<li>我是第3个li</li>
	<li>我是第4个li</li>
	<li>我是第5个li</li>
	<li>我是第6个li</li>
	<li>我是第7个li</li>
	<li>我是第8个li</li>
	<li>我是第9个li</li>
	<li>我是第10个li</li>
	</ul>
	<script src="jquery-1.12.4.js"></script>
	<script>
		$(function(){
			var lis = $("li");
			for (var i = 0; i < lis.length; i++) {
				if (i % 2 == 0) {
					lis[i].style.backgroundColor = "pink";
				} else {
					lis[i].style.backgroundColor = "hotpink";
				}
			}
		});
	</script>
</body>
</html>

　　

posted @ 2020-04-15 10:40  迷幻天空岛  阅读(84)  评论(0)    收藏  举报