jquery:内容过滤选择器和属性过滤选择器

原创 2012年03月21日 23:34:02

内容过滤选择器

   ①$("div:contains('您好')"):选出包含有文本"您好"的<div>

元素
        注意:只是内容
 
   ②$("div:empty"):选取不包含子元素(包含文本节点)的<div>

元素

   ③$("div:has(p)") 或者$(“div:has(.class)”)
:选取包含有

<p>元素的<div>元素

   ④$(“div:parent”):选取拥有子元素(包括文本元素)的

<div>

   ⑤$(“div:not(:contains(‘aa’))”):选择不包含内容有“

aa“的div 

   ⑥$("div:hidden").show().css("background","green"):匹

配所有的不可见div元素也可以是input的hidden

   ⑦$("div:visible").css("background","green"):匹配所有

的可见元素 $(div:visible)


  案例:显示所有的input hidden:

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

   jquery:

      //显示隐藏的input $(input:hidden) 第一种
 $("#btn8").click(function (){
   
  $("input:hidden").each(function (i){
  //alert(i);
  alert(this.value);
  });   
  });  
  
  
     //显示隐藏的input $(input:hidden) 第二种
 $("#btn8_2").click(function (){
   
 $("input:hidden").each(function (index,domEle){
  //alert(index);
  //alert(domEle.value);
  alert($(domEle).val());
      });   
  });  
  
  
    //显示隐藏的input $(input:hidden) 第三种
 $("#btn8_3").click(function (){
   
     var input=$("input");
  $.each(input,function (index,domEle){
  //alert(index);
  //alert(domEle.value);
  alert($(domEle).val());
     });   
  });  

 

   小案例2:
           给每个p标签加一个onclick属性,并点击时显示值

       <p>这是第一个段落</p>
       <p>这是第二个段落</p>
       <p>这是第三个段落</p>
       <p>这是第四个段落</p>

       $("p").each(function (index,Element){
       $(Element).click(function(){
      //alert("aa");
     alert($(this).text());
     });
   
    });

属性过滤选择器
  
    ①$(“div[id]”):选取拥有属性id的div元素
    ②$("div[id=one]")选取id=one的div $(div[id=one])
    ③$("div[id!=one]")选取id不=one的div $(div[id!=one])
   
    ④$("div[id][class!=three]")选取含有id且class!=three

的div $(div[id][class!=three])

    ⑤$("div[id^=o]")选取拥有id属性并且以o为开头的div

$(div[id^=o])

    ⑥$("div[id$=e]")选取拥有id属性并且以e为结尾的div

$(div[id$=e])

    ⑦$("div[class*=n]")选取拥有class属性并且含有n的div

$(div[class*=n])

    ⑧$("div[id*=h][class]")选取拥有class属性并且id含有h的

div $(div[id*=h][class])

 

 

 

<!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>
<style type="text/css">
div{
	width:150px;
	height:150px;
	background-color:#999;
	float:left;
	margin:30px;}

#three{
	width:100px;
	height:100px;
	margin:15px;
	background-color:#F90;}
	
.seven{
	display:none;}	
</style>
<script type="text/javascript" src="../include/jquery.js"></script>
<script type="text/javascript">
  
    $(document).ready(function (){
		
		//选中内容包含您好的div $(div:contains('您好'))
		$("#btn1").click(function (){
			
			$("div:contains('您好')").css("background","green");
		  });
			
		
		//选取不包含子元素(包括文本节点)的<div>元素 $(div:empty)
		$("#btn2").click(function (){
			
			$("div:empty").css("background","green");
		  });
		  
		  
		 //选取包含<p>元素的div $(div:has(p))
		 //包含各种标签都行<span>
		 //这样也行$("p:has(span)")
		$("#btn3").click(function (){
			
			$("div:has(p)").css("background","green");
		  });
				
			
		
		//选取拥有子元素包括文本节点的div $(div:parent)
		//parent与empty相反
		$("#btn4").click(function (){
			
			$("div:parent").css("background","green");
		  });	
			
		
		//选中内容不包含您好的div $(div:not(:contains('您好')))
		$("#btn5").click(function (){
			
			$("div:not(:contains('您好'))").css("background","green");
		  });	
		  
		  
		//匹配所有的不可见元素 $(div:hidden)
		$("#btn6").click(function (){
			
			$("div:hidden").show().css("background","green");
		  });	
		  
		  
		//匹配所有的可见元素 $(div:visible)
		$("#btn7").click(function (){
			
			$("div:visible").css("background","green");
		  });  
		  
		 
		 //显示隐藏的input $(input:hidden) 第一种
		$("#btn8").click(function (){
			
			$("input:hidden").each(function (i){
				//alert(i);
				alert(this.value);
				});			
		  });   
		
		
		//显示隐藏的input $(input:hidden) 第二种
		$("#btn8_2").click(function (){
			
			$("input:hidden").each(function (index,domEle){
				//alert(index);
				//alert(domEle.value);
				alert($(domEle).val());
				});			
		  });   
		
		
		//显示隐藏的input $(input:hidden) 第三种
		$("#btn8_3").click(function (){
			
			var input=$("input");
			$.each(input,function (index,domEle){
				//alert(index);
				//alert(domEle.value);
				alert($(domEle).val());
				});			
		  });   
		  
		  
		
		//给每个p标签加一个onclick属性,并点击时显示值  
		    $("p").each(function (index,Element){
		     $(Element).click(function(){
			   //alert("aa");
			  alert($(this).text());
			  });
			 
			 });
		 
		
		
		//选取拥有id的div
		$("#btn9").click(function (){
			
			$("div[id]").css("background","green");
		  });	
		
		
		//选取id=one的div $(div[id=one])
		$("#btn10").click(function (){
			
			$("div[id=one]").css("background","green");
		  });
		  
		  
		  //选取id不=one的div $(div[id!=one])
		$("#btn11").click(function (){
			
			$("div[id!=one]").css("background","green");
		  });
		  
		  
		  //选取含有id且class!=three的div $(div[id][class!=three])
		$("#btn12").click(function (){
			
			$("div[id][class!=three]").css("background","green");
		  });
		  
		  
		 //选取拥有id属性并且以o为开头的div $(div[id^=o])
		$("#btn13").click(function (){
			
			$("div[id^=o]").css("background","green");
		  });
		  
		  
		 //选取拥有id属性并且以e为结尾的div $(div[id$=e])
		$("#btn14").click(function (){
			
			$("div[id$=e]").css("background","green");
		  });
		  
		  
		 //选取拥有class属性并且含有n的div $(div[class*=n])
		$("#btn15").click(function (){
			
			$("div[class*=n]").css("background","green");
		  });
		  
		  
		 //选取拥有class属性并且id含有h的div $(div[id*=h][class])
		$("#btn16").click(function (){
			
			$("div[id*=h][class]").css("background","green");
		  });
		
		
		
		});

