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

关注

原创最新推荐文章于 2026-01-28 10:15:02 发布 1.4k 阅读 AI 写同款· GEO 优化 ›

jQuery(简介、特点、使用方法、【重点】jQuery的选择器：是jQuery的灵魂、jQuery的属性：操作标签的属性) jQuery(简介、特点、使用方法、【重点】jQuery的选择器：是jQuery的灵魂) 阅读详情

内容过滤选择器

①$("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:

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>