学科新技术

为网页编写脚本jQuery简介（1）

jQuery是最受欢迎的JavaScript框架，由于它的出现，为web页面添加互动性变得极为简单。 jQuery流行的原因能够归纳为下面几个：

你能够编写较少的代码—JavaScript需要20行或者更多的代码实现的功能，在jQuery中却只要两到三行就能够实现。

相同的代码能够在所有的浏览器中运行—没有必要为Internet Explorer编写特殊的代码。

它能够使用CSS选择器，并且能够充分利用大多数web设计人员已经拥有的知识。

现在，Dreamweaver CS5.5具有完整的jQuery代码提示，这使得它更加易于使用。

本教程将为你介绍jQuery基本知识。

注意：本文假定你使用的软件是Dreamweaver CS5.5。 你能够使用任何版本的Dreamweaver来学习本教程，或者使用文本编辑器来学习本教程，但你将无法利用代码提示的优势。 你也可以复制已完成的代码。

什么是jQuery？

根据jQuery网站的相应信息，“jQuery的设计宗旨是改变你编写JavaScript的方式。” 它不仅做到了这一点，而且它还实现了一些更加令人印象深刻的东西—它鼓励大量的web设计人员开始编写属于他们自己的JavaScript ，而非从那些常常是半信半疑的源代码中进行复制和粘帖。 虽然jQuery被称为JavaScript库，然而它并不是那种塞满一排排图书的图书馆。 它是一个相对较小的文件（在未压缩情形下为84KB），它包含数十个设计用来简化处理JavaScript的JavaScript 函数（方法）。 你只需要将该文件与你的web页面相链接，并能够使用jQuery方法为你的网站添加互动性功能。

虽然JavaScript是一种功能强大的语言，然而，它的使用仍存在两个主要的障碍：

JavaScript最初是由Netscape开发的，在20世纪90年代的浏览器战争中，它是Microsoft Internet Explorer的头号劲敌。 尽管Internet Explorer很迅速地采用了该语言（当时官方版本称为JScript），但是，在某些领域仍然存在许多基本差异，例如，事件处理。 编写在所有浏览器中均能使用的脚本常常需要涉及编写多达两倍的代码。

互动性涉及添加和删除页面元素，或影响应用于它们的相关样式。 然而，实现这一功能的官方方法，即使用World Wide Web Consortiums Document Object Model (W3C DOM)，是非常麻烦的。

旨在解决这两个问题的JavaScript库大约在2005年开始问世。 首批获得广泛使用的JavaScript库是Prototype和script.aculo.us。 其它著名的JavaScript库包括Dojo Toolkit、Moo Tools、Yahoo! UI Library以及Adobe Spry 框架。 所有这些都具有与jQuery相同的基本目标：为页面添加互动性功能提供跨浏览器的工具。 那么，为什么你应该优先选择jQuery呢？

jQuery能够在当前所有的浏览器中使用，包括Internet Explorer 6+、Firefox 2+、Safari 3+、Chrome以及Opera 9+。

它是一种免费、开源的代码，并经过MIT License和GNU General Public License双重认证。

据估计，大约四分之三使用JavaScript库的网站都已经采用jQuery。

使用jQuery的一流企业包括 Amazon.com、Bank of America、BBC以及Twitter。

哦,是的... . . 它学习起来相对容易。

Adobe已是jQuery Mobile的一个官方赞助商，jQuery Mobile是一种开发移动应用程序的新的框架，它基于jQuery核心库；并且Dreamweaver工程师也已经积极地为该项目贡献代码。

如何获得jQuery

尽管Dreamweaver CS5.5有完整的jQuery代码提示，但是，你仍需要将你的web页面与jQuery核心库链接。 这里有两种实现方法：

链接至在内容分配网络（CDN）上托管的最新版本的库。

下载该库的一个副本，并使用你自己网站里的文件对它进行存储。

这两种方法的详细信息能够在jQuery文档（jQuery docs）上找到。

就本教程而言，我推荐你使用一个本地版本的jQuery库。 相应的范例文件包含一个jQuery 1.5.2的副本，它是本教程编写时对应的此刻版本。 如果在jQuery网站上有较新的最新版本的库，那么就用它替代原来的库。

注意：此外，从jQuery网站上的下载页面也有已缩小和未压缩版本的链接。 它们两者均包含相同的代码，然而，缩小的版本删除了所有空白，因此使得文件尺寸变小。 当你单击该下载链接时，相应的文件通常会在你的浏览器窗口中打开。 选中File > Save As以便于将该文件保存至你的本地硬盘中。

准备本教程文件

下载jquery.zip并且解压随本教程提供的范例文件，如果你还没有这么做的话。 本教程的所有文件都放置在一个名称为jqtut的文件夹中。 使用jqtut文件夹作为网站根目录创建一个新的Dreamweaver网站。 此外，你也可以将jqtut文件夹复制到一个已存在的Dreamweaver网站中，并在该文件夹中进行相关操作。

链接并初始化jQuery

很多年来，相应推荐的方法一直是在web页面的部分附着外部JavaScript文件。 但是，在该页面的剩余部分能够继续加载前，JavaScript文件中的所有代码均需要进行处理。 因此，除非该页面的外观取决于早些时候已经加载的代码，否则，推荐在结束标签前附着外部JavaScript文件。 这样做能够使得页面的加载速度更快。

打开jqtut sample file 文件夹的jq_01.html，并切换到Code视图或者Split视图。

将插入点放置在结束标签前，并且单击Insert面板/条的Common category中的Script，或者选中Insert > HTML > Script Objects > Script。

在Script对话框中，单击Source文本字段右侧的文件夹图标，导航至js文件夹，并选中jquery-1.5.2.min.js。 如果你已下载一个更近期的jQuery版本，那么选中它。 单击OK。 此时，相应的文件名应该在Script对话框中列出，如图1所示。