jQuery--过滤选择器（可见性过滤选择器、属性过滤选择器）详解

最新推荐文章于 2020-10-16 18:11:33 发布

原创最新推荐文章于 2020-10-16 18:11:33 发布 · 2.9k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #过滤选择器 #可见性过滤选择器 #属性过滤选择器

jQuery 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了jQuery中的可见性过滤选择器及属性过滤选择器的应用。通过示例代码详细展示了如何使用这些选择器来筛选页面上的元素，并对不同类型的元素进行样式调整。

可见性过滤选择器

可见性过滤选择器是指根据元素的可见性来筛选元素的选择器。

选择器	描述	返回
:hidden	选取所有的不可见元素，或者ytpe为hidden的元素	jQuery对象数组
:visible	选取所有的可见元素	jQuery对象数组

其中，:hidden选择器用于选取所有不可见元素，包括< input type=“hidden” />、< div style=“display:none”; >等形式的不可见元素。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
	</head>
	<body>
		<div id="topDiv">页面顶部</div>
		<div id="menuDiv" style="display: none;">菜单栏</div>
		<div id="mainDiv" style="height: 60px;">
			用户ID：<input type="hidden" value="用户ID" /><br />
			用户名：<input type="text" name="userName" value="请输入用户名"/>
		</div>
		<button id="showHidden" onclick="showHiddenElement()">显示</button>
		<script type="text/javascript">
			$(function(){
				//页面可见div
				$("div:visible").css("background-color","blue");
				//页面可见input
				$("input:visible").css("border","2px solid red");
				//所有可见元素
				$(":visible").css("font-size", "20px");
			});
			function showHiddenElement(){
				//隐藏的div
				$("div:hidden").show(1000);
				//隐藏的input
				$("ipunt:hidden").attr("type","text");
			}
		</script>
	</body>
</html>

在这里插入图片描述

注意：在jQuery中，因为visibility:hidden和opacity:0 修饰的元素在页面中占据一定物理空间，所以都被视为可见的。

属性过滤选择器

属性过滤选择器是指根据元素的属性来筛选元素的选择器，在属性匹配时以“[” 开始、以“]”结束。

选择器	描述	返回
[attribute]	选取包含指定属性的元素	jQuery对象数组
[attribute=value]	选取属性等于某个特定值的元素	jQuery对象数组
[attribute!=value]	选取属性不等于或不包含某个特定值的元素	jQuery对象数组
[attribute^=value]	选取属性以某个值开始的元素	jQuery对象数组
[attribute$=value]	选取属性以某个值结尾的元素	jQuery对象数组
[attribute*=value]	选取属性中包含某个值的元素	jQuery对象数组
[attribute1][attribute2][attribute3]	复合属性选择器，需要同时满足多个条件时使用	jQuery对象数组

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery属性过滤选择器</title>
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
	</head>
	<body>
		<div id="topDiv" title="top" desc="页面顶部">页面顶部</div>
		<div id="menuDiv" title="menu">菜单栏</div>
		<div id="mainDiv">主题区</div>
		<div id="leftDiv" title="mainLeft">左侧栏</div>
		<div id="rightDiv" title="mainRight">右侧栏</div>
		<div id="bottomDiv" title="bottom" desc="页面底部">底部栏</div>
		<div id="advDiv" title="advbottom">广告栏</div>
		
		<script type="text/javascript">
			$(function(){
				//具有titile属性的div
				$("div[title]").css({width:"300px",height:"30px",margin:"3px"});
				//title属性值为menu的div
				$("div[title=menu]").css("border","2px solid red");
				//title属性值不为menu的div
				$("div[title!=menu]").css({backgroundColor:"blue"});
				//title属性值以main开头的div
				$("div[title^=main]").css("margin-left","100px");
				//title属性值以bottom结尾的div
				$("div[title$=bottom]").css("padding-left","50px");
				//title属性值包含o的div
				$("div[title*=o]").css("font-style","initial");
				//title属性值包含o且含有desc属性的div
				$("div[title*=o][desc]").css("font-weight","800");
			});
		</script>
	</body>
</html>

在这里插入图片描述