（2）入门指南——（6）在html文档中引入jquery（Setting up jQuery in an HTML document）
2013-09-05 15:25
369 查看
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找到。
Now
we have a page that looks similar to the following screenshot:
现在我们有了一个看起来像下面这样的截图的网页。
We
will use jQuery to apply a new style to the poem text.
我们将使用jquery为网页添加新的样式。
This
example is to demonstrate a simple use of jQuery. In real-world situations, this type of styling could be performed purely with CSS.
这个例子是用来展示jquery的简单使用方法，在真实场景中，这种样式应该完全使用css来展示。
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找到。
Now
we have a page that looks similar to the following screenshot:
现在我们有了一个看起来像下面这样的截图的网页。
We
will use jQuery to apply a new style to the poem text.
我们将使用jquery为网页添加新的样式。
This
example is to demonstrate a simple use of jQuery. In real-world situations, this type of styling could be performed purely with CSS.
这个例子是用来展示jquery的简单使用方法，在真实场景中，这种样式应该完全使用css来展示。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Setting up OpenGL in an MFC control
- 《SBT in Action》- Setting up SBT and an SBT Build
- Setting up an OpenGL development environment in ubuntu
- Setting Up an oAuth Trust Between Farms in SharePoint 2013
- [翻译][Nokogiri官方教程] 解析HTML/XML文档 / Parsing an HTML/XML Document
- Simple way to expose a .NET WinForm control as an ActiveX control in any HTML page
- Ext JS 6学习文档–第1章–ExtJS入门指南
- jQuery中文入门指南，翻译加实例，jQuery的起点教程
- Setting up Ubuntu in CoLinux–changing local/keyboard to be English
- jQuery中文入门指南，翻译加实例，jQuery的起点教程 【转载】
- HTML结构化：实践DIV＋CSS网页布局入门指南
- jQuery——入门（三）JQuery DOM操作（核心处理和文档处理）
- JQuery.html()与jquery.append(document.createTextNode())的区别
- Finishing up a navigation transition in an unexpected state. Navigation Bar subview tree might get corrupted.
- ES权威指南[官方文档学习笔记]-33 Updating a whole document
- 跟随屏幕滚动层、遮罩层、获取Div相对定位、整个屏幕、html文档的jquery基本操作
- 读jQuery官方文档：$(document).ready()与避免冲突
- 一起学微软Power BI系列-官方文档-入门指南(7)发布与共享-终结篇+完整PDF文档
- An ASP.NET setting has been detected that does not apply in Integrated managed pipeline mode.
- jQuery中文入门指南，翻译加实例，jQuery的起点教程