一、定义:
- 过滤器就是过滤条件,对已经定位到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">
$(function() {
$("#btn1").click(function(){
var obj = $("div:first");
obj.css("background","red");
})
$("#btn2").click(function(){
var obj = $("div:last");
obj.css("background","green");
})
$("#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>