jQuery基础教程(第四版)第2章练习:

最新推荐文章于 2019-01-08 07:40:47 发布

weixin_30293135

最新推荐文章于 2019-01-08 07:40:47 发布

阅读量444

点赞数

原文链接：http://www.cnblogs.com/qinghui258/p/8419235.html

版权

关于答案:

$(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>

<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;
}

转载于:https://www.cnblogs.com/qinghui258/p/8419235.html

weixin_30293135

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础教程(第四版)第2章练习:

关于答案:$(function(){ //第一小问 // (1) 给位于嵌套列表第二个层次的所有 <li> 元素添加 special 类； // $('#selected-plays > li > ul > li').addClass('special'); //第二小问 // (2) 给位于表格第三列的所有单元格添加 yea...
复制链接

扫一扫