黑马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>

时间： 2024-10-03 13:50:10

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

黑马day16 jquery&属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素 1.[attribute] 用法: $("div[id]") ; 返回值集合元素说明:匹配包含给定属性的元素.例子中是选取了所有带"id"属性的div标签. 2.[attribute=value] 用法: $("input[name='newsletter']").attr("checked", true); 返回值集合元素说明:匹配给定的属性是某个

jQuery内容过滤选择器

1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 3 <html> 4 <head> 5  6 <

JQuery 内容过滤选择器

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link href="../../CSS/2-8.css" rel="stylesheet&

黑马day16 jquery基本选择器

基本选择器是 jQuery中最常用的选择器,也是最简单的选择器,它通过元素id,class 和标签名来查找DOM元素(在网页中 id只能使用一次,class 允许重复使用). 1.#id 用法: $("#myDiv"); 返回值单个元素的组成的集合说明:这个就是直接选择html中的id="myDiv" 2.Element 用法: $("div") 返回值集合元素说明:element的英文翻译过来是&q

黑马day16 jquery&amp;层次选择器

假设想通过DOM元素之间的层次关系来获取特定元素,比如后代元素,子元素,相邻元素,兄弟元素等,则须要使用层次选择器. 1 .ancestor descendant 使用方法: $("form input") ; 返回值集合元素说明:在给定的祖先元素下匹配全部后代元素.这个要以下讲的"parent> child"区分开. 2.parent > child 使用方法: $("form > input") ; 返回值

黑马day16 jquery&层次选择器

如果想通过DOM元素之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素,兄弟元素等,则需要使用层次选择器. 1 .ancestor descendant 用法: $("form input") ; 返回值集合元素说明:在给定的祖先元素下匹配所有后代元素.这个要下面讲的"parent> child"区分开. 2.parent > child 用法: $("form > input") ; 返回值集合元

黑马day16 jquery&基本过滤器

1.:first 用法:$("tr:first") ; 返回值单个元素的组成的集合说明: 匹配找到的第一个元素 2.:last 用法:$("tr:last") 返回值集合元素说明: 匹配找到的最后一个元素.与 :first 相对应. 3.:not(selector) 用法:$("input:not(:checked)")返回值集合元素说明: 去除所有与给定选择器匹配的元素.有点类似于"非",意思是没有被选中的

黑马day16 jquery入门

jquery: 1.jQuery 对象就是通过jQuery包装DOM对象后产生的对象. jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的方法:$("#test").html(); 比如: $("#test").html() 意思是指:获取ID为test的元素内的html代码.其中html()是jQuery里的方法这段代码等同于用DOM实现代码: document.getElementById(" t

黑马day16 jquery案例演示

案例一: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="JavaScript" src="../js/jquery-1.4.2.js"></script> <title>无标题文档</title