1 <html>
2 <head>
3 <title></title>
4 <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
5 <style type="text/css">
6 body {
7 font-size: 18px;
8 }
9
10 .horizontal {
11 float: left;
12 list-style: none;
13 margin: 10px;
14 }
15
16 .sub-level {
17 background: #ffc;
18 }
19
20 a {
21 color: #00f;
22 }
23
24 a.mailto {
25 color: #f00;
26 }
27
28 a.pdflink {
29 color: #090;
30 }
31
32 a.mysite {
33 text-decoration: none;
34 border-bottom: 1px dotted #00f;
35 }
36
37 a.henrylink {
38 background-color: #fff;
39 padding: 2px;
40 border: 1px solid #000;
41 }
42
43 .table-heading {
44 background-color: #ff0;
45 }
46
47 th {
48 text-align: left;
49 }
50
51 .odd {
52 background-color: #ffc;
53 }
54
55 .even {
56 background-color: #cef;
57 }
58
59 .highlight {
60 color: #f00;
61 font-weight: bold;
62 }
63
64 .italic {
65 font-style: italic;
66 }
67
68 .bold {
69 font-weight: bold;
70 }
71
72 .red {
73 background-color: Red;
74 }
75
76 .blue {
77 background-color: Blue;
78 }
79
80 .yellow {
81 background-color: Yellow;
82 }
83
84 .black {
85 background-color: black;
86 }
87
88 .alt {
89 background-color: #ccc;
90 }
91
92 .purple {
93 background-color: Purple;
94 }
95
96 .green {
97 background-color: green;
98 }
99 </style>
100 <script type="text/javascript">
101
102 $(document).ready(
103 function () {
104 $('#p1').css('backgroundColor', 'red');
105 //尝试在jQuery对象上调用dom API,失败，结论是在jQuery对象只能调用jQuery方法
106 //$('#p1').setAttribute("xiabian", "骗你")
107 //普通的dom写法
108 var p2 = document.getElementById('p2');
109 p2.setAttribute("hubian", "骗你")
110 }
111 );
112
113 //01
114
115 $(document).ready(function () {
116 $('#selected-plays > li').addClass('horizontal');
117 //not jQuery选择器，去掉选中的所有li中的类名为horizontal的li其实就是上一个选择器选中的直接li
118 $('#selected-plays li:not(.horizontal)').addClass('sub-level');
119
120 $('a[href ^= mailto:]').addClass('mailto');
121 $('a[href $=.pdf]').addClass('pdflink');
122
123 ////a[href^=http][href*=henry]选中以href属性的值以http开头的a并且其中的值要包含henry
124 $('a[href ^=http][href *=henry]').addClass('henrylink');
125
126 });
127
128 //02,jQuery对象和Dom对象的相互转换
129 $(document).ready(function () {
130 //p eq(equal做相等判断)
131 $("p:eq(1)").addClass("red");
132
133 //非法，不能在jQuery对象上调用Dom方法
134 //$("p:eq(1)").setAttribute("class", "black");
135
136 //get(0)是把是jQuery对象中的第1个成员转变成了Dom对象
137 $("p:eq(2)").get(0).className = "yellow";
138 $("p:eq(3)").get(0).setAttribute("class", "green");
139 ////dom对象。
140 var oPurple = document.getElementById("purple");
141 //////把一个dom对象包装成一个jQuery对象的方法
142 $(oPurple).addClass("purple");
143 });
144
145
146 //03
147 $(document).ready(function () {
148 $("p:nth-child(3)").addClass("blue");
149 });
150
151 //04
152 $(document).ready(function () {
153 $("p:first-child").addClass("yellow");
154 });
155
156
157 //05
158 $(document).ready(function () {
159 $('tr:odd').addClass('odd');
160 $('tr:even').addClass('even');
161 $('td:contains("Henry")').addClass('highlight');
162 $('td:contains("Henry")').next().addClass('highlight');
163 $('td:contains("Henry")').nextAll().addClass('highlight');
164 $('td:contains("Henry")').nextAll().andSelf().addClass('highlight');
165
166 $('td:contains("Henry")').parent().parent().children().addClass('highlight');
167 });
168
169
170 //06. filter过滤器方法，此处是把所有tr中的偶数行过滤出来
171 $(document).ready(function () {
172 $('tr').filter(':even').addClass('alt');
173 });
174 /**/
175 </script>
176 </head>
177 <body>
178 <p id="p1">
179 段落1
180 </p>
181 <p id="p2">
182 段落2
183 </p>
184 <p>
185 段落3
186 </p>
187 <p>
188 段落4
189 </p>
190 <p id="purple">
191 段落5
192 </p>
193 <div id="container">
194 <div id="chapter-number">
195 2
196 </div>
197 <h1>
198 Selectors
199 </h1>
200 <h1 class="subtitle">How to Get Anything You Want</h1>
201 <h2>Selected ShakeSpeare Plays</h2>
202 <ul id="selected-plays" class="clearfix">
203 <li>
204 Comedies
205 <ul>
206 <li><a href="http://www.mysite.com/asyoulikeit/">As You Like It</a></li>
207 <li>All's Well That Ends Well</li>
208 <li>A Midsummer Night's Dream</li>
209 <li>Twelfth Night</li>
210 </ul>
211 </li>
212 <li>
213 Tragedies
214 <ul>
215 <li><a href="hamlet.pdf">Hamlet</a></li>
216 <li>Macbeth</li>
217 <li>Romeo and Juliet</li>
218 </ul>
219 </li>
220 <li>
221 Histories
222 <ul>
223 <li>
224 Henry IV (<a href="mailto:henryiv@king.co.uk">email</a>)
225 <ul>
226 <li>Part I</li>
227 <li>Part II</li>
228 </ul>
229 <li><a href="http://www.shakespeare.co.uk/henryv.htm">Henry V</a></li>
230 <li>Richard II</li>
231 </ul>
232 </li>
233 </ul>
234 <h2>
235 Shakespeare Table
236 </h2>
237 <table border="0" cellspacing="1" cellpadding="5">
238 <tr>
239 <th>
240 Title
241 </th>
242 <th>
243 Category
244 </th>
245 <th>
246 Year Published
247 </th>
248 </tr>
249 <tr>
250 <td>
251 As You Like It
252 </td>
253 <td>
254 Comedy
255 </td>
256 <td></td>
257 </tr>
258 <tr>
259 <td>
260 All's Well that Ends Well
261 </td>
262 <td>
263 Comedy
264 </td>
265 <td>
266 1601
267 </td>
268 </tr>
269 <tr>
270 <td>
271 Hamlet
272 </td>
273 <td>
274 Tragedy
275 </td>
276 <td>
277 1604
278 </td>
279 </tr>
280 <tr>
281 <td>
282 Macbeth
283 </td>
284 <td>
285 Tragedy
286 </td>
287 <td>
288 1606
289 </td>
290 </tr>
291 <tr>
292 <td>
293 Romeo and Juliet
294 </td>
295 <td>
296 Tragedy
297 </td>
298 <td>
299 1595
300 </td>
301 </tr>
302 <tr>
303 <td>
304 Henry IV, Part I
305 </td>
306 <td>
307 History
308 </td>
309 <td>
310 1596
311 </td>
312 </tr>
313 <tr>
314 <td>
315 Henry V
316 </td>
317 <td>
318 History
319 </td>
320 <td>
321 1599
322 </td>
323 </tr>
324 </table>
325 </div>
326 </body>
327 </html>
浙公网安备 33010602011771号