</script>
</head>

<body>

  <div id="one">
  
   id=one
    <div id="three" class="three">您好,我是id=three,class=three</div>
    
   </div>
   
 <div id="two">id=two</div>

 <div class="one">class=one
   <span>我是span</span>
 </div>
 
 <div class="two">class=two
   <p>我是一个p <span>我是span</span></p>
 </div>
 
 <div class="six"> </div>
 
 <div class="seven"> </div>
 <div id="one">id=one</div>
 
 <input type="hidden" value="hidden_1">
 <input type="hidden" value="hidden_2">
 <input type="hidden" value="hidden_3">
 <input type="hidden" value="hidden_4">
 
 <p>这是第一个段落</p>
 <p>这是第二个段落</p>
 <p>这是第三个段落</p>
 <p>这是第四个段落</p>

 <div style="width:150px; height:150px; clear:both;">
  
   <input type="button" id="btn0" value="清除样式">
   <input type="button" id="btn1" value="选中内容包含您好的div $(div:contains('您好'))">
   <input type="button" id="btn2" value="选取不包含子元素(包括文本节点)的<div>元素 $(div:empty)">
   <input type="button" id="btn3" value="选取包含<p>元素的div $(div:has(p))">
   <input type="button" id="btn4" value="选取拥有子元素包括文本元素的div $(div:parent)">
   <input type="button" id="btn5" value="选中内容不包含您好的div $(div:not(:contains('您好')))">
   <input type="button" id="btn6" value="匹配所有的不可见元素 $(div:hidden)">
   <input type="button" id="btn7" value="匹配所有的可见元素 $(div:visible)">
   <input type="button" id="btn8" value="显示隐藏的input 第一种 $(input:hidden)">
   <input type="button" id="btn8_2" value="显示隐藏的input 第二种 $(input:hidden)">
   <input type="button" id="btn8_3" value="显示隐藏的input 第三种 $(input:hidden)">
   <input type="button" id="btn9" value="选取拥有属性id的div $(div[id])">
   <input type="button" id="btn10" value="选取id=one的div $(div[id=one])">
   <input type="button" id="btn11" value="选取id不=one的div $(div[id!=one])">
   <input type="button" id="btn12" value="选取含有id且class!=three的div $(div[id][class!=three])">
   <input type="button" id="btn13" value="选取拥有id属性并且以o为开头的div $(div[id^=o])">
   <input type="button" id="btn14" value="选取拥有id属性并且以e为结尾的div $(div[id$=e])">
   <input type="button" id="btn15" value="选取拥有class属性并且含有n的div $(div[class*=n])">
   <input type="button" id="btn16" value="选取拥有class属性并且id含有h的div $(div[id*=h][class])">
 
 </div>

</body>
</html>


 

 

 

Jquery内容、可见度、属性过滤选择器的理解和简单语句说明

Jquery内容过滤选择器 一、概念:根据节点内容进行选择,实现了对基本内容的过滤 二、用途:1、可以实现内容的过滤         2、判断选择指定元素内的元素         3、判断特殊...

jQuery(2-4)内容过滤选择器

基本选择器.html                       -->         div,span,p{ width: 170px; height:17...

锋利jquery---内容过滤选择器(第二章)

2-7 $(document).ready(function(){ //选取含有文本"di"的div元素. $('#btn1').click(funct...

jQuery 的内容过滤选择器

Untitled Document div, span, p { width: 140px; height: 140px; margin: ...

jquery内容过滤选择器

04-内容过滤选择器.html 内容过滤选择器. 手动重置页面元素 点击下列按钮时先自动重置页面 $('#btn1').click(funct...

JQuery 内容过滤选择器

HTML页面结构: contains(text)   empty  has(selector)  parent  内容过滤选择器 Test Resign JIMD Martin Malcom T...

jQuery_内容过滤选择器

Untitled Document div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; ...

jQuery内容、可见性过滤选择器

body{ font-family: "Microsoft YaHei" } .divCls { width:180px; height:180...

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

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素 1、[attribute] 用法: $(”div[id]“) ;  返回值  集合元素       说明:匹配包含给定属性的元素.例子...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery:内容过滤选择器和属性过滤选择器
举报原因:
原因补充:

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