jquery-210812-01---jquery基本过滤器

最新推荐文章于 2025-06-25 11:23:05 发布

原创最新推荐文章于 2025-06-25 11:23:05 发布 · 157 阅读

0 ·

CC 4.0 BY-SA版权

白光一

文章标签：

#jquery

jquery 专栏收录该内容

14 篇文章

订阅专栏

这篇博客介绍了jQuery中的基本过滤器，包括选择第一个元素`first`、最后一个元素`last`、指定索引元素`eq`、小于指定索引的元素`lt`和大于指定索引的元素`gt`。通过示例代码展示了如何使用这些过滤器改变DOM对象的背景颜色，帮助理解jQuery的选择和过滤功能。

jquery-210812-01—jquery基本过滤器

过滤器介绍
基本过滤器
演示基本过滤器

jquery过滤器介绍

过滤器就是过滤条件，对已经定位到数组中 DOM 对象进行过滤筛选，
过滤条件不能独立出现在 jquery 函数，如果使用只能出现在选择器后方。

jquery基本过滤器

1. 选择第一个 first, 保留数组中第一个 DOM 对象
		语法：$("选择器:first") 
		
2. 选择最后个 last, 保留数组中最后 DOM 对象
		语法：$("选择器:last")
		
3. 选择数组中指定对象
		语法：$("选择器:eq(数组索引)") ---> 数组索引就是数组下标
		
4. 选择数组中小于指定索引的所有 DOM 对象
		语法：$("选择器:lt(数组索引)")
		
5. 选择数组中大于指定索引的所有 DOM 对象
		语法：$("选择器:gt(数组索引)")

演示jquery基本过滤器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基本过滤器</title>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<style type="text/css">
			div{
				background: gray;
			}
		</style>
		<script type="text/javascript">
			
			
			$(function(){
				// jquery点击绑定事件
				$("#btn01").click(function(){
					$("div:first").css("background","red");
				})
				
				$("#btn02").click(function(){
					$("div:last").css("background","yellow");
				})
				
				$("#btn03").click(function(){
					$("div:eq(2)").css("background","pink");
				})
				
				$("#btn04").click(function(){
					$("div:lt(2)").css("background","green");
				})
				
				$("#btn05").click(function(){
					$("div:gt(2)").css("background","blue");
				})
			})
		</script>
	</head>
	<body>
		<div id="div01">这里是  div00</div>
		<div id="div02">这里是  div01</div>
		<div>
			这里是 div02
			<div>
				这里是 div03
			</div>
			<div>
				这里是 div04
			</div>
		</div>
		<div>
			这里是 div05
		</div>
		<span>这里是 span标签，数组下标从0开始</span>
		<br/>
		<br/>
		<br/>
		<input type="button" id="btn01" value="改变第一个div的背景颜色"/><br/>
		<input type="button" id="btn02" value="改变最后一个div的背景颜色"/><br/>
		<input type="button" id="btn03" value="改变数组下标为2的div的背景颜色"/><br/>
		<input type="button" id="btn04" value="改变小于数组下标为2的所有div的背景颜色"/><br/>
		<input type="button" id="btn05" value="改变大于数组下标为2的所有div的背景颜色"/><br/>
	</body>
</html>