一步一步学习 JQuery (三) 过滤选择器:基本过滤选择器 && 内容过滤选择器 && 可见性过滤选择器

最新推荐文章于 2023-07-22 08:42:18 发布
最新推荐文章于 2023-07-22 08:42:18 发布
阅读量2.3k 收藏 9
点赞数 1
分类专栏： JavaScript Learn_Web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wjw0130/article/details/43916597
版权

过滤选择器：

过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头
按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器.

一、基本过滤选择器


改变第一个 div 元素的背景色为 # bbffaa
改变最后一个 div 元素的背景色为 # bbffaa
改变class不为 one 的所有 div 元素的背景色为 # bbffaa
改变索引值为偶数的 div 元素的背景色为 # bbffaa
改变索引值为奇数的 div 元素的背景色为 # bbffaa
改变索引值为大于 3 的 div 元素的背景色为 # bbffaa
改变索引值为等于 3 的 div 元素的背景色为 # bbffaa
改变索引值为小于 3 的 div 元素的背景色为 # bbffaa
改变所有的标题元素的背景色为 # bbffaa
改变当前正在执行动画的所有元素的背景色为 # bbffaa

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<style type="text/css">
			div, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
			    display: none;
			}			
		</style>
		<script type="text/javascript" src="jquery-1.9.1.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				function anmateIt(){
					$("#mover").slideToggle("slow", anmateIt);
				}
				anmateIt();
				
				$("#btn1").click(function(){
					$("div:first").css("background","#ffddaa");
				})
				
				$("#btn2").click(function(){
					$("div:last").css("background","#ffddaa");
				})
				
				$("#btn3").click(function(){
					$("div:not(.one)").css("background","#ffddaa");
				})
				
				$("#btn4").click(function(){
					$("div:even").css("background","#ffddaa");
				})
				
				$("#btn5").click(function(){
					$("div:odd").css("background","#ffddaa");
				})
				
				$("#btn6").click(function(){
					$("div:gt(3)").css("background","#ffddaa");
				})
				
				$("#btn7").click(function(){
					$("div:eq(3)").css("background","#ffddaa");
				})
				
				$("#btn8").click(function(){
					$("div:lt(3)").css("background","#ffddaa");
				})
				
				$("#btn9").click(function(){
					$(":header").css("background","#ffddaa");
				})
				
				
				$("#btn10").click(function(){
					$(":animated").css("background","#ffddaa");
				})
				
				
				$("#btn11").click(function(){
					$("#two").nextAll("span:first").css("background","#ffddaa");
				})
				
				
			});
			
			
		</script>
	</head>
	<body>		
		<input type="button" value="选择第一个 div 元素" id="btn1" />
		<input type="button" value="选择最后一个 div 元素" id="btn2" />
		<input type="button" value="选择class不为 one 的所有 div 元素" id="btn3" />
		
		<input type="button" value="选择索引值为偶数的 div 元素" id="btn4" />
		<input type="button" value="选择索引值为奇数的 div 元素" id="btn5" />
		<input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6" />
		
		<input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7" />
		<input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8" />
		<input type="button" value="选择所有的标题元素" id="btn9" />
		
		<input type="button" value="选择当前正在执行动画的所有元素" id="btn10" />
		<input type="button" value="选择 id 为 two 的下一个 span 元素" id="btn11" />
		
		<h3>基本选择器.</h3>
		<br><br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<span id="span">^^span元素 111^^</span>
		<span id="span">^^span元素 222^^</span>
		<div id="mover">正在执行动画的div元素.</div>
	</body>
</html>
二、内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上

改变含有文本 ‘di’ 的 div 元素的背景色为 # bbffaa
改变不包含子元素(或者文本元素) 的 div 空元素的背景色为 # bbffaa
改变含有 class 为 mini 元素的 div 元素的背景色为 # bbffaa
改变含有子元素(或者文本元素)的div元素的背景色为 # bbffaa

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<style type="text/css">
			div, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
			    display: none;
			}			
		</style>
		<script type="text/javascript" src="jquery-1.9.1.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				
				$("#btn1").click(function(){
					$("div:contains('di')").css("background","#ffddaa");
				});
				
				$("#btn2").click(function(){
					$("div:empty").css("background","#ffddaa");
				});
				
				$("#btn3").click(function(){
					$("div:has(.mini)").css("background","#ffddaa");
				});
				
				$("#btn4").click(function(){
					$("div:parent").css("background","#ffddaa");
					8//$("div:not(:empty)").css("background","#ffddaa");
				});
			});
			
		</script>
	</head>
	<body>		
		<input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1" />
		<input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2" />
		<input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3" />
		<input type="button" value="选择含有子元素(或者文本元素)的div元素" id="btn4" />
		
		<br><br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<div id="mover">正在执行动画的div元素.</div>
	</body>
