jquery内容过滤选择器、属性过滤选择器和jquery可见度过滤选择器

原创 2012年03月21日 19:46:22
 

一、 jquery内容过滤选择器

根据内容进行选择(根据节点的内容)
实现了对基本内容的过滤
用途:
      1)可以实现内容的过滤
      2)判断选择指定元素内的元素
      3)判断特殊需求的元素(空、拥有等)
改变所有可见的div元素的背景色为 #0000FF
选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF
选取所有的文本隐藏域, 并打印它们的值
$(“div:contains(‘您好’)”)
 选出包含有文本“您好”的<div>元素  $(“div:empty”) 选取不包含子元素(包括文本节点)的<div>元素
$(“div:has(p)”) 或者$(“div:has(.classss)”)
    选取包含有<p>元素的<div>元素
$(“div:parent”) 选取拥有子元素(包括文本元素)的<div>
$(“div:not(:contains(‘aa’))”)选择不包含内容有“aa“的div

二、jquery可见度过滤选择器

可见度过滤选择器是根据元素的可见和不可见状态来选择相应的元素
1、:hidden
用法: $(”tr:hidden”)  返回值  集合元素
     说明: 匹配所有的不可见元素,input 元素的 type 属性为 “hidden” 的话也会被匹配到.意思是css中display:none和input type=”hidden”的都会被匹配到.同样,要在脑海中彻底分清楚冒号”:”, 点号”.”和逗号”,”的区别.
2、:visible
用法: $(”tr:visible”)  返回值  集合元素
    说明: 匹配所有的可见元素.

三、jquery属性过滤选择器

jQuery属性过滤选择器
$(“div[id]”):选取拥有属性id的div元素
$(“div[title= str]”) 选取拥有title等于str值的div元素
$(“div[title!= str]”) 选取title不等于str的div元素
组合使用$(“div[id][title!= str]”)
$(“div[title^= str]”) 选取拥有属性title,并且title属性值以str开头的div元素
$(“div[title$= str]”) 选取拥有属性title,并且title属性值以str结尾的div元素
$(“div[title*= str]”) 选取拥有属性title,并且title属性值含有str的div元素
$(“div[title*= str][class]”) 选取拥有属性title,并且title属性值含有str,并且有class属性的div元素
下面是内容过滤选择器的例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>内容选择器学习</title>
<script language="javascript" type="text/javascript" src="../jquery-1.6.js"></script>
<style>
  div{
	  width:150px;
	  height:150px;
	  border:1px dashed #00F;
	  background-color:#CCC;
	  margin:5px;
	  float:left;}
	  
  .one-1{
	  width:80px;
	  margin:30px;
	  height:80px;
	  border:1px dashed #00F;
	  background-color: #FFC;
	  }

</style>



<script language="javascript" type="text/javascript">

//使用jquery加载事件
$(document).ready(function (){
	
	//<input id="btn0" type="button" value="清空样式" />
	$("#btn0").click(function (){
		
		//当点击按钮后,设置id=two的div的背景颜色是绿色
		$("*").removeAttr("style");
		
	});
	
	
	//<input id="btn1" type="button" value="选中内容包含'two'的DIV $('div:contains('two')')" />
	
	//增加id为btn1按钮的事件
	$("#btn1").click(function (){
		
		//选取内容包含two的div
		$("div:contains('two')").css("background","green");
		
	});
	
	//<input id="btn2" type="button" value="选中内容为空或者不包含子元素的div $('div:empty')" />
	$("#btn2").click(function (){
		
		//选取内容包含two的div
		$("div:empty").css("background","green");
		
	});	
	
	//<input id="btn3" type="button" value="选中包含span的div $(div:has(span))" />
	$("#btn3").click(function (){
		
		//选取内容包含two的div
		$("div:has(span)").css("background","green");
		
	});	
	
	//<input id="btn4" type="button" value="选中含有子元素或者文本内容的div $('div:parent')" />
	$("#btn4").click(function (){
		
		//选取内容包含two的div
		$("div:parent").css("background","green");
		
	});	
	
	//<input id="btn5" type="button" value="选中内容中不包含'two'的div  $('div:not(:contains('two'))')" />
	$("#btn5").click(function (){
		
		//选取内容包含two的div
		$("div:not(:contains('two'))").css("background","green");
		
	});				
	
	
});





