您的位置：首页 > Web前端 > JQuery

学习JQuery - 1

2013-12-27 20:41 134 查看

写在篇首：

--------------------------------------------------------------------------------------

此博文系列是《Learning jQuery, Fourth Edition》的学习笔记！

有兴趣的朋友可以使用邮箱和我沟通！（非常欢迎你的交流）

我的邮箱: veic_2005#163.com(把#替换为@)

------------------------------------------------------------------完美的分割线---

建议的开发环境：

1. web浏览器

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

(2) Firefox(V26.0+)

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

(3) IE(V10+)

不建议使用IE6、7、8

2. HTML编辑器

Adobe Dreamweaver CS6(V12.0+)

3. JQuery(V1.10.2+)

第一章：

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

chapter1-1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Through the Looking-Glass</title>
<link rel="stylesheet" href="chapter01.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="chapter01.js"></script>
</head>

<body>
<div id="container">
<h1>Through the Looking-Glass</h1>
<div class="author">by Lewis Carroll</div>
<div class="chapter" id="chapter-1">
<h2 class="chapter-title">1. Looking-Glass House</h2>
<p>
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,
<span class="spoken">"-for it's all in some language I don't know,"</span>" she said to herself."
</p>
<p>It was like this.</p>
<div class="poem">
<h3 class="poem-title">YKCOWREBBAJ</h3>
<div id="fred" class="poem-stanza">
<div>sevot yhtils eht dna ,gillirb sawT'</div>
<div>;ebaw eht ni elbmig dna eryg diD</div>
<div>,sevogorob eht erew ysmim llA</div>
<div>.ebargtuo shtar emom eht dnA</div>
</div>
</div>
<p>
She puzzled over this for some time, but at last a bright thought struck her.
<span class="spoken">"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."</span>
</p>
<p>This was the poem that Alice read.</p>
<div class="poem">
<h3 class="poem-title">JABBERWOCKY</h3>
<div class="poem-stanza">
<div>'Twas brillig, and the slithy toves</div>
<div>Did gyre and gimble in the wabe;</div>
<div>All mimsy were the borogoves,</div>
<div>And the mome raths outgrabe.</div>
</div>
</div>
</div>
</div>
</body>
</html>

此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中编写代码。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航