1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6 <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
7 <!-- 为了测试，先添加一些样式 -->
8 <style type="text/css">
9 div,span,p {
10 width:140px;
11 height:140px;
12 margin:5px;
13 background:#aaa;
14 border:#000 1px solid;
15 float:left;
16 font-size:17px;
17 font-family:Verdana;
18 }
19 div.mini {
20 width:55px;
21 height:55px;
22 background-color: #aaa;
23 font-size:12px;
24 }
25 div.hide {
26 display:none;
27 }
28 </style>
29
30 <script type="text/javascript">
31 //jQuery的页面加载完成时触发的事件
32 $(document).ready(function(){
33 //$("div:first")表示：选择第一个div标签
34 $(button1).click(function(){
35 $("div:first").css("background-color", "red");
36 });
37
38 //$("div:last")表示：选择最后一个div标签
39 $(button2).click(function(){
40 $("div:last").css("background-color", "red");
41 });
42
43 //$("div:not(.one)")表示：选择除了class为one的所有div标签
44 $(button3).click(function(){
45 $("div:not(.one)").css("background-color", "red");
46 });
47
48 //$("div:even")表示：选择索引值为偶数的div标签
49 $(button4).click(function(){
50 $("div:even").css("background-color", "red");
51 });
52
53 //$("div:odd")表示：选择索引值为奇数的div标签
54 $(button5).click(function(){
55 $("div:odd").css("background-color", "red");
56 });
57
58 //$("div:eq(3)")表示：选择索引值为3的div标签
59 $(button6).click(function(){
60 $("div:eq(3)").css("background-color", "red");
61 });
62
63 //$("div:gt(3)")表示：选择索引值大于3的div标签
64 $(button7).click(function(){
65 $("div:gt(3)").css("background-color", "red");
66 });
67
68 //$("div:lt(3)")表示：选择索引值小于3的div标签
69 $(button8).click(function(){
70 $("div:lt(3)").css("background-color", "red");
71 });
72
73 //$(":header")表示：选择标题标签
74 $(button9).click(function(){
75 $(":header").css("background-color", "red");
76 });
77
78 //$(":animated")表示：选择有动画的标签
79 $(button10).click(function(){
80 $(":animated").css("background-color", "red");
81 });
82 });
83 </script>
84 </head>
85 <body>
86 <h3>标题</h3>
87 <a href="">刷新</a>
88 <input type="button" id="button1" value="选择第一个div元素."/>
89 <input type="button" id="button2" value="选择最后一个div元素."/>
90 <input type="button" id="button3" value="选择class不为one的 所有div元素."/>
91 <input type="button" id="button4" value="选择索引值为偶数 的div元素."/>
92 <input type="button" id="button5" value="选择索引值为奇数 的div元素."/>
93 <input type="button" id="button6" value="选择索引值等于3的元素."/>
94 <input type="button" id="button7" value="选择索引值大于3的元素."/>
95 <input type="button" id="button8" value="选择索引值小于3的元素."/>
96 <input type="button" id="button9" value="选择所有的标题元素."/>
97 <input type="button" id="button10" value="选择当前正在执行动画的所有元素."/>
98 <br/><br/>
99 <div class="one" id="one">
100 id为one,class为one的div
101 <div class="mini">class为mini</div>
102 </div>
103
104 <div class="one" id="two" title="test">
105 id为two,class为one,title为test的div.
106 <div class="mini" title="other">class为mini,title为other</div>
107 <div class="mini" title="test">class为mini,title为test</div>
108 </div>
109
110 <div class="one">
111 <div class="mini">class为mini</div>
112 <div class="mini">class为mini</div>
113 <div class="mini">class为mini</div>
114 <div class="mini"></div>
115 </div>
116
117 <div class="one">
118 <div class="mini">class为mini</div>
119 <div class="mini">class为mini</div>
120 <div class="mini">class为mini</div>
121 <div class="mini" title="tesst">class为mini,title为tesst</div>
122 </div>
123
124 <span id="mover">正在执行动画的span元素.</span>
125
126 <script type="text/javascript">
127 function animateIt() {
128 $("#mover").slideToggle("slow", animateIt);
129 }
130 animateIt();
131 </script>
132
133 </body>
134 </html>
