3.4 过滤

最新推荐文章于 2021-02-23 16:17:32 发布

P_ning

最新推荐文章于 2021-02-23 16:17:32 发布

阅读量103

点赞数

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/P_ning/article/details/96840106

版权

jQuery 专栏收录该内容

19 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				border: 1px solid red;
				margin: 10px;
				padding: 1px;
			}
			.d1{
				height: 100px;
				width: 100px;
			}
			.d2{
				height: 60px;
				width: 60px;
			}
			.d3{
				height: 20px;
				width: 20px;
			}
		</style>
	</head>
	<body>
		<script type="text/javascript" src="../../js库/jquery-2.1.0.js"></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$("div:first").css("background-color","blue");//第一个
				});
			});
			$(function(){
				$("#btn2").click(function(){
					$("div:even").css("background-color","yellow");//索引为偶数
				});
			});
			$(function(){
				$("#btn3").click(function(){
					$("div:odd").css("background-color","red");//索引为奇数
				});
			});
			//奇偶索引多用于表格
			$(function(){
				$("#btn4").click(function(){
					$("div:gt(2)").css("background-color","red");//索引大于2的
				});
			});
			//更多查看手册
		</script>
		<input type="button" id="btn1" value="过滤出第一" />
		<input type="button" id="btn2" value="过率出索引为偶数的" />
		<input type="button" id="btn3" value="过率出索引为奇数的" />
		<input type="button" id="btn4" value="过率出索引大于2的div" />
		<div class="d1">									<!-- 0 -->	
			0												
		</div>												
		
		<div class="d1">									<!-- 1 -->	
				1								
			<div class="d2">								<!-- 2 -->	
				2
			</div>
		</div>
		
		<div class="d1">									<!-- 3 -->
			3										
			<div class="d2">								<!-- 4 -->
				4									
				<div class="d3">							<!-- 5 -->	
					5
				</div>
			</div>
		</div>
	</body>
</html>