jQuery第三章 jQuery过滤器_jquery过滤器范围guolv-CSDN博客

本文链接：https://blog.csdn.net/LvJzzZ/article/details/108297261

JavaScript自我学习路线

jQuery过滤器

jQuery过滤器

过滤器是一个字符串，即过滤条件，对已经定位到数组中DOM对象进行过滤筛选
过滤器不能单独使用，必须和选择器一起使用，且只能出现在选择器后方
jQuery对象中存储的DOM对象顺序与页面标签声明顺序是一致的

一、基本过滤器

1. 选择第一个first，保留数组中第一个DOM对象

语法格式

$("选择器:first")

2. 选择最后一个last，保留数组中最后DOM对象

语法格式

$("选择器:last")

3. 选择数组中指定对象

语法格式

$("选择器:eq(数组索引)")

4. 选择数组中小于指定索引的所有DOM对象

语法格式

$("选择器:lt(数组索引)")

5. 选择数组中大于指定索引的所有DOM对象

语法格式

$("选择器:gt(数组索引)")

测试用例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>基本过滤器</title>
		<style type="text/css">
			div {
				background-color: red;
			}
		</style>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$("#btn1").click(function() {
					// 过滤器
					var obj = $("div:first");
					obj.css("background-color", "blue");
				})
				$("#btn2").click(function() {
					var obj = $("div:last");
					obj.css("background-color", "yellow");
				})
				$("#btn3").click(function() {
					var obj = $("div:eq(2)");
					obj.css("background-color", "green");
				})
				$("#btn4").click(function() {
					var obj = $("div:lt(4)");
					obj.css("background-color", "white");
				})
				$("#btn5").click(function() {
					var obj = $("div:gt(3)");
					obj.css("background-color", "blueviolet");
				})
				$("#btn6").click(function() {
					var obj = $("span");
					obj.css("background-color", "gray");
				})
			})
		</script>
	</head>
	<body>
		<div id="A">div0</div>
		<div id="B">div1</div>
		<div>div2
			<div>div3</div>
			<div>div4</div>
		</div>
		<div>div5</div>
		<span>span</span>
		<br>
		<br>
		<input type="button" value="获取第一个div" id="btn1" /><br>
		<input type="button" value="获取最后一个div" id="btn2" /><br>
		<input type="button" value="获取下标是2的div" id="btn3" /><br>
		<input type="button" value="获取小于4的所有div" id="btn4" /><br>
		<input type="button" value="获取大于3的所有div" id="btn5" /><br>
		<input type="button" value="获取span" id="btn6" /><br>
	</body>
</html>

二、表单对象属性过滤器

根据表单中DOM对象的状态情况，定位DOM对象
可用状态：enabled
不可用状态：disabled
选择状态：checked

1. 选择可用的文本框

语法格式

$(":text:enabled")

2. 选择不可用的文本框

语法格式

$(":text:disabled")

3. 复选框选中的元素

语法格式

$(":checkbox:checked")

4. 选择指定下拉列表的被选中的元素

选择器>option:selected

测试用例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>表单对象属性过滤器</title>
		<style type="text/css">
			div {
				background-color: red;
			}
		</style>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$("#btn1").click(function() {
					// 获取所有可用的text
					var obj = $(":text:enabled");
					// 设置jQuery数组中所有的DOM对象的value值
					obj.val("lzj");
				})
				$("#btn2").click(function() {
					// 获取选中的checkbox
					var obj = $(":checkbox:checked");
					// 遍历选中的复选框的值
					for (var i = 0; i < obj.length; i++) {
						// alert(obj[i].value); // 使用DOM对象
						alert($(obj[i]).val()); // 使用jQuery对象
					}
				})
				$("#btn3").click(function() {
					// 获取select
					var obj = $("select>option:selected");
					// 显示下拉列表框的值
					alert(obj.val());
				})
			})
		</script>
	</head>
	<body>
		<input type="text" id="txt1" value="text1" /><br>
		<input type="text" id="txt2" value="text2" disabled="disabled" /><br>
		<input type="text" id="txt3" value="text3" /><br>
		<input type="text" id="txt4" value="text4" disabled /><br>
		<br>
		<input type="checkbox" value="Java" />Java<br>
		<input type="checkbox" value="jQuery" checked="true" />jQuery<br>
		<input type="checkbox" value="JavaScript" checked />JavaScript<br>
		<br>
		<select>
			<option value="python">python</option>
			<option value="MySQL" selected>MySQL</option>
			<option value="C++">C++</option>
		</select>
		<br>
		<input type="button" value="设置可用的text的value是lzj" id="btn1" /><br>
		<input type="button" value="显示选中的复选框的值" id="btn2" /><br>
		<input type="button" value="显示下拉列表框的值" id="btn3" /><br>
	</body>
</html>