jQuery过滤器：筛选jquery对象数组中的DOM对象

一、定义：

过滤器就是过滤条件，对已经定位到jquery对象数组中的DOM对象进行过滤筛选，过滤条件不能独立出现在jquery函数，如果使用则只能出现在选择器后方。
例如：如果页面有三个标签，通过标签选择器创建jquery对象后，jquery对象为：$("div"),是一个数组，数组内容为三个dom标签对象,可以使用过滤器来筛选其中的某个标签对象。
注意：使用过滤器筛选后的对象仍是jquery对象，只是jquery对象的内容变了。而使用$("div")[0]筛选后的对象变成了DOM对象。

二、基本过滤器：

保留jquery对象数组中的第一个DOM对象：
语法：$("选择器：first")
保留jquery对象数组中的最后一个DOM对象：
语法：$("选择器：last")
通过索引选择jquery对象数组中的指定对象：
语法：$("选择器:eq(数组索引)")
选择数组中小于指定索引的所有DOM对象：
语法：$(选择器:lt(数组索引))
选择数组中大于指定索引的所有DOM对象：
语法：$(选择器:gt(数组索引))

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				background: gray;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
		
			// $(document).ready( 函数 ): 当页面中的dom对象加载成功后,会执行ready(), 
			// 相当于是onLoad().
			$(function() {
				//当页面dom对象加载后,给对象绑定事件,因为此时button对象已经在内存中创建好了.才能使用.
				 $("#btn1").click(function(){
					//过滤器
					var obj = $("div:first");
					obj.css("background","red");
				}) 
				
				//绑定事件
				$("#btn2").click(function(){
					var obj = $("div:last");
					obj.css("background","green");
				})
				
				//绑定btn3的事件
				$("#btn3").click(function(){
					var obj = $("div:eq(3)");
					obj.css("background","blue");
				})
				
				$("#btn4").click(function(){
					var obj = $("div:lt(3)");
					obj.css("background","orange");
				})
				
				$("#btn5").click(function(){
					var obj = $("div:gt(3)");
					obj.css("background","yellow");
				})
				
				$("#txt").keydown(function(){
					alert("keydown")
				})
			})
			
			
			
		</script>
	</head>
	<body>
		<input type="text" id="txt" />
		<div id="one">我是div-0</div>
		<div id="two">我是div-1</div>
		<div>我是div-2
		    <div>我是div-3</div>
			<div>我是div-4</div>
		</div>
		<div>我是div-5</div>
		<br />
		<span>我是span</span>
		
		<br/>
		<input type="button" value="获取第一个div" id="btn1"/>
		<br/>
		<input type="button" value="获取最后一个div" id="btn2"/>
		<br/>
		<input type="button" value="获取下标等于3的div" id="btn3"/>
		<br/>
		<input type="button" value="获取下标小于3的div" id="btn4"/>
		<br/>
		<input type="button" value="获取下标大于3的div" id="btn5"/>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

相关阅读:
骨传导耳机低频差理所当然？飞利浦A6606表示不服
数据结构计算二叉树的深度和节点个数
力扣 1422. 分割字符串的最大得分
KVM 创建虚拟机文档
SpringMVC相关知识点
人物素材的宝藏：10个网站资源推荐
DEJA_VU3D - Cesium功能集之 056-智图Arcgis地图纠偏
Windows 10 IoT Enterprise 2019 LTSC High End OEM Software 详细介绍
Nginx proxy_set_header参数设置
AWS SAA-C03 #50

原文地址：https://blog.csdn.net/m0_53881899/article/details/126670573

jQuery过滤器：筛选jquery对象数组中的DOM对象

目录

一、定义：

二、基本过滤器：