关于答案:
$(function(){
???//第一小问
???// (1) 给位于嵌套列表第二个层次的所有 <li> 元素添加 special 类；
???// $(‘#selected-plays > li > ul > li‘).addClass(‘special‘);
???//第二小问
???// (2) 给位于表格第三列的所有单元格添加 year 类；
???// $(‘tr‘).find(‘td:eq(2)‘).addClass(‘year‘);
???//第三小问
???// (3) 为表格中包含文本Tragedy的第一行添加 special 类；
???// $(‘td:contains(Tragedy)‘).eq(0).parent().addClass(‘special‘);
???// or
???// $(‘td:contains(Tragedy)‘).parent().filter(‘tr:eq(0)‘).addClass(‘special‘);
???
???// (4) 挑战：选择包含链接（ <a> ）的所有列表项（ <li> 元素），为每个选中的列表项的同辈列表项元素添加 afterlink 类；
???// $(‘a‘).parent().parent().children().not(‘li:has(a)‘).addClass(‘afterlink‘);
???// or
???// $(‘a‘).parent().siblings().not(‘li:has(a)‘).addClass(‘afterlink‘);
???// (5) 挑战：为与 .pdf 链接最接近的祖先元素 <ul> 添加 tragedy 类。
???$(‘a[href$=".pdf"]‘).parents(‘ul:eq(0)‘).addClass(‘tragedy‘);
})
书本配套的源代码HTML:
<!DOCTYPE html>
<html lang="en">
?<head>
???<meta charset="utf-8">
???<title>Selected Shakespeare Plays</title>
???<link rel="stylesheet" href="css/02.css" type="text/css" />
???<script type="text/javascript" src="jquery.js"></script>
???<script src="js/02.js"></script>
?</head>
?<body>
???<div id="container">
?????<h2>Selected Shakespeare Plays</h2>
?????<ul id="selected-plays" class="clear-after">
???????<li>Comedies
?????????<ul>
???????????<li><a href="/asyoulikeit/">As You Like It</a></li>
???????????<li>All‘s Well That Ends Well</li>
???????????<li>A Midsummer Night‘s Dream</li>
???????????<li>Twelfth Night</li>
?????????</ul>
???????</li>
???????<li>Tragedies
?????????<ul>
???????????<li><a href="hamlet.pdf">Hamlet</a></li>
???????????<li>Macbeth</li>
???????????<li>Romeo and Juliet</li>
?????????</ul>
???????</li>
???????<li>Histories
?????????<ul>
???????????<li>Henry IV (<a href="mailto:henryiv@king.co.uk">email</a>)
?????????????<ul>
???????????????<li>Part I</li>
???????????????<li>Part II</li>
?????????????</ul>
???????????</li>
???????????<li><a href="http://www.shakespeare.co.uk/henryv.htm">Henry V</a></li>
???????????<li>Richard II</li>
?????????</ul>
???????</li>
?????</ul>
?????<h2>Shakespeare‘s Plays</h2>
?????<table>
???????<tr>
?????????<td>As You Like It</td>
?????????<td>Comedy</td>
?????????<td></td>
???????</tr>
???????<tr>
?????????<td>All‘s Well that Ends Well</td>
?????????<td>Comedy</td>
?????????<td>1601</td>
???????</tr>
???????<tr>
?????????<td>Hamlet</td>
?????????<td>Tragedy</td>
?????????<td>1604</td>
???????</tr>
???????<tr>
?????????<td>Macbeth</td>
?????????<td>Tragedy</td>
?????????<td>1606</td>
???????</tr>
???????<tr>
?????????<td>Romeo and Juliet</td>
?????????<td>Tragedy</td>
?????????<td>1595</td>
???????</tr>
???????<tr>
?????????<td>Henry IV, Part I</td>
?????????<td>History</td>
?????????<td>1596</td>
???????</tr>
???????<tr>
?????????<td>Henry V</td>
?????????<td>History</td>
?????????<td>1599</td>
???????</tr>
?????</table>
?????<h2>Shakespeare‘s Sonnets</h2>
?????<table>
???????<tr>
?????????<td>The Fair Youth</td>
?????????<td>1–126</td>
???????</tr>
???????<tr>
?????????<td>The Dark Lady</td>
?????????<td>127–152</td>
???????</tr>
???????<tr>
?????????<td>The Rival Poet</td>
?????????<td>78–86</td>
???????</tr>
?????</table>
???</div>
?</body>
</html>
书本配套的CSS:
/***************************************
??Default Styles
************************************** */
html, body {
?margin: 0;
?padding: 0;
}
body {
?font: 62.5% Verdana, Helvetica, Arial, sans-serif;
?color: #000;
?background: #fff;
}
#container {
?font-size: 1.2em;
?margin: 10px 2em;
}
h1 {
?font-size: 2.5em;
?margin-bottom: 0;
}
h2 {
?font-size: 1.3em;
?margin-bottom: .5em;
}
h3 {
?font-size: 1.1em;
?margin-bottom: 0;
}
code {
?font-size: 1.2em;
}
a {
?color: #06581f;
}
/***************************************
??Chapter Styles
************************************** */
h2 {
?clear: left;
}
li {
?padding: 0 3px;
?color: #000;
}
.horizontal {
?float: left;
?list-style: none;
?margin: 10px;
}
.sub-level {
?background: #ccc;
}
a {
?color: #00c;
}
a.mailto {
?background: url(images/email.png) no-repeat 100% 2px;
?padding-right: 18px;
}
a.pdflink {
?background: url(images/pdf.png) no-repeat 100% 0;
?padding-right: 18px;
}
a.henrylink {
?background-color: #fff;
?padding: 2px;
?border: 1px solid #000;
}
a.external {
?background: #fff url(images/external.png) no-repeat 100% 2px;
?padding-right: 16px;
}
ul.tragedy {
?border: 1px solid #999;
}
li.afterlink {
?border-right: 4px solid #090;
}
table {
?border-collapse: collapse;
}
th, td {
?text-align: left;
?padding: 2px 4px;
}
.table-heading {
?background-color: #000;
?color: #fff;
}
.alt {
?background-color: #ccc;
}
.highlight {
?font-weight: bold;
?font-style: italic;
}
.italic {
?font-style: italic;
}
.bold {
?font-weight: bold;
}
.special {
?color: #f00;
}
.year {
?background-color: #888;
?color: #fff;
?padding: 0 10px;
?text-align: center;
}
jQuery基础教程(第四版)第2章练习:
原文地址：https://www.cnblogs.com/qinghui258/p/8419235.html