使用jQuery,第 1 部分 将桌面应用程序引入浏览器.doc

2008年9月28日
jQuery是一种JavaScript库，它是开发人员简化动态富Internet应用程序创建的最佳选择。随着基于浏览器的应用程序不断代替桌面应用程序，这些库的使用将会不断增长。
简介
jQuery逐渐从其他JavaScript库选择中脱颖而出，并且成为Web开发人员的最佳选择。它迅速成为希望简化客户端开发和快速高效地创建富Internet应用程序（RIA）的程序员的首选。随着RIA的广泛使用，将越来越多地使用JavaScript库协助开发。RIA被定义（松散地）为通过浏览器运行的应用程序，这种浏览器结合使用CSS/JavaScript/Ajax创建类似桌面应用程序的外观。Firefox、InternetExplorer和Safari最新发行版中新增的特性，以及Google新Chrome浏览器最近的版本，都专注于加快每个浏览器的内部JavaScript引擎的速度，其惟一目的是更加适应浏览器制造商为未来设计的RIA。这些公司认为未来的Web页面将包含大量JavaScript代码，因此首先开发一个成熟的、没有bug的库是非常重要的。
因此，随着未来Web应用程序不断朝富沉浸式界面（richandimmersiveinterface）的方向发展，Web开发人员不断地寻找可以简化这些工作的工具。现在已经有几个JavaScript库，每个库都有各自的优点和缺点，同时也有各自的支持者和反对者。在这里，我不讨论哪个库的特性更好，因为这对最终结果没有多大影响。最重要的是哪个库使用得更多—数量才是最重要的。看看下面4个最流行的JavaScript库的Google趋势图。很明显，在过去6到8个月里，jQuery成为主导的JavaScript库，并且这一趋势仍在上升。
图1.常见的JavaScript库的Google趋势图
就业市场方面也显示出jQuery渐渐上升为最多人选择的JavaScript库。Monster.com的一个非科研性结果表明，与jQuery相关的职位有113个，而YUI、ExtJS和mootools分别是67、19和13。
这个jQuery系列文章的第一篇以探索jQuery语法开始，同时了解它的函数是如何调用的。本文后面的小节探索这个库的核心函数，以及这个库如何使用它的强大的选择器和过滤器使DOM遍历更加简单明了。接下来的文章将阐述CSS操作、表单控制、文本更改、Ajax简单性和动画（所有人的爱好）。jQuery的最有趣的特性之一是它的插件架构，它允许很多开发人员添加新的jQuery功能。本文的最后一篇文章将介绍许多强大的插件，它们可用于完成RIA开发过程。
本系列文章针对具备JavaScript语法、CSS语法和DOM语法知识的读者。如果您需要在阅读本系列文章之前复习一下这些语法，我强烈推荐本文HYPERLINK"http://www.ibm.com/developerworks/cn/web/wa-jquery1/index.html"\l"resources"参考资料小节中的W3Schools链接。
基础知识
在深入研究有趣的jQuery内容之前，我们先了解一些基础知识—如何安装jQuery，以及如何使其正常运行等。首先从HYPERLINK"http://www.ibm.com/developerworks/cn/web/wa-jquery1/index.html"\l"downloads"下载小节下载jQuery库，然后像链接其他外部JavaScript文件一样链接到该库：
清单1.如何在代码中安装jQuery

<scripttype="text/javascript"src="jquery.js"></script>
由于jQuery调用或操作DOM对象，因此如果在文档装载完所有页面元素之前，使用JavaScript代码直接操作这些对象将会遇到问题。相反，您也不希望等待页面上的所有元素都装载完—所有图像、标题广告、解析代码和YouTube视频预览—才开始调用jQuery代码。您可以适当折中，在文档完全装载完页面上的所有元素，但所有的图像、链接和呈现尚未完成之前，以一种安全的、无错误的方式调用jQuery代码。再强调一遍，您的所有jQuery代码必须在页面上的这个函数中，或在它自己的函数中。如果jQuery代码不在一个函数中，则不可将其代码放置在JavaScript代码中。
清单2.如何正确调用jQuery函数

//Incorrect
<scriptlanguage=JavaScript>
$("div").addClass("a");
</script>

//Correct
$(document).ready(function(){
$("div").a