Front-end——jQuery中的过滤器

最新推荐文章于 2022-05-07 13:08:38 发布

Star星屹程序设计

最新推荐文章于 2022-05-07 13:08:38 发布

阅读量375

点赞数

分类专栏： HTML+CSS+JS+jQuery+Vue+XML

本文链接：https://blog.csdn.net/weixin_42067873/article/details/112432245

版权

HTML+CSS+JS+jQuery+Vue+XML 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

一、过滤器介绍

jQuery过滤器用来对已经定位到jQuery对象中的DOM对象，进行二次过滤筛选的。

在JQuery中可以使用过滤器对选取的数据进行过滤，选择更加明确的元素，JQuery过滤器的通常语法：$("选择器:过滤器")

注：过滤器不能独立使用，必须声明在选择器后面

二、过滤器分类

jQuery过滤器分为六种常见的过滤器，此处介绍三种常用的过滤器。注意：可以将多个过滤器放到同一个jQuery函数，进行层层过滤

1、基本过滤器

过滤条件：根据已经定位的DOM对象在jquery对象中存储位置进行二次过滤筛选

使用：

$("选择器：first")：留下满足条件中的第一个DOM对象，例如找到页面中第一个button，$(":button:first")
$("选择器：last")：留下满足条件中的最后一个DOM对象
$("选择器：eq(index)")：留下满足条件中的指定位置的DOM对象（index）
$("选择器：lt(index)")：满足条件中，index位置之前的所有DOM对象（指定位置之前）
$("选择器：gt(index)")：满足条件中，index位置之后的所有DOM对象（指定位置之后）

简单案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery基本过滤器</title>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			div{
				background: gray;
			}
		</style>
	</head>
	<body>
		<!-- 定义被选择的对象 -->
		<h2>以下是div</h2>
		<div id="one">我的序号是0</div>
		<div id="two" class="c02">我的序号是1</div>
		<div>
			我的序号是2
			<div class="son">我的序号是3</div>
			<div class="son">我的序号是4</div>
		</div>
		<div>我的序号是5</div>
		<h3>以下是span</h3>
		<span>我是span标签</span><br><br>
		
		<!-- 定义按钮 -->
		<input type="button" id="btn01" value="选择第一个div" onclick="fun1()"/>
		<input type="button" id="btn02" value="选择最后一个div" onclick="fun2()"/>
		<input type="button" id="btn03" value="选择索引等于3的div元素" onclick="fun3()"/>
		<input type="button" id="btn04" value="选择索引小于3的div元素" onclick="fun4()"/>
		<input type="button" id="btn05" value="选择索引大于3的div元素" onclick="fun5()"/>
		
		<script>
			function fun1(){
				$("div:first").css({background: 'yellow'})
			}
			
			function fun2(){
				$("div:last").css({background: 'coral'})
			}
			
			function fun3(){
				$("div:eq(3)").css({background: '#0000FF'})
			}
			
			function fun4(){
				$("div:lt(3)").css({background: '#FF0000'})
			}
			
			function fun5(){
				$("div:gt(3)").css({background: '#00FF00'})
			}
		</script>
	</body>
</html>

2、基本属性过滤器

过滤条件：

根据标签在声明时是否为指定属性进行手动赋值
根据标签的属性内容与指定内容关系进行过滤器
注意：每个DIV标签中都有name属性，这是一个默认设置好的内容，默认为空（“”），或者手动进行赋值

使用：

$("选择器[属性名]")：留下的是满足定位条件的并且在声明时为指定属性进行了手动赋值的DOM对象
$("选择器[属性名称=‘值’]") 或者 $("选择器[属性名称 !=‘值’]")：留下满足条件的并且指定属性内容等于（不等于）指定内容的DOM对象
$("选择器[属性名^='值']")：留下满足定位条件的并且以指定属性内容为开头的所有DOM对象，例如: $("div[name^='t']")：所有name以t开头的div对象
$("选择器[属性名$='值']")：留下满足定位条件的并且指定属性内容以指定内容为结尾的所有的DOM对象
$("选择器[属性名*='值']")：留下满足定位条件的并且指定属性内容包含指定内容的所有的DOM对象，例如：$("div[name*='o']")：找出name中包含o的div标签
$("选择器[属性名1][属性名2*='值'][属性名3^='值']")：多个过滤器作用于一次操作，进行层层过滤

简单案例:

