jQuery选择器之过滤选择器之内容过滤选择器

最新推荐文章于 2020-10-14 17:43:29 发布
最新推荐文章于 2020-10-14 17:43:29 发布
阅读量765 收藏
点赞数
分类专栏： Jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/world_java/article/details/9621805
版权

过滤选择器之内容过滤选择器

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


1、:contains(text)：参数为文本

用法: $(”div:contains(’John’)”)    返回值  集合元素
说明: 匹配包含给定文本的元素.这个选择器比较有用，当我们要选择的不是dom标签元素时,它就派上了用场了,它的作用是查找被标签”围”起来的文本内容是否符合指定的内容.


2、:empty

用法: $(”td:empty”)   返回值  集合元素
说明: 匹配所有不包含子元素或者文本的空元素


3、:has(selector)

用法: $(”div:has(p)”).addClass(”test”)    返回值  集合元素
说明: 匹配含有选择器所匹配的元素的元素.这个解释需要好好琢磨,但是一旦看了使用的例子就完全清楚了:给所有包含p元素的div标签加上class=”test”.


4、:parent

用法: $(”td:parent”)   返回值  集合元素
说明: 匹配含有子元素或者文本的元素.注意:这里是”:parent”,可不是”.parent”哦!感觉与上面讲的”:empty”形成反义词.



练习：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.10.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
	 </style>
	 <!--引入jquery的js库-->
    
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value=" 改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF"  id="b1"/>
		 <input type="button" value=" 改变不包含子元素(或者文本元素) 的 div 空元素的背景色为"  id="b2"/>
		 <input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF"  id="b3"/>
		 <input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF"  id="b4"/>
		 <input type="button" value=" 改变不含有文本 di; 的 div 元素的背景色"  id="b5"/>
 
		 <h1>天气冷了</h1>
		 <h2>天气又冷了</h2>
		 
	     <div id="one">
	    	 id为one   div
		     
		 </div>
		
		 <div id="two" class="mini" >
	    	   id为two   class是 mini  div
		       <div  class="mini" >class是 mini</div>
		</div>
		
		 <div class="one" >
		 	    class是 one 
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one" >
		 	  class是 one 
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
		
		
		<div class="one">
			
			
		</div>
		<br>
		<div id="mover" >
		 	  动画
		</div>
		<br>
		
		
	</body>
<script language="JavaScript">
//<input type="button" value=" 改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF"  id="b1"/>


//<input type="button" value=" 改变不包含子元素(或者文本元素) 的 div 空元素的背景色为"  id="b2"/>


//<input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF"  id="b3"/>


//<input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF"  id="b4"/>



//<input type="button" value=" 改变不含有文本 di; 的 div 元素的背景色"  id="b5"/>
 
			
</script>
   
</html>



答案： 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.10.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
	 </style>
	 <!--引入jquery的js库-->
    
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value=" 改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF"  id="b1"/>
		 <input type="button" value=" 改变不包含子元素(或者文本元素) 的 div 空元素的背景色为"  id="b2"/>
		 <input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF"  id="b3"/>
		 <input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF"  id="b4"/>
		 <input type="button" value=" 改变不含有文本 di; 的 div 元素的背景色"  id="b5"/>
 
		 <h1>天气冷了</h1>
		 <h2>天气又冷了</h2>
		 
	     <div id="one">
	    	 id为one   div
		     
		 </div>
		
		 <div id="two" class="mini" >
	    	   id为two   class是 mini  div
		       <div  class="mini" >class是 mini</div>
		</div>
		
		 <div class="one" >
		 	    class是 one 
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one" >
		 	  class是 one 
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
		
		
		<div class="one">
			
			
		</div>
		<br>
		<div id="mover" >
		 	  动画
		</div>
		<br>
		
		
	</body>
<script language="JavaScript">
//<input type="button" value=" 改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF"  id="b1"/>
	$("#b1").click(function(){
		$("div:contains(di)").css("background","#0000FF");
	});

//<input type="button" value=" 改变不包含子元素(或者文本元素) 的 div 空元素的背景色为"  id="b2"/>
	$("#b2").click(function(){
		$("div:empty").css("background","#0000FF");
	});

//<input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF"  id="b3"/>含有即表示被包含元素的最外层
	$("#b3").click(function(){
		$("div:has(.mini)").css("background","#0000FF");
	});

//<input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF"  id="b4"/>
	$("#b4").click(function(){
		$("div:parent").css("background","#0000FF");
	});

//<input type="button" value=" 改变不含有文本 di; 的 div 元素的背景色"  id="b5"/>
 	$("#b5").click(function(){
		$("div:not(:contains(di))").css("background","#0000FF");
	});
			
</script>
   
</html>