</script>



</head>

<body>
<div id="one">id=one
   <div class="one-1">class=one-1</div>
</div>
<div id="two">id=two<br><span>id=two,span的内容<span>1111111111</span></span></div>

<div id="three">id=three<br><span>id=three,span的内容</span></div>
<div class="d2">class=d2</div>

<div class="d2"></div>
<div class="d2"><span></span></div>

<p class='p'>这里放了一个pi<br><span>pi里还有span</span></p>

<div style="clear:both;">
<input id="btn0" type="button" value="清空样式" />
<input id="btn1" type="button" value="选中内容包含'two'的DIV $('div:contains('two')')" />
<input id="btn2" type="button" value="选中内容为空或者不包含子元素的div $('div:empty')" />
<input id="btn3" type="button" value="选中包含span的div $(div:has(span))" />
<input id="btn4" type="button" value="选中含有子元素或者文本内容的div $('div:parent')" />
<input id="btn5" type="button" value="选中内容中不包含'two'的div  $('div:not(:contains('two'))')" />

</div>
</body>
</html>
下面是属性过滤选择器的例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>属性选择器学习</title>
<script language="javascript" type="text/javascript" src="../../include/jquery.js"></script>
<style>
  div{
	  width:150px;
	  height:150px;
	  border:1px dashed #00F;
	  background-color:#CCC;
	  margin:5px;
	  float:left;}
	  
  .one-1{
	  width:80px;
	  margin:30px;
	  height:80px;
	  border:1px dashed #00F;
	  background-color: #FFC;
	  }

</style>



<script language="javascript" type="text/javascript">

//使用jquery加载事件
$(document).ready(function (){
	
	//<input id="btn0" type="button" value="清空样式" />
	$("#btn0").click(function (){
		
		//当点击按钮后,设置id=two的div的背景颜色是绿色
		$("*").removeAttr("style");
		
	});
	
	
	//<input id="btn1" type="button" value="选中拥有id属性的div元素 $('div[id]')" />

	$("#btn1").click(function (){
		
		$("div[id]").css("background","green");
		
	});
	
	
	//<input id="btn2" type="button" value="选中class等于d2的div元素  $('div[class=d2]')" />
	$("#btn2").click(function (){
		
		$("div[class=d2]").css("background","green");
		
	});	
	
	//<input id="btn3" type="button" value="选中class不等于d2的div元素  $('div[class=d2]')" />
   	$("#btn3").click(function (){
		
		$("div[class!=d2]").css("background","green");
		
	});	
	
	//<input id="btn4" type="button" value="选中class等于abcd2,并且id=five  $('div[class=abcd2][id=five]')" />
   	$("#btn4").click(function (){
		
		$("div[class=abcd2][id=five]").css("background","green");
		
	});	
	
	//<input id="btn5" type="button" value="选中有class属性且值以'a'开头的div  $('div[class^=a]')" />
   	$("#btn5").click(function (){
		
		$("div[class^=a]").css("background","green");
		
	});	
	
	//<input id="btn6" type="button" value="选中有class属性且值以'2'结尾的div  $('div[class$=2]')" />
	
   	$("#btn6").click(function (){
		
		$("div[class$=2]").css("background","green");
		
	});	
	
    //<input id="btn7" type="button" value="选中有class属性属性值包含'a'的div  $('div[class*=a]')" />
   	$("#btn7").click(function (){
		
		$("div[class*=b]").css("background","green");
		
	});		
	
	
});





</script>



</head>

<body>
<div id="one">id=one
   <div class="one-1">class=one-1</div>
</div>
<div id="two">id=two<br><span>id=two,span的内容<span>1111111111</span></span></div>

<div id="three">id=three<br><span>id=three,span的内容</span></div>
<div id="four" class="abcd2">id=four,class=abcd2</div>
<div id="five" class="abcd2">id=five,class=abcd2</div>