<!!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			div, span{
				background: #7F7F7F;
			}
		</style>
	</head>
	<body>
		<!-- 定义被选择对象 -->
		<div id="one" title="test">zero</div>
		<div class="c02" title="myTest">one</div>
		<div>
			two
			<div id="three" class="son">three</div>
			<div title="test" class="son">four</div>
		</div>
		<div title="testCase">five</div>
		<div>six</div>
		<span>我是span标签</span>
		<br><br>
		
		<!-- 定义按钮 -->
		<input type="button" id="btn01" value="选择包含title属性的div元素" onclick="fun1()"/>
		<input type="button" id="btn02" value="选择title属性值为test的div元素" onclick="fun2()"/>
		<input type="button" id="btn03" value="选择title不为test的div元素" onclick="fun3()"/>
		<input type="button" id="btn04" value="选择title属性以'te'开头的div元素" onclick="fun4()"/>
		<input type="button" id="btn05" value="选择title属性以'st'结尾的div元素" onclick="fun5()"/>
		<input type="button" id="btn06" value="选择title属性包含'es'的div元素" onclick="fun6()"/>
		<input type="button" id="btn07" value="选择title属性包含'es'并且含有id属性的div元素" onclick="fun7()"/>
		<input type="button" id="btn08" value="选择title属性包含'es'的第一个DIV" onclick="fun8()" />
		
		<script>
			function fun1(){
				$("div[title]").css({background: 'red'})
			}			
			function fun2(){
				$("div[title='test']").css({background: 'coral'})
			}
			function fun3(){
				$("div[title!='test']").css({background: 'yellow'})
			}
			function fun4(){
				$("div[title^='te']").css({background: 'orange'})
			}
			function fun5(){
				$("div[title$='st']").css({background: 'green'})
			}
			function fun6(){
				$("div[title*='es']").css({background: 'blue'})
			}
			function fun7(){
				$("div[id][title*='es']").css({background:'pink'})
			}
			function fun8(){
				$("div[title*='es']:first").css({background: '#FFFFFF'})
			}
		</script>
	</body>
</html>

3、工作状态属性过滤器

HTML标签属性分类：

基本属性：绝大多数标签都拥有的属性，id、name、title、rowspan
样本属性：背景、字体、边框
value属性：只存在表单域标签中（input、select、textarea）
监听事件属性：onclick、onchange....
工作状态属性：只存在表单域标签（checked、disabled、selected）

使用：

$("选择器：enabled")：留下满足条件的并且处于可用状态的DOM对象
$("选择器：disabled")：留下满足条件的并且处于不可用状态的DOM对象
$("选择器：checked")：留下满足条件的并且处于选中状态的DOM对象（仅radio、checkbox有此状态），例如：$(":checkbox:checked:first")：选择页面中第一个被选中的checkbox
$("选择器：selected")：留下满足条件的并且处于选中状态的DOM，例如：$("select>option:selected")：下拉列表中被选中的option

简单案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	
	<body>
		<!-- 定义文本框 -->
		文本01：<input type="text" id="text01" value="value01"/><br>
		文本02：<input type="text" id="text02" value="value02" disabled/><br>
		文本03：<input type="text" id="text03" value="value03"/><br>
		文本04：<input type="text" id="text04" value="value04" disabled/><br><br>
		
		<!-- 定义复选框 -->
		<input type="checkbox" name="interest" value="reading" checked/>读书
		<input type="checkbox" name="interest" value="food"/>美食
		<input type="checkbox" name="interest" value="travel" checked/>旅游
		<input type="checkbox" name="interest" value="music"/>音乐
		<input type="checkbox" name="interest" value="shopping" checked/>购物<br><br>
		
		<!-- 定义下拉列表 -->
		<select id="city">
			<option value="bj" title="beijing" selected>北京</option>
			<option value="sh" title="shanghai">上海</option>
			<option value="gz" title="guangzhou">广州</option>
			<option value="sz" title="shenzhen">深圳</option>
			<option value="hz" title="hangzhou">杭州</option>
		</select><br><br>
		
		<!-- 定义测试按钮 -->
		<button id="btn01" onclick="fun1()">选择可用文本框并修改其值</button>
		<button id="btn02" onclick="fun2()">选择不可用文本框并修改其值</button>
		<button id="btn03" onclick="fun3()">选择复选框被选中的元素</button>
		<button id="btn04" onclick="fun4()">选择下拉列表中被选中的元素</button>
				
		<script>
			function fun1(){
				/*val()
				$obj.val()：读取jquery对象中第一个DOM对象的value属性值
				$obj.val("值")：为jQuery对象中所有的DOM对象的value属性赋值
				*/
				$(":text:enabled").val("可用的文本框")
			}
			function fun2(){
				$(":text:disabled").val("不可用的文本框")
			}
			
			function fun3(){
				$(":checkbox:checked").each(loop)
			}
			function loop(index, domObj){
				alert("第" + (index + 1) + "个被选中的checkbox的value值是：" + $(domObj).val())
			}
			
			function fun4(){
				alert($("#city>option:selected").val())
			}
			
		</script>
	</body>
</html>