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

白光一

于 2021-08-12 23:48:38 发布

阅读量90

点赞数

分类专栏： jquery 文章标签： jquery

白光一

本文链接：https://blog.csdn.net/FlyUp__/article/details/119656663

版权

jquery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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>

白光一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery-210812-01---jquery基本过滤器

jquery-210812-01—jquery基本过滤器过滤器介绍基本过滤器演示基本过滤器jquery过滤器介绍过滤器就是过滤条件，对已经定位到数组中 DOM 对象进行过滤筛选，过滤条件不能独立出现在 jquery 函数，如果使用只能出现在选择器后方。jquery基本过滤器1. 选择第一个 first, 保留数组中第一个 DOM 对象语法：$("选择器:first") 2. 选择最后个 last, 保留数组中最后 DOM 对象语法：$("选择器:last")
复制链接

扫一扫