<div class="a3b5"></div>
<div class="d2"><span></span></div>


<div style="clear:both;">
<input id="btn0" type="button" value="清空样式" />
<input id="btn1" type="button" value="选中拥有id属性的div元素 $('div[id]')" />
<input id="btn2" type="button" value="选中class等于d2的div元素  $('div[class=d2]')" />
<input id="btn3" type="button" value="选中class不等于d2的div元素  $('div[class=d2]')" />
<input id="btn4" type="button" value="选中class等于abcd2,并且id=five  $('div[class=abcd2][id=five]')" />
<input id="btn5" type="button" value="选中有class属性且值以'a'开头的div  $('div[class^=a]')" />
<input id="btn6" type="button" value="选中有class属性且值以'2'结尾的div  $('div[class$=2]')" />
<input id="btn7" type="button" value="选中有class属性属性值包含'b'的div  $('div[class*=b]')" />

</div>
</body>
</html>

下面是可见度过滤选择器的例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可见度过滤选择器学习</title>
<script language="javascript" type="text/javascript" src="../../include/jquery.js"></script>
<style>
  div{
	  width:150px;
	  height:150px;
	  border:1px dashed #00F;
	  background-color:#CCC;
	  margin:5px;
	  float:left;}
	  
  .one-1{
	  width:80px;
	  margin:30px;
	  height:80px;
	  border:1px dashed #00F;
	  background-color: #FFC;
	  }
	  
  .hide{
	  display:none;
	  }

</style>



<script language="javascript" type="text/javascript">

//使用jquery加载事件
$(document).ready(function (){
	
	//<input id="btn0" type="button" value="清空样式" />
	$("#btn0").click(function (){
		
		//当点击按钮后,设置id=two的div的背景颜色是绿色
		$("*").removeAttr("style");
		
	});
	
	
	//<input id="btn1" type="button" value="匹配所有可见元素,并且设置背景颜色为绿色 $('div:visible')" />
	
	//增加id为btn1按钮的事件
	$("#btn1").click(function (){
		
		//选取可见元素
		$("div:visible").css("background","green");
		
	});
		
	//<input id="btn2" type="button" value="匹配隐藏的div并且设置可见 $(div:hidden)" />
	$("#btn2").click(function (){
		
		//选取隐藏元素
		$("div:hidden").show().css("background","green");
		
	});
	
	//<input id="btn3" type="button" value="获取隐藏的文本域的值  $(input:hidden)" />
	$("#btn3").click(function (){
		
		//匹配所有隐藏的文本域
	   //-----------------第一种方法-----------
       /* $("input:hidden").each(function (i){
			//this是dom元素,使用dom方式获取值
			//alert(this.value);
			
			//用jquery的方式获取 $(this)相当于是将dom转换为jquery对象
			//alert($(this).val());
		});*/
		
		
		//-----------------第二种方法-----------
		//                               索引值  dom元素
		/*$("input:hidden").each(function (index,domEle){
			
			//使用dom的方式
			//alert(domEle.value);
			
			//使用jquery的方式
			alert($(domEle).val());
			
		});*/
		
		//-----------------第三种方法-------------
		var input=$("input");
		
		$.each(input,function (index,domEle){
			
			//使用dom的方式
			//alert(domEle.value);
			
			//使用jquery的方式
			alert($(domEle).val());
			
		});
		
		
		
		
	});	
	
	
	
	
});





</script>



</head>

<body>
<div id="one">id=one
   <div class="one-1">class=one-1</div>
</div>
<div id="two">id=two<br><span>id=two,span的内容<span>1111111111</span></span></div>

<div id="three">id=three<br><span>id=three,span的内容</span></div>
<div class="d2">class=d2</div>

<div class="hide"></div>
<div class="d2"><span></span></div>

<p class='p'>这里放了一个pi<br><span>pi里还有span</span></p>

<input type="hidden" value="hidden_1" />
<input type="hidden" value="hidden_2" />
<input type="hidden" value="hidden_3" />
<input type="hidden" value="hidden_4" />
<input type="hidden" value="hidden_5" />

