javascript代码实例教程-(2)入门指南――(6)在html文档中引入jquery(Setting up jQuery in an HTML document)

发布时间:2019-03-01 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-(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: @H_126_0@在大部分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>

<p class="author">by Lewis Carroll</p>

<p 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,&nbsp;

<span class="spoken">

"&mdash;for it's all in some language I don't know,"

</span>

she said to herself.

</p>

<p>It was like this.</p>

<p class="poem">

<h3 class="poem-title">YKCOWREBBAJ</h3>

<p class="poem-stanza">

<p>sevot yhtils eht dna ,gillirb sawT'</p>

<p>;ebaw eht ni elbmig dna eryg diD</p>

<p>,sevogorob eht erew ysmim llA</p>

<p>.ebargtuo shtar emom eht dnA</p>

</p>

</p>

<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>

<p class="poem">

<h3 class="poem-title">JABBERWOCKY</h3>

<p class="poem-stanza">

<p>'Twas brillig, and the slithy toves</p>

<p>Did gyre and gimble in the wabe;</p>

<p>All mimsy were the borogoves,</p>

<p>And the mome raths outgrabe.</p>

</p>

</p>

</p>

</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 https://book.learningjquery.COM.

在这本书剩余部分,只有html和css文件的相关部分才会被打印出来,文件的全部可以在这本书的相关站点https://book.learningjquery.com找到。

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-(2)入门指南――(6)在html文档中引入jquery(Setting up jQuery in an HTML document)全部内容,希望文章能够帮你解决javascript代码实例教程-(2)入门指南――(6)在html文档中引入jquery(Setting up jQuery in an HTML document)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。