</html>
三、可见性过滤选择器
可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素

可见选择器 :hidden 不仅包含样式属性 display 为 none 的元素, 也包含文本隐藏域 (<input  type=“hidden”>)和 visible:hidden 之类的元素

改变所有可见的div元素的背景色为 # bbffaa
选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 # bbffaa
选取所有的文本隐藏域, 并打印它们的值

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="css/style.css">
				<style type="text/css">
			div, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5pax;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
			    display: none;
			}			
		</style>
		<script type="text/javascript" src="jquery-1.9.1.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				
				$("#btn1").click(function(){
					$("div:visible").css("background","#ffddaa");
				});
				
				$("#btn2").click(function(){
					//alert($("div:hidden").length);
					//show(time): 可以使不可见的元素变为可见, time 表示时间
					//jQuery 的很多方法支持方法的连缀, 即一个方法的返回值来时调用该
					//方法的 jQuery 对象: 可以继续调用该对象的其他方法. 
					$("div:hidden").show(3000).css("background","#ffddaa");
				});
				
				$("#btn3").click(function(){
					alert($("input:hidden").val());
				});
					
			});
			
		</script>
	</head>
	<body>		
		<input type="button" value="选取所有可见的  div 元素" id="btn1">
		<input type="button" value="选择所有不可见的 div 元素" id="btn2" />
		<input type="button" value="选择所有不可见的 input 元素" id="btn3" />
		
		<br><br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div
			<input type="hidden" value="123456789000" size="8">
		</div>
		<div id="mover">正在执行动画的div元素.</div>
	</body>
</html>


