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>
时间： 2024-10-03 23:02:45