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     <!-- jQuery内容过滤选择器 -->
  6     <!-- 
  7         :contains(text) 选取含有文本内容为“text”的元素            集合元素        $("div:contains('我')")      选取含有文本“我”的div元素
  8         :empty          选取不包涵子元素或者文本的空元素            集合元素        $("div:empty")                选取不包含子元素（包括文本元素）的div空元素
  9         :has(selector)  选取含有选择器所匹配的元素的元素            集合元素        $("div:has(p)")                选取含有<p>元素的div元素    
 10         :parent            选取含有子元素或者文本的元素                集合元素        $("div:parent")                选取拥有子元素（包括文本元素）的div元素
 11      -->
 12     <meta http-equiv="pragma" content="no-cache">
 13     <meta http-equiv="cache-control" content="no-cache">
 14     <meta http-equiv="expires" content="0">    
 15     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 16     <meta http-equiv="description" content="This is my page">
 17     <script type="text/javascript"  src="../../js/jquery.js"></script>
 18     <style type="text/css">
 19         div,span,p{
 20             width:140px;
 21             height:140px;
 22             margin:5px;
 23             background:#aaa;
 24             border:#000 1px solid;
 25             float:left;
 26             font-size:17px;
 27             font_family:Verdana;
 28         }
 29         div.mini{
 30             width:55px;
 31             height:55px;
 32             background-color:#aaa;
 33             font-size:12px;
 34         }
 35         div.hide{
 36             display:none;
 37         }    
 38     </style>
 39     
 40     <script type="text/javascript" >
 41         
 42         //选取含有文本“di”的div元素背景色
 43         function test1(){
 44             $("div:contains('di')").css("background","#bbffaa");
 45         }
 46         
 47         //选取div里什么都没有的空元素
 48         function test2(){
 49             $("div:empty").css("background","#bbffaa");
 50         }
 51 
 52         //选取div中class是mini的div
 53         function test3(){
 54             $("div:has(.mini)").css("background","#00ff00");
 55         }
 56             
 57         //选取含有内容的div（不管是什么）
 58         function test4(){
 59             $("div:parent").css("background","00ff00");
 60         }    
 61         
 62     </script>
 63   </head>
 64   <body>
 65   
 66       <div id="one" class="one">
 67           id为one  class为one的div
 68           <div class="mini">class为mini</div>
 69       </div>
 70   
 71       <div class="one"  id="two"  title="test">
 72            id为two class为one title为test的div
 73            <div class="mini"  title="other">class为mini  title为other</div>
 74            <div class="mini"  title="test">class为mini  title为test</div>
 75       </div>
 76   
 77       <div class="one">
 78           <div class="mini">class为mini</div>
 79           <div class="mini">class为mini</div>
 80           <div class="mini">class为mini</div>
 81           <div class="mini"></div>
 82       </div>
 83   
 84       <div class="one">
 85           <div class="mini">class为mini</div>
 86           <div class="mini">class为mini</div>
 87           <div class="mini">class为mini</div>
 88           <div class="mini" title="tesst">class为mini title为tesst</div>
 89       </div>
 90   
 91       <div style="display:none;"  class="none">
 92           style为display class为none的div
 93       </div>
 94   
 95     <div class="hide">class为hide的div</div>  
 96   
 97   
 98       <div>
 99           包涵input的type为hidden的div<input  type="hidden"  size="8"/>
100       </div>
101       
102       <span id="mover">正在执行动画的span元素</span>
103       
104       
105       <br>
106       <input type="button" onclick="test1()"  value="改变含有文本“di”的div元素的背景色"/>
107       <input type="button" onclick="test2()"  value="改变不包含子元素（包括文本元素）的div空元素的背景色"/>
108       <input type="button" onclick="test3()"  value="改变含有class为mini的元素的div元素的背景色"/>
109       <input type="button" onclick="test4()"  value="改变含有子元素（包括文本元素）的div元素的背景色"/>
110       
111       
112   </body>
113 </html>