|
我们的第一个jQuery文档 既然我们已经涵盖了对我们有用的 jQuery 的所有特性，我们就可测试如何实践这个库了。 下载jQuery 官方 jQuery 网站（http://jquery.com/）总是有最新的代码资源和与库相关的信息，为了开始实践，我们需要一个 jQuery 的拷贝，可以从网站首页直接下载，一些 jQuery 版本可能在任何时刻都是有用的，最适合我们的将会是最新的没有压缩的版本。不需要安装它，为了使用 jQuery，我们只需要放它到我们网站的一个公共位置，既然 JavaScript 是一种解释型语言，那么不用担心会有编译和创建阶段。无论何时我们需要的话，jQuery 都是有效的，我们简单地从 HTML 文档中参考这个文件的位置就可以了。建立html文档 很多 jQuery 用法的实例都有三块：HTML 文档本身，CSS 文件用来样式化它和 JavaScript 文件来执行它。我们的第一个实例中，我们用一本书的摘录的一个页面，页面将有很多类应用到它不同的部分。 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Through the Looking-Glass</title> <link rel="stylesheet" href="alice.css" type="text/css" media="screen" /> <script src="jquery.js" type="text/javascript"></script> <script src="alice.js" type="text/javascript"></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 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 <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> 注意：在服务器上文件的实际的层没有问题。一个文件参考到另一个文件只需要调整匹配我们选择的组织。本书的很多例子里，我们用相对路径来参考文件（../images/foo.png），不用绝对路径（/images/foo.png）。这允许代码可本地运行，而不必在 web 服务器上。 Immediately following the normal HTML preamble, the stylesheet is loaded. For this example, we'll use a Spartan(斯巴达的) one. 马上跟着常规的 HTML 导言，样式表已被加载。 body { font: 62.5% Arial, Verdana, sans-serif; } 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; } .emphasized { font-style: italic; border: 1px solid #888; padding: 0.5em; } 样式表被参考后，JavaScript 文件被包含。jQuery 库的脚本标签放到我们自定义的脚本标签之前是很重要的，否则，我们的代码尝试参考jQuery的时候，jQuery 框架就不起作用。 注意：本书剩下的部分，只有与 HTML 和 CSS 相关的部分才会打印。完整的文件可以从本书的伙伴网站http://book.learningjquery.com 或者本书出版的网站http://www.packtpub.com/support 中获得。 现在我们有一个像下面的页面：  我们用 jQuery 来给 peom text 应用一个新的样式。 这个例子被设计只是来显示 jQuery 的一个简单的应用。实际情况，我们会用 纯粹的CSS 来样式化。 |
Learning jQuery 中文版》第一章(二)
