There are three pieces to most examples of jQuery usage: the HTML document, CSS files to style it, and JavaScript files to act on it. For our first example, we'll use a page with a book excerpt that has a number of classes applied to portions of it. This page includes a reference to the latest version of the jQuery library, which we have downloaded, renamed jquery.js, and placed in our local project directory, as follows:
在大部分jquery使用的范例代码中有三部分：html文档，为他加样式的css文件，在上面添加行为的js文件。对我们第一个例子，我们使用一个有很多类应用其中一部分的html页面。这个网页包含对我们已经下载下来的最新的jquery版本的一个引用，我们把它重命名为jqurey.js然后放到本地项目目录中，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Through the Looking-Glass</title>
<link rel="stylesheet" href="01.css">
<script src="jquery.js"></script>
<script src="01.js"></script>
</head>
<body>
<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 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>
</body>
</html>
File Paths
The actual layout of files on the server does not matter. References from one file to another just need to be adjusted to match the organization we choose. In most examples in this book, we will use relative paths to reference files (../images/foo.png) rather than absolute paths (/images/foo.png). This will allow the code to run locally without the need for a web server.
h1, h2, h3 {margin-bottom: .2em;}
.poem {margin: 0 2em;}
.highlight {background-color: #ccc;border: 1px solid #888;font-style: italic;margin: 0.5em 0;padding: 0.5em;}
扫一扫
1602
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
