建议的开发环境：

1. web浏览器

(1) Google Chrome(V31.0.1650.63 m +)

(2) Firefox(V26.0+)

调试插件：Firebug(V1.12.5+)

2. HTML编辑器

Adobe Dreamweaver CS6(V12.0+)

3. JQuery(V1.10.2+)

 

第一章：

请把下面的HTML文件中的“YKCOWREBBAJ”和“JABBERWOCKY”部分加高亮。

chapter1-1.html

 

<script type=text/javascript src=jquery-1.10.2.js></script><script type=text/javascript src=chapter01.js></script>

Through the Looking-Glass

by Lewis Carroll

1. Looking-Glass House

There was a book lying near Alice on the table, and while she sat watching the White King (for she was still a little anxious about him, and had the ink all ready to throw over him, in case he fainted again), she turned over the leaves, to find some part that she could read, -for it's all in some language I don't know, she said to herself.

It was like this.

YKCOWREBBAJ

sevot yhtils eht dna ,gillirb sawT'

;ebaw eht ni elbmig dna eryg diD

,sevogorob eht erew ysmim llA

.ebargtuo shtar emom eht dnA

She puzzled over this for some time, but at last a bright thought struck her. Why, it's a Looking-glass book, of course! And if I hold it up to a glass, the words will all go the right way again.

This was the poem that Alice read.

JABBERWOCKY

'Twas brillig, and the slithy toves

Did gyre and gimble in the wabe;

All mimsy were the borogoves,

And the mome raths outgrabe.

此HTML主要的由两个class为poem的div组成。

 

 

chapter01.css

 

@charset utf-8; /* CSS Document */ html, body { margin: 0; padding: 0; } body { font: 62.5% Verdana, Geneva, sans-serif; background: #fff; color: #000; } #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; } .poem { margin: 0 2em; } .highlight { background-color: #ccc; border: 1px solid #888; font-style: italic; margin: 0.5em 0; padding: 0.5em; } 本例主要用到.poem和.highlight。

下面我们编写完成工作的JS。

 

把css中定义的“.highlight”增加到poem-stanza的div中
chapter01.js

 

$(document).ready(function() { $('div.poem-stanza').addClass('highlight'); });

 

 

其中

 

$(document).ready(function() { // TODO }); 是JQuery的标准写法。只要我们使用JQuery都要在TODO中编写代码。