u013497151
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery可见性过滤选择器用法示例
10-21
总结一下，jQuery的可见性过滤选择器`:hidden`和`:visible`为开发者提供了方便的方式来操作元素的可见性，无论这些元素是通过CSS、JavaScript或HTML的特性隐藏的。在实际项目中，这两个选择器可以用于各种场景，例如...
举例讲解jQuery中可见性过滤选择器的使用
10-22
在jQuery中，可见性过滤选择器是用于筛选页面上元素的一种高效工具，它们根据元素的可见状态（即是否被显示）来选取相应的DOM元素。本文将深入探讨`:hidden`和`:visible`这两个可见性过滤选择器的用法，并通过实例...
过滤选择器(基础)
你好牛蛙！
10-20 1472
:first 获取第一个元素 :last 获取最后个元素 :not(selector) 去除所有与给定选择器匹配的元素 :even 匹配所有索引值为偶数的元素，从 0 开始计数 :odd 匹配所有索引值为奇数的元素，从 0 开始计数 :eq(index) 匹配一个给定索引值的元素 :gt(index) 匹配所有大于给定索引值的元素 :lt(index) 匹配所有小于给定索引值的元素 :header 匹配如 h1, h2, h3 之类的标题元素 :animated 匹配所有正在执行动画效果的
JQuery全部过滤选择器详细介绍下
业精于勤，荒于嬉
07-22 820
● 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素1、[attribute] 用法: $(“div[id]”) ; 返回值 集合元素2、[attribute=value] 用法: $(“input[name=‘newsletter’]”).attr(“checked”, true); 返回值 集合元素3、[attribute!=value] 用法: $(“input[name!=‘newsletter’]”).attr(“checked”, true); 返回值集合元素4、[attribute^=
jQuery基础——使用选择器—2过滤选择器
weixin_57575133的博客
11-03 853
过滤选择器主要通过特定的过滤表达式来筛选特殊需求的DOM元素，过滤选择器的语法形式与CSS的伪类选择器的语法格式相同，以冒号作为前缀标识符。根据需求的不同，过滤选择器又可以分为定位过滤器、内容过滤器和可见过滤器。
jQuery选择器 过滤选择器(一.基本过滤选择器)
妖怪的博客
02-17 805
1.:first;2.:last;3.;not(selector);4.:even;5.:odd;6.:eq(index);7.:gt(index);8.:lt(index);9.:header;10.:animated;11.:focus;
jQuery选择器(二)（基本过滤器，内容过滤器，可见过滤器）
m0_70571756的博客
05-22 5634
jQuery是一个快速、简洁的 JavaScript 框架，是继Prototype之后又一个优秀的 JavaScript 代码库。jQuery的设计宗旨是“WriteLess，DoMore”，即倡导写更少的代码，做 更多的事情。jQuery封装了 JavaScript 常用的功能代码，提供一种简便的 JavaScript 🍋jQuery选择器 🥙过滤器 🧀1.基本过滤器 🍤2.内容过滤器 🧁3.可见过滤器 ☕️4.属性过滤器 🍹5.子元素过滤器
jquery可见性过滤选择器使用示例
10-27
可见性过滤选择器对于dom中隐藏的一些元素还是比较实用的，具体的使用方法如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
JQuery选择器、过滤器大整理
10-24
以下是一些基本的jQuery选择器： 1. **基本选择器**：`$()` 函数可以直接接收一个CSS选择器，如 `$("#myID")` 选取ID为`myID`的元素，`$(".myClass")` 选取具有类`myClass`的所有元素，`$("tagname")` 选取所有`tag...
jQuery--过滤选择器（可见性过滤选择器、属性过滤选择器）详解
吴声子夜歌的博客
10-01 2769
可见性过滤选择器 可见性过滤选择器是指根据元素的可见性来筛选元素的选择器。 选择器 描述 返回 :hidden 选取所有的不可见元素，或者ytpe为hidden的元素 jQuery对象数组 :visible 选取所有的可见元素 jQuery对象数组 其中，:hidden选择器用于选取所有不可见元素，包括< input type=“hidden” />、< ...
过滤选择器
小灰狼与大白兔的博客
01-28 6043
过滤选择器 过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM元素,该选择器都以“:”开头 按照不同的过滤规则,过滤选择器可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器. 基本过滤选择器 基本过滤选择器示例 改变第一个 div元素的背景色为 # bbffaa 改变最后一个 div元素的背景色为 # bbffaa 改变class...
jQuery的选择器——可见性过滤选择器
笨鸟快飞的专栏
08-27 1159
jQuery的可见性选择器是根据元素的可见和不可见状态来选择相对应的元素。主要有两个：可见:visible和不可见:hidden。今天我们主要来学习这两个选择器的使用。先来看一个HTML结构，方便学习这两个选择器的使用： div class="wrap"> span>span> div>div> div style="display:none">Hider!div> div st
jQuery过滤选择器
zwt_1的博客
08-03 490
过滤选择器 过滤选择器主要是通过特定的过滤规则里筛选出所需的DOM元素。过滤规则与CSS中的伪类选择器语法相同，都是以一个冒号（:）开头。按照不同的过滤规则，过滤选择器可分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象过滤。   1、基本过滤选择器 基本过滤选择器 选择器 描述 返回 示例 :first 选取第1个元素 单个元素 ...
Educoder jQuery 入门
m0_65391975的博客
12-05 888
Educoder jQuery 入门 第1关：jQuery入门 第2关：jQuery基本选择器 第3关：过滤选择器 第4关：过滤选择器 第5关：tab选项卡
jQuery的可见性过滤选择器
小时
08-14 558
Untitled Document div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size:
Jquery 可见性过滤器选择器
05-16 1657
1.可见性过滤选择器根据元素的可见性和不可见性来选择相应的元素。 其中元素可见性表示为：visible;元素的不可见行为hidden。 返回的都是集合元素。其中hidden不仅包含样式属性为（display:none）,也包括文本隐藏域为hidden()的文本框。以下为Jquery可见选择器示例： html代码：<div class="content" id="content">
jquery可见性过滤选择器
whjwhja6的专栏
03-31 545
2,可见性过滤选择器     (1)选取所有可见的元素   (2)选取所有不可见的元素   .show{display:block;}/*显示*/ .hide{display:none;}/*隐藏*/ //可见性过滤选择器  $(document).ready(function(){   //1选取所有可见的元素   $(":visible").css("font
jquery内容过滤选择器：内容过滤选择器它是根据元素内部文本内容进行选中。
boss_way的博客
11-01 4563
1.1． 内容过滤选择器 内容过滤选择器它是根据元素内部文本内容进行选中。   :Contains（text）：匹配包含给定文本的元素 :Empty：匹配所有不包含子元素或者文本的空元素 :Has(selector):匹配含有选择器所匹配的元素的元素 :addClassL(“类名”)：给所有的标签添加类名 :Parent：匹配含有子元素或者文本的元素 示例： $(fu
easyui隔行变色
lvjianyu2007的专栏
12-11 2252
方法1.datagrid 加个这属性就可以变色了 opts.striped = true; 方法2.还可以使用rowstylyer rowStyler: function(index,row){ if (row.listprice>80){ return 'background-color:#6293BB;color:#fff;'; // return inline
jquery可见性过滤器
最新发布
12-03
以下是两种jQuery可见性过滤器的例子： 1.使用:visible和:hidden选择器 ```html 第一个div <div style="display:none">第二个div 第三个div 隐藏" id="btn1"> 显示" id="btn2"> $(function(){ $('#btn1')....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值