?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 ????????//01114 ????????115 ????????$(document).ready(function () {116 ????????????$(‘#selected-plays > li‘).addClass(‘horizontal‘);117 ????????????//not jQuery选择器，去掉选中的所有li中的类名为horizontal的li其实就是上一个选择器选中的直接li118 ????????????$(‘#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并且其中的值要包含henry124 ????????????$(‘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 ????????//03147 ????????$(document).ready(function () {148 ????????????$("p:nth-child(3)").addClass("blue");149 ????????});150 ?????????151 ????????//04152 ????????$(document).ready(function () {153 ????????????$("p:first-child").addClass("yellow");154 ????????});155 156 ????????157 ????????//05158 ????????$(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 ????????段落1180 ????</p>181 ????<p id="p2">182 ????????段落2183 ????</p>184 ????<p>185 ????????段落3186 ????</p>187 ????<p>188 ????????段落4189 ????</p>190 ????<p id="purple">191 ????????段落5192 ????</p>193 ????<div id="container">194 ????????<div id="chapter-number">195 ????????????2196 ????????</div>197 ????????<h1>198 ????????????Selectors199 ????????</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 ????????????????Comedies205 ????????????????<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 ????????????????Tragedies214 ????????????????<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 ????????????????Histories222 ????????????????<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 Table236 ????????</h2>237 ????????<table border="0" cellspacing="1" cellpadding="5">238 ????????????<tr>239 ????????????????<th>240 ????????????????????Title241 ????????????????</th>242 ????????????????<th>243 ????????????????????Category244 ????????????????</th>245 ????????????????<th>246 ????????????????????Year Published247 ????????????????</th>248 ????????????</tr>249 ????????????<tr>250 ????????????????<td>251 ????????????????????As You Like It252 ????????????????</td>253 ????????????????<td>254 ????????????????????Comedy255 ????????????????</td>256 ????????????????<td></td>257 ????????????</tr>258 ????????????<tr>259 ????????????????<td>260 ????????????????????All‘s Well that Ends Well261 ????????????????</td>262 ????????????????<td>263 ????????????????????Comedy264 ????????????????</td>265 ????????????????<td>266 ????????????????????1601267 ????????????????</td>268 ????????????</tr>269 ????????????<tr>270 ????????????????<td>271 ????????????????????Hamlet272 ????????????????</td>273 ????????????????<td>274 ????????????????????Tragedy275 ????????????????</td>276 ????????????????<td>277 ????????????????????1604278 ????????????????</td>279 ????????????</tr>280 ????????????<tr>281 ????????????????<td>282 ????????????????????Macbeth283 ????????????????</td>284 ????????????????<td>285 ????????????????????Tragedy286 ????????????????</td>287 ????????????????<td>288 ????????????????????1606289 ????????????????</td>290 ????????????</tr>291 ????????????<tr>292 ????????????????<td>293 ????????????????????Romeo and Juliet294 ????????????????</td>295 ????????????????<td>296 ????????????????????Tragedy297 ????????????????</td>298 ????????????????<td>299 ????????????????????1595300 ????????????????</td>301 ????????????</tr>302 ????????????<tr>303 ????????????????<td>304 ????????????????????Henry IV, Part I305 ????????????????</td>306 ????????????????<td>307 ????????????????????History308 ????????????????</td>309 ????????????????<td>310 ????????????????????1596311 ????????????????</td>312 ????????????</tr>313 ????????????<tr>314 ????????????????<td>315 ????????????????????Henry V316 ????????????????</td>317 ????????????????<td>318 ????????????????????History319 ????????????????</td>320 ????????????????<td>321 ????????????????????1599322 ????????????????</td>323 ????????????</tr>324 ????????</table>325 ????</div>326 </body>327 </html>JQueryx选择符
原文地址：https://www.cnblogs.com/myBlogOu/p/9939802.html