jQuery的内容过滤选择器，属性过滤选择器，表单过滤器

最新推荐文章于 2022-11-04 21:57:15 发布

原创最新推荐文章于 2022-11-04 21:57:15 发布 · 200 阅读

0 ·

CC 4.0 BY-SA版权

笔记专栏收录该内容

129 篇文章

订阅专栏

本文介绍了jQuery中的表单过滤器、内容过滤选择器及属性过滤选择器的使用方法。包括如何选择特定状态的表单元素、筛选包含特定内容的元素以及根据属性条件过滤等。

jQuery选择器二

一，表单过滤器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单过滤器</title>
		<script type="text/javascript" src="jquery-3.1.0.js"></script>
		<script type="text/javascript">
			$(function(){//表示页面加载完成之后 相当于onload事件
				//1.对表单内 可用的input进行赋值操作
				//当不可用时 存在属性disabled属性
				/7al()方法可以设置和获取
				$("#1").click(function(){
					$(":text:enabled").val("你好")	
				});
				//1.对表单内 不可用的input进行赋值操作
				$("#2").click(function(){
					$(":text:disabled").val("我不好")
				});
				//3.获取多选框 获取选中的个数
				$("#3").click(function(){
					alert($(":checkbox:checked").length);
				});
				//4.获取多选框 获取选中的内容
				$("#4").click(function(){
					var a = $(":checkbox:checked");
					//老式遍历
						// for(var i = 0;i<a.length;i++){
						// 	alert(a[i].value);
						// }
					//jQuery遍历
						//在遍历的function函数中 有一盒this对象 就是当前遍历到的dom对象
						a.each(function(){
							alert(this.value);
						});
				});
				//5.获取下拉框选中的内容
				$("#5").click(function(){
					var b = $("select option:selected");
					b.each(function(){
						alert(this.innerHTML);
					});
				});
			});
		</script>
	</head>
	<body>
		<button id="1">对表单内 可用的input进行赋值操作<^tton>
		<button id="2">对表单内 不可用的input进行赋值操作<^tton>
		<button id="3">获取多选框 获取选中的个数<^tton>
		<button id="4">获取多选框 获取选中的内容<^tton>
		<button id="5">获取下拉框选中的内容<^tton>
		<form action="#">
			<input type="text" value="可用文本框"/>
			<input type="text" disabled="disabled" value="不可用文本框"/>
			<input type="checkbox" value="1" checked="checked"/>1
			<input type="checkbox" value="2" />2
			<input type="checkbox" value="3" />3
			<input type="checkbox" value="4" checked="checked"/>4
			<input type="checkbox" value="5" />5
			<select multiple="multiple">
				<option>--请选择国籍</option>
				<option selected="selected">中国</option>
				<option>美国</option>
				<option>英国</option>
			<lect>
		</form>
	</body>
<cml>

二，内容过滤选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内容过滤选择器</title>
		<script type="text/javascript" src="jquery-3.1.0.js"></script>
		<script type="text/javascript">
			$(function(){//表示页面加载完成之后 相当于onload事件
				//1.选择含有文本胡的div元素
				$("#1").click(function(){
					$("div:contains('胡')").css("background-color","red");
					alert("选择含有文本胡的div元素");
				});
				//2.选择不包含文本或者子元素的div空元素
				$(".2").click(function(){
					$("div:empty").css("background-color","blue");
					alert("选择不包含文本或者子元素的div空元素");
				});
				//3.选择含有class为2元素的div元素
				$("#3").click(function(){
					$("div:has(.m2)").css("background-color","yellow");
					alert("选择含有class为2元素的div元素");
				});
				//4.选择含有子元素或者文本元素div元素
				$("#4").click(function(){
					$("div:parent").css("background-color","grey");
					alert("选择含有子元素或者文本元素div元素");
				});
			});
		</script>
	</head>
	<body>
		<div id="1">
			<span id="m1">胡</span>
		</div>
		<div class="2">
			<span class="m2">马</span>
		</div>
		<div id="3">
			<span id="m3">张</span>
		</div>
		<div id="4">
			<span id="m4">王</span>
		</div>
		<div id="5">
			<span id="m5">张</span>
		</div>
		<div id="6">
			<span id="m6">王</span>
		</div>
		<div id="7">
			<span id="m7">胡</span>
		</div>
		<div id="8">
			<span id="m8">张</span>
		</div>
		<div id="9">
			<span id="m9">王</span>
		</div>
	</body>
<cml>

三，属性过滤选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性过滤选择器</title>
		<script type="text/javascript" src="jquery-3.1.0.js"></script>
		<script type="text/javascript">
			$(function(){//表示页面加载完成之后 相当于onload事件
				//1.选择含有属性title的div元素
				$("#1").click(function(){
					$("div[id]").css("background-color","red");
					alert("选择含有属性title的div元素");
				});
				// //2.选择属性class为2的div元素
				$(".2").click(function(){
					$("div[class = '2']").css("background-color","blue");
					alert("选择属性class为2的div元素");
				});
				//3.选择属性id不等于3的div元素(也会包含没有id属性的元素)
				$("#3").click(function(){
					$("div[id!='3']").css("background-color","yellow");
					alert("选择属性id不等于3的div元素(也会包含没有id属性的元素)");
				});
				//4.选择属性属性title以m开头的span元素
				$("#4").click(function(){
					$("span[title^= 'm']").css("background-color","grey");
					alert("选择属性属性title以m开头的span元素");
				});
				//5.选择属性属性title以5结尾的span元素
				$("#5").click(function(){
					$("span[title$= '5']").css("background-color","grey");
					alert("选择属性属性title以5结尾的span元素");
				});
				//6.选择属性属性title含有6的span元素
				$("#6").click(function(){
					$("span[title*= '6']").css("background-color","grey");
					alert("选择属性属性title含有6的span元素");
				});
				//7.首先选取有属性id的span元素 然后再结果中 选取属性title含有7的span元素
				$("#7").click(function(){
					$("span[id][title*= '7']").css("background-color","grey");
					alert("首先选取有属性id的span元素 然后再结果中 选取属性title含有7的span元素");
				});
				//8.首先选取有属性title的span元素 选取属性title不等于8的span元素
				$("#8").click(function(){
					$("span[title][title!= 'm8']").css("background-color","grey");
					alert("首先选取有属性title的span元素 然后再结果中 选取属性title不等于8的span元素");
				});
			});
		</script>
	</head>
	<body>
		<div id="1">
			<span id="m1" title="m1">胡</span>
		</div>
		<div class="2">
			<span class="m2" title="m2">马</span>
		</div>
		<div id="3">
			<span id="m3" title="m3">张</span>
		</div>
		<div id="4">
			<span id="m4" title="m4">王</span>
		</div>
		<div id="5">
			<span id="m5" title="m5">张</span>
		</div>
		<div id="6">
			<span id="m6" title="m6">王</span>
		</div>
		<div id="7">
			<span id="m7" title="m7">胡</span>
		</div>
		<div id="8">
			<span id="m8" title="m8">张</span>
		</div>
		<div id="9">
			<span id="m9" title="m9">王</span>
		</div>
	</body>
<cml>