Web前端（四）jQuery (5) jQ过滤选择器

最新推荐文章于 2022-11-04 21:57:15 发布

馬冬梅啊

最新推荐文章于 2022-11-04 21:57:15 发布

阅读量184

点赞数

分类专栏： Web前端 Web前端文章标签： javaweb JavaScript jQuery 前端

本文链接：https://blog.csdn.net/weixin_39782583/article/details/84205420

版权

Web前端同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

Web前端

22 篇文章 0 订阅

订阅专栏

Date：2018/11/18

过滤选择器，结衣镇楼

在这里插入图片描述

源代码：

<!-- 
基本过滤器：
1、body div:first  获取div的第一个元素
2、body div:last   获取div的最后一个元素
3、body div:odd    获取div的奇数个元素
4、body div:even   获取div的偶数个元素

注：<link rel="stylesheet" />这里面的rel不能少！
 -->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>层级选择器</title>
		<link rel="stylesheet" href="../../css/style.css" />
		<script src="../../js/jquery-1.11.0.js"></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$("body div:first").css("background-color","red");
				});
				
				$("#btn2").click(function(){
					$("body div:last").css("background-color","red");
				});
				
				$("#btn3").click(function(){
					$("body div:odd").css("background-color","red");
				});
				
				$("#btn4").click(function(){
					$("body div:even").css("background-color","red");
				});
			});
		</script>
		
	 
		
		
		
	</head>
	<body>
		<input type="button" id="btn1" value="body中的第一个div元素"/>
		<input type="button" id="btn2" value="body中的最后一个div元素"/>
		<input type="button" id="btn3" value="选择body中的奇数的div"/>
		<input type="button" id="btn4" value="选择body中的偶数的div"/>
		
		<hr/>
		<div id="one">
			<div class="mini">
				111
			</div>
		</div>
		
		<div id="two">
			<div class="mini">
				222
			</div>
			<div class="mini">
				333
			</div>
		</div>
		
		<div id="three">
			<div class="mini">
				444
			</div>
			<div class="mini">
				555
			</div>
			<div class="mini">
				666
			</div>
		</div>
		
		<span id="four">
			
		</span>
	</body>
</html>