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 :nth-child(index/even/add/equation) 选取每个父元素下的第index个子元素或者奇偶元素（index从1开始） 集合元素 8 :eq(index)只匹配一个元素，而:nth-child将为每一个父元素匹配子元素 9 并且:nth-child(index)的index是从1开始 而:eq(index)是从0开始 10 :nth-child(3n) 能选取么给父元素下的索引是3的倍数的元素 11 12 :first-child 选取每个父元素的第一个子元素 集合元素 13 :first 只返回单个元素 14 :first-child将为每个赋予阿奴匹配第一个子元素 15 例如 $("ul li :first-child") 选取没给ul中第一个li元素 16 17 :last-child 选取没给父元素最后一个子元素 同上 18 19 :only-child 如果某个元素是它父元素总唯一的一个子元素 那么将会被匹配 集合元素 20 $("ul li :only-child") 21 --> 22 <meta http-equiv="pragma" content="no-cache"> 23 <meta http-equiv="cache-control" content="no-cache"> 24 <meta http-equiv="expires" content="0"> 25 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 26 <meta http-equiv="description" content="This is my page"> 27 <script type="text/javascript" src="../../js/jquery.js"></script> 28 <style type="text/css"> 29 div,span,p{ 30 width:140px; 31 height:140px; 32 margin:5px; 33 background:#aaa; 34 border:#000 1px solid; 35 float:left; 36 font-size:17px; 37 font_family:Verdana; 38 } 39 div.mini{ 40 width:55px; 41 height:55px; 42 background-color:#aaa; 43 font-size:12px; 44 } 45 div.hide{ 46 display:none; 47 } 48 </style> 49 50 <script type="text/javascript" > 51 52 //选取class为one的div父元素下的第2个子元素 注意:号前的空格 53 function test1(){ 54 $("div.one :nth-child(2)").css("background","#bbffaa"); 55 } 56 57 //选取class为one的div父元素下的第一个子元素 注意:号前的空格 58 function test2(){ 59 $("div.one :first-child").css("background","#bbffaa"); 60 } 61 62 //选取class为one的div父元素下的最后一个子元素 注意:号前的空格 63 function test3(){ 64 $("div.one :last-child").css("background","#00ff00"); 65 } 66 67 //选取class为one 并且父元素下只有一个子元素 注意:号前的空格 68 function test4(){ 69 $("div.one :only-child").css("background","00ff00"); 70 } 71 72 </script> 73 </head> 74 <body> 75 76 <div id="one" class="one"> 77 id为one class为one的div 78 <div class="mini">class为mini</div> 79 </div> 80 81 <div class="one" id="two" title="test"> 82 id为two class为one title为test的div 83 <div class="mini" title="other">class为mini title为other</div> 84 <div class="mini" title="test">class为mini title为test</div> 85 </div> 86 87 <div class="one"> 88 <div class="mini">class为mini</div> 89 <div class="mini">class为mini</div> 90 <div class="mini">class为mini</div> 91 <div class="mini"></div> 92 </div> 93 94 <div class="one"> 95 <div class="mini">class为mini</div> 96 <div class="mini">class为mini</div> 97 <div class="mini">class为mini</div> 98 <div class="mini" title="tesst">class为mini title为tesst</div> 99 </div> 100 101 <div style="display:none;" class="none"> 102 style为display class为none的div 103 </div> 104 105 <div class="hide">class为hide的div</div> 106 107 108 <div> 109 包涵input的type为hidden的div<input type="hidden" size="8"/> 110 </div> 111 112 <span id="mover">正在执行动画的span元素</span> 113 114 115 <br> 116 <input type="button" onclick="test1()" value="改变每个class为one的div父元素下的第2个子元素的背景色"/> 117 <input type="button" onclick="test2()" value="改变没个class为one的div父元素下的第一个子元素的背景色"/> 118 <input type="button" onclick="test3()" value="改变没给class为one的div父元素下的最后一个子元素的背景色"/> 119 <input type="button" onclick="test4()" value="如果class为one的div父元素下只有一个子元素 那么改变这个子元素的背景色"/> 120 121 </body> 122 </html>