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

姓蔡小朋友

已于 2022-10-12 20:59:54 修改

阅读量579

点赞数 1

分类专栏： jQuery 文章标签： jquery javascript 前端

于 2022-09-02 21:37:49 首次发布

本文链接：https://blog.csdn.net/m0_53881899/article/details/126670573

版权

jQuery 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

一、定义：

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