当前位置:编程学习 > JAVA >>

(2)入门指南——(6)在html文档中引入jquery(Setting up jQuery in an HTML document)

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.
文件路径:
服务器上文件的真实布局不会造成影响,从一个文件到另一个文件的引用需要调整去适应我们选择的组织结构。在这本书的大部分例子中,我们将使用相对路径(../images/foo.png)而不是绝对路径(/images/foo.png)这将让我们的代码在无需web服务器的情况下也能运行。
Immediately following the normal HTML preamble, the stylesheet is loaded. For this example, we'll use the following:
在html文件展示后,接下来是css文件被下载下来,比如,将使用下面的代码:
body {background-color: #fff;color: #000;font-family: Helvetica, Arial, sans-serif;}
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;}
 
After the stylesheet is referenced, the JavaScript files are included. It is important that the script tag for the jQuery library be placed before the tag for our custom scripts; otherwise, the jQuery framework will not be available when our code attempts to reference it.
在css文件被引用后,js文件也被包含进去了。引用jquery库的script标签被放置在其他一般的script标签前面是很重要的,否则我们的代码在企图使用jquery的时候将会变的无效。
Throughout the rest of this book, only the relevant portions of HTML and CSS files will be printed. The files in their entirety are available at the book's companion website http://book.learningjquery.com.
在这本书剩余部分,只有html和css文件的相关部分才会被打印出来,文件的全部可以在这本书的相关站点http://book.learningjquery.com找到。
补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,