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


    关于答案:

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

  • 相关阅读:
    十四、oracle 数据库管理--管理表空间和数据文件
    十一、oracle 数据库管理员
    十二、oracle 数据库(表)的逻辑备份与恢复
    九、oracle 事务
    十、oracle 常用函数
    八、oracle 分页
    七、oracle 表查询二
    五、oracle 表的管理
    六、表查询一
    四、oracle 用户管理(Profile)
  • 原文地址:https://www.cnblogs.com/qinghui258/p/8419235.html
Copyright © 2020-2023  润新知