标签：cin publish tle mys evel history ant yellow lsp
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>
标签：cin publish tle mys evel history ant yellow lsp
原文地址：https://www.cnblogs.com/myBlogOu/p/9939802.html
