黑马day16 jquery&内容过滤选择器&可见度选择器

内容过滤选择器的过滤规则主要体如今它所包括的子元素和文本内容上

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.4.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","red");

	});

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

	$("#b2").click(function(){

		$("div:empty").css("background","red");

	});

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

	$("#b3").click(function(){

		$("div:has(.mini)").css("background","red");

	});

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

	$("#b4").click(function(){

		$("div:parent").css("background","red");

	});

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

	$("#b5").click(function(){

		$("div:not(:contains('di'))").css("background","red");

	});

</script>

</html>

可见度过滤选择器是依据元素的可见和不可见状态来选择对应的元素

1、:hidden

使用方法: $(”tr:hidden”)
返回值集合元素

说明: 匹配全部的不可见元素。input元素的type属性为“hidden”的话也会被匹配到.意思是css中display:none和inputtype=”hidden”的都会被匹配到.相同,要在脑海中彻底分清楚冒号”:”,点号”.”和逗号”,”的差别.

2、:visible

使用方法: $(”tr:visible”)
返回值集合元素

说明: 匹配全部的可见元素.

<!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.4.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;

			}

			div.visible{

				display:none;

			}

	 </style>

	 <!--引入jquery的js库-->

	</head>

	<body>

		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />

		 <input type="button" value=" 改变全部可见的div元素的背景色为 #0000FF"  id="b1"/>

		 <input type="button" value=" 选取全部不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF"  id="b2"/>

		 <input type="button" value=" 选取全部的文本隐藏域, 并打印它们的值"  id="b3"/>

		 <input type="button" value=" 选取全部的文本隐藏域, 并打印它们的值"  id="b4"/>

		 <!--文本隐藏域-->

         <input type="hidden" value="hidden_1">

		 <input type="hidden" value="hidden_2">

		 <input type="hidden" value="hidden_3">

		 <input type="hidden" value="hidden_4">

		 <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="visible" >

		 	    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="visible" >

		 	  这是隐藏的

		</div>

		<div class="one">

		</div>

		<br>

		<div id="mover" >

		 	  动画

		</div>

		<br>

	</body>

<script language="JavaScript">

//<input type="button" value=" 改变全部可见的div元素的背景色为 #0000FF"  id="b1"/>

	$("#b1").click(function(){

		$("div:visible").css("background","red");

	});

//<input type="button" value=" 选取全部不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF"  id="b2"/>

	$("#b2").click(function(){

		$("div:hidden").show();

	});

//<input type="button" value=" 选取全部的文本隐藏域, 并打印它们的值"  id="b3"/>

	$("#b3").click(function(){

		$("input:hidden").each(function(i,obj){

			alert(obj.value);

		});

	});

</script>

</html>

黑马day16 jquery&内容过滤选择器&可见度选择器的更多相关文章

黑马day16 jquery&属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取对应的元素 .[attribute] 使用方法: $("div[id]") ; 返回值集合元素说明:匹配包括给定属性的元素.样 ...
黑马day16 jquery&层次选择器
假设想通过DOM元素之间的层次关系来获取特定元素,比如后代元素,子元素,相邻元素,兄弟元素等,则须要使用层次选择器. 1 .ancestor descendant 使用方法: $("form ...
黑马day16 jquery入门
jquery: 1.jQuery 对象就是通过jQuery包装DOM对象后产生的对象. jQuery对象是jQuery独有的.假设一个对象是jQuery对象,那么它就能够使用jQuery里的方法:$( ...
黑马day16 jquery案例演示
案例一: <html> <head> <meta http-equiv="Content-Type" content="text/html; ...
(7)Jquery1.8.3快速入门_内容过滤选择器
一.Jquery的内容过滤选择器: 内容过滤选择器: 1.:contains(text) 选取含有文本内容为text的元素 2. :empty 选取不包含子元素或者文本为空的元素 3.:has(sel ...
JQuery 内容过滤选择器
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
jQuery选择器之内容过滤选择器Demo
测试代码: 04-内容过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
jQuery选择器内容过滤一.:contains(text) 选择器::contains(text)描述:匹配包含给定文本的元素返回值:元素集合示例: ? 1 2 $("div.mini ...
Jquery过滤选择器，选择前几个元素，后几个元素，内容过滤选择器等
一.基本过滤选择器(重点掌握下列八个):first 选取第一个元素 $("div:first").css("color","red");:l ...

随机推荐

通讯框架 t-io 学习——websocket 部分源码解析
前言前端时间看了看t-io的websocket部分源码,于是抽时间看了看websocket的握手和他的通讯机制.本篇只是简单记录一下websocket握手部分. WebSocket握手好多人都用过 ...
最大流——Dinic算法
前面花了很长时间弄明白了压入-重标记的各种方法,结果号称是O(V3)的算法测demo的时候居然TLE了一个点,看了题解发现所有人都是用Dinic算法写的,但它的复杂度O(V2E)明显高于前者,具体是怎 ...
JS获取DOM元素
1.childNodes:获取节点,不同浏览器表现不同: IE:只获取元素节点: 非IE:获取元素节点与文本节点: 解决方案:if(childNode.nodeName=="#text&qu ...
[转载] KAFKA分布式消息系统
转载自http://blog.chinaunix.net/uid-20196318-id-2420884.html Kafka[1]是linkedin用于日志处理的分布式消息队列,linkedin的日 ...
流式数据分析模型kafka+storm
http://www.cnblogs.com/panfeng412/archive/2012/07/29/storm-stream-model-analysis-and-discussion.html ...
Python之getopt模块
1.getopt——C风格命令行解析 http://docs.python.org/2.7/library/getopt.html#module-getopt getopt.getopt(args, ...
Quartus FFT IP核简介
为了突出重点,仅对I/O数据流为steaming的情况作简要说明,以便快速上手,有关FFT ip核模型及每种设置详细介绍请参考官方手册FFT MegaCore Function User Guide. ...
iOS获取所有机型
1.手机系统版本:9.1 NSString* phoneVersion = [[UIDevice currentDevice] systemVersion]; 2.手机类型:iPhone 6 NSSt ...
C++语言中的类型（一）
--分门别类是简化事物最有效的方式. 类型是C++语言的基础,对象类型决定了能对该对象进行的操作. 一.基本内置数据类型 C++预先定义的基本内置数据类型是构造世界万物的原子,数据类型告诉我们数据的意 ...
SQL SERVER 2012 SEQUENCE
一.Sequence简介 Sequence对象对于Oracle用户来说是最熟悉不过的数据库对象了, 在SQL SERVER2012终于也可以看到这个对象了.Sequence是SQL Server201 ...

黑马day16 jquery&amp;内容过滤选择器&amp;可见度选择器

黑马day16 jquery&amp;内容过滤选择器&amp;可见度选择器的更多相关文章

随机推荐

热门专题

黑马day16 jquery&内容过滤选择器&可见度选择器

黑马day16 jquery&内容过滤选择器&可见度选择器的更多相关文章