jQuery内容过滤选择器选择元素


jQuery内容过滤选择器选择元素:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>使用jQuery内容过滤选择器</title>  
  5.     <script language="javascript" type="text/javascript"   
  6.             src="../Jscript/jquery-1.5.2.js"></script>  
  7.     <style type="text/css">  
  8.            body{font-size:12px;text-align:center}  
  9.            div{float:left;border:solid 1px #ccc;margin:8px;width:65px;height:65px;display:none}  
  10.            span{float:left;border:solid 1px #ccc;margin:8px;width:45px;height:45px;background-color:#eee}  
  11.     </style>  
  12.     <script type="text/javascript">  
  13.             $(function(){ //显示包含给定文本的元素  
  14.               $("div:contains('A')").css("display","block");  
  15.             })  
  16.             $(function(){ //显示所有不包含子元素或者文本的空元素  
  17.               $("div:empty").css("display","block");  
  18.             })  
  19.             $(function(){ //显示含有选择器所匹配的元素的元素  
  20.               $("div:has(span)").css("display","block");  
  21.             })  
  22.             $(function(){ //显示含有子元素或者文本的元素  
  23.               $("div:parent").css("display","block");  
  24.             })  
  25.     </script>  
  26. </head>  
  27. <body>  
  28.     <div>ABCD</div>  
  29.     <div><span></span></div>  
  30.     <div>EFaH</div>  
  31.     <div></div>  
  32. </body>  
  33. </html>  

说明：在:contains(text)内容过滤选择器中。如果是查找字母，则有大小写的区别。

相关内容