我叫阿狸猫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery选择器之内容过滤选择器详解
10-26
内容过滤选择器是jQuery选择器的一个重要类别，它们允许开发者根据元素的内容来筛选和操作元素。本文将详细解析jQuery中的四个主要内容过滤选择器：`:contains(text)`、`:empty`、`:has(selector)`和`:parent`。 1....
jQuery选择器之基本过滤选择器用法实例分析
10-17
主要介绍了jQuery选择器之基本过滤选择器用法,结合实例形式分析了jQuery常见的基本过滤、属性过滤、内容过滤、子元素过滤等相关操作技巧,需要的朋友可以参考下
jquery中的内容过滤选择器
像寒冷中的松树一样坚强
04-18 493
http://www.w3.org/1999/xhtml">          div{ float:left; border:solid 1px #ccc; width:65px; height:65px; }  span{ float:left; border:solid 1px #ccc; width:45px; height:45px; background-color:#
jQuery内容过滤选择器
u013313232的博客
10-14 216
** jQuery内容过滤选择器 ** /** :contains(text) :empty :has(selector) :parent */ $(document).ready(function(){ //1.选择 含有文本 'di' 的 div 元素 $("#btn1").click(function(){ $("div:contains('di')").css("background", "#bbffaa"); }); //2.选择不包含子元素
JQuery过滤选择器--内容过滤器
qq_34550459的博客
05-14 240
内容过滤器就是通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选。 包括: :contains(text) 匹配包含给定文本的元素 :empty 匹配所有不包含子元素或者文本的空元素 :has(selector) 匹配含有选择器所匹配元素的元素 :parent 匹配含有子元素或者文本的元素 Demo: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
jQuery过滤选择器——内容过滤选择器
C.
11-13 438
内容过滤选择器内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上1、:contains(text) 用法: $(”div:contains(’John’)”) 返回值：集合元素 说明: 匹配包含给定文本的元素.这个选择器比较有用，当我们要选择的不是dom标签元素时,它就派上了用场了,它的作用是查找被标签”围”起来的文本内容是否符合指定的内容的. 2、:empt
2、jQuery操作Dom(过滤器与选择器)
aihaotan8299的博客
08-27 130
1、属性选择器 <script language="JavaScript"> /** * <input type="button" value=" 含有属性title 的div元素" id="b1"/> */ $("#b1").click(function(){ $("div[title]").css("background","red"); }); ...
jQuery内容过滤选择器用法分析
10-24
主要介绍了jQuery内容过滤选择器用法,实例分析了:contains()、:has()、:empty()、:parent等内容过滤选择器的使用技巧,需要的朋友可以参考下
jquery选择器之基本过滤选择器详解
10-26
jQuery选择器是jQuery库中的核心功能之一，它极大地简化了在JavaScript中操作DOM元素的方式。在jQuery中，过滤选择器是一种特殊的选择器，用于从已选中的元素集合中进一步筛选出满足特定条件的元素。本篇文章将深入...
JQuery学习笔记（1）
MADE_Y
12-19 404
jquery框架 ①      jquery是一个javascript框架/javascript 库     使用jquery中有两种对象 dom , jquery对象     dom=>  vardom1=document.getElementById('abc') jquery=>  var obj2= $('#abc');   为什么出现 javascript框架?
JQuery（上）
编程学院派
08-09 1210
1、流行的JavaScript类库   --  框架、插件  （1）为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的 Web2.0 特性的富客户端页面, 并且兼容各大浏览器 （2）当前流行的 JavaScript 库有:  jQuery, MooTools, Protot
JQuery技术详解（一）
热门推荐
菜鸟程序员成长路
05-13 1万+
简介： jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多   javascript高手加入其team。 jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。 它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 （I...
jquery内容过滤选择器：内容过滤选择器它是根据元素内部文本内容进行选中。
boss_way的博客
11-01 4577
1.1． 内容过滤选择器 内容过滤选择器它是根据元素内部文本内容进行选中。   :Contains（text）：匹配包含给定文本的元素 :Empty：匹配所有不包含子元素或者文本的空元素 :Has(selector):匹配含有选择器所匹配的元素的元素 :addClassL(“类名”)：给所有的标签添加类名 :Parent：匹配含有子元素或者文本的元素 示例： $(fu
JQuery内容过滤选择器
零怀念的博客
08-26 2568
常见的内容过滤选择器 NO. 选择器 描述 1 :contains(文本) 包含括号内的文本的元素集合（括号内要加引号） 2 :empty 空元素（不包含子元素或文本的元素）集合 3 :has（选择器） 包含括号中选择器选中的元素集合的元素集合 4 :parent 含有子元素或者文本的元素集合 示例：运用以上选择器 ...
一步一步学习 JQuery (三) 过滤选择器:基本过滤选择器 && 内容过滤选择器 && 可见性过滤选择器
NotPerfect-EOF
02-23 2355
过滤选择器： 过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头 按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器. 一、基本过滤选择器 改变第一个 div 元素的背景色为 # bbffaa 改变最后一个 div 元素的背景色为 # bbffaa 改变cla
jQuery的获取焦点和失去焦点事件
07-31 2100
.myClass{ color:#c0c0c0 } 用户名 //为input元素添加样式 $("input").first().addClass("myClass"); //为input元素添加获取焦点事件 $("input").first().focus(function(){ if ($(t
jQuery选中多选框和单选框和下拉框
07-30 1881
Untitled Document 1号 2号 3号 1号 2号 3号 4号 5号 6号 复选1 复选2 复选3 复选4 单选1 单选2 单选3 // $("inp
jQuery的validate验证插件使用方法
08-15 1575
1.导入validate.js文件 注意： *validate.js必须在jQuery.js文件之后导入,因为验证框架里需要用到jQuery.js中定义的方法 *如果先导入jQuery.js再导入validate.js   再次导入jQuery.js也不行。因为验证框架里会将某些方法进行扩展，而后又一次导入jQuery.js会将扩展的方法覆盖。 2.指定要验证的组件 注意：
jquery获取复选框是否勾选
11-19 1474
$("#test2").unbind("click"); $("#test2").bind("click",function(){ alert($("#check").is(":checked")); }); (":chceked")是表单对象的属性过滤器 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option).
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值