<div style="clear:both;">
<input id="btn0" type="button" value="清空样式" />
<input id="btn1" type="button" value="匹配所有可见元素,并且设置背景颜色为绿色 $('div:visible')" />
<input id="btn2" type="button" value="匹配隐藏的div并且设置可见 $(div:hidden)" />

<input id="btn3" type="button" value="获取隐藏的文本域的值  $(input:hidden)" />
</div>
</body>
</html>



jQuery过滤选择器——属性过滤选择器

属性过滤选择器属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素 1、[attribute] 用法: $(”div[id]“) ; 返回值:集合元素 说明: 匹配包含给...
  • cckevincyh
  • cckevincyh
  • 2016年11月13日 20:55
  • 984

jQuery过滤选择器详解

基本过滤选择器选取第一个元素(:first) //选择第一个div元素. $('#btn1').click(function(){ $('div:first...
  • csujiangyu
  • csujiangyu
  • 2015年08月19日 10:19
  • 5958

jQuery基础教程之强大的选择器(过滤选择器-可见性过滤选择器)

在上一篇文章jQuery教程基础篇之强大的选择器(过滤选择器-内容过滤选择器)中,我们了解了jQuery内容过滤选择器的知识,今天我们来学习一下jQuery的另一个强大的过滤选择器——可见性过滤选择器...
  • wql19881207
  • wql19881207
  • 2012年03月31日 14:06
  • 493

Jquery简单过滤选择器(应用最广泛的选择器)

(1)Jquery中简单过滤选择器 jquery根据某一类过滤规则进行元素匹配,书写时以:开头,是Jquery中应用最为广泛的选择器 (2)简单过滤选择器的基本语法 ①first()或者...
  • qq_29854443
  • qq_29854443
  • 2017年05月04日 21:37
  • 172

jQuery过滤选择器——子元素过滤选择器

子元素过滤选择器1、:nth-child(index/even/odd/equation) 用法: $(”ul li:nth-child(2)”) 返回值 :集合元素 说明...
  • cckevincyh
  • cckevincyh
  • 2016年11月13日 21:04
  • 1108

Jquery 可见性过滤器选择器

1.可见性过滤选择器根据元素的可见性和不可见性来选择相应的元素。 其中元素可见性表示为:visible;元素的不可见行为hidden。 返回的都是集合元素。其中hidden不仅包含样式属性为(di...
  • qq_27603235
  • qq_27603235
  • 2016年05月16日 13:37
  • 369

Jquery的过滤选择器分为哪几种?

Jquery的过滤选择器分为哪几种? 转载▼ 标签:  jquery   过滤选择器   分类 分类: JQuery 所有的过滤选择器分为哪几种: 一、基本过滤选择器(...
  • u013700340
  • u013700340
  • 2014年03月19日 11:49
  • 1078

Jquery选择器分类(基本选择器,层次选择器,过滤选择器,表单选择器)

基本选择器 说明:通过元素id、class和标签名等来查找DOM元素 1.id选择器:$("#test");//选取id为test的元素 2.类选择器:$(".test");//选取所有class为...
  • allan492975230
  • allan492975230
  • 2013年08月01日 15:50
  • 1165

JQuery里的子元素过滤选择器,加空格与不加空格的区别

最近学习jquery,发现它的选择器的写法与css的基本语法很像,加不加空格差别很大。 $(“:first-child)——:first只是返回单个元素,而first-child选择符将为每个父元素...
  • u010552788
  • u010552788
  • 2016年03月08日 14:25
  • 2010

jquery可见性过滤选择器

1.可见性过滤选择器 可见性过滤选择器根据元素是否可见的特征获取元素2.可见性过滤选择器的语法 (1):hidden获取不可见元素,或者type为hidden的元素集合 (2) :visible...
  • qq_29854443
  • qq_29854443
  • 2017年05月09日 22:14
  • 123
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery内容过滤选择器、属性过滤选择器和jquery可见度过滤选择器
举报原因:
原因补充:

(最多只允许输入30个字)