index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selected Shakespeare Plays</title>
<link rel="stylesheet" href="02.css" type="text/css" />
<script src="jquery.js"></script>
<script src="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>
02.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;
}
02.js
$(document).ready(function() {
$('#selected-plays >li').addClass('horizontal');
$('#selected-plays li:not(.horizontal)').addClass('sub-level');
});
$(document).ready(function() {
$('a[href^="mailto:"]').addClass('mailto');
$('a[href$=".pdf"]').addClass('pdflink');
$('a[href^="http"][href*="henry"]').addClass('henrylink');
});
练习：
(1)给位于嵌套列表第二个层次的所有<li>元素加special类；
(2)给位于表格第三列的所有单元格添加year类；
(3)为表格中包含文本Tragedy的第一行添加special类；
(4)挑战：选择包含链接（<a>）的所有列表项（<li>元素），为每个选中的列表项的同辈列表项元素添加afterlink类；
(5)挑战：为与.pdf链接最近的祖先元素<ul>添加tragedy类。
//取得id="selected-plays"的直接子元素li，直接子元素li的直接子元素ul,直接子元素ul的直接子元素li;
$('#selected-plays > li > ul > li')
.addClass('special');
//取得所有table的第三列
$('td:nth-child(3)')
.addClass('year');
$('td:contains(Tragedy)') //取得包含Henry的所有单元格
.parent() //取得它的父元素
.eq(0) //取得第一个父元素
.addClass('special');
$('li > a') //取得li中包含的所有链接（<a>）
.parent() //取得a链接的父元素li
.siblings() //取得li元素的同辈元素（不包括自己）
.addClass('afterlink');
$('ul > li > a[href$=".pdf"]') //选择ul的直接子元素li,li的直接子元.pdf链接
.parent()
.parent()
.addClass('tragedy');