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 <!-- 层次选择器 --> 6 <!-- 7 $("ancestor descendant") 选取ancestor元素里的所有descendant（后代）元素(不管是子辈，还是孙子辈) 集合元素 $("div span") 选取<div>里的所有<span>的元素 8 $("parent > child") 选取parent元素下的child（子）元素，（父辈下的子辈，不包括孙辈） 集合元素 $("div > span") 选取<div>下元素名是<span>的子元素 9 $("prve + next") 选取紧接在prev元素后的next元素 集合元素 $(".one + div ")选取class为one的下一个<div>元素 10 $("prev ~ siblings") 选取prev元素之后的所有siblings元素 集合元素 $("#two ~ div") 选取id为two的元素后的所有<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 //祖先一下全部选择（包括父辈、子备、孙辈） 43 function test1(){ 44 $("body div").css("background","#bbffaa"); 45 } 46 47 //父辈选择子辈 （不包括孙辈。。） 48 function test2(){ 49 $("body > div").css("background","00ff00"); 50 } 51 52 //改变class为one的下一个同辈div颜色 （第一个不变 之后的div都改变颜色） （自身不改变） 53 function test3(){ 54 $(".one + div").css("background","ff00ff"); 55 //等价方法 56 //$(".one").next("div").css("background","ff00ff");; 57 58 59 } 60 61 //改变id为two之后所有的同辈div颜色 （自身不改变） 62 function test4(){ 63 $("#two ~ div").css("background","ff99ff"); 64 //等价方法 65 //$("#two").nextAll("div").css("background","ff99ff"); 66 } 67 68 //siblings方法与前后位置无关 只要是同辈关系 就都能匹配 （自身不改变） 69 function test5(){ 70 $("#two").siblings("div").css("background","ff99ff"); 71 72 } 73 74 </script> 75 </head> 76 <body> 77 78 <div id="one" class="one"> 79 id为one class为one的div 80 <div class="mini">class为mini</div> 81 </div> 82 83 <div class="one" id="two" title="test"> 84 id为two class为one title为test的div 85 <div class="mini" title="other">class为mini title为other</div> 86 <div class="mini" title="test">class为mini title为test</div> 87 </div> 88 89 <div class="one"> 90 <div class="mini">class为mini</div> 91 <div class="mini">class为mini</div> 92 <div class="mini">class为mini</div> 93 <div class="mini"></div> 94 </div> 95 96 <div class="one"> 97 <div class="mini">class为mini</div> 98 <div class="mini">class为mini</div> 99 <div class="mini">class为mini</div> 100 <div class="mini" title="tesst">class为mini title为tesst</div> 101 </div> 102 103 104 <div style="display:none;" class="none"> 105 style为display class为none的div 106 </div> 107 108 <div class="hide">class为hide的div</div> 109 110 111 <div> 112 包涵input的type为hidden的div<input type="hidden" size="8"/> 113 </div> 114 115 <span id="mover">正在执行动画的span元素</span> 116 117 <br> 118 <input type="button" onclick="test1()" value="改变body内所有的div背景色"/> 119 <input type="button" onclick="test2()" value="改变body内子div背景色"/> 120 <input type="button" onclick="test3()" value="改变class为one的下一个div同辈元素"/> 121 <input type="button" onclick="test4()" value="改变id为two的元素后面的所有div同辈元素的背景色"/> 122 <input type="button" onclick="test5()" value="siblings()方法"> 123 124 125 126 </body> 127 </html>