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>