jQuery 是一个跨浏览器的免费开源 ">JavaScript 库。其核心设计思想是“写更少的代码,做更多的事情”(Write Less Do More)。jQuery 提供了一套易于使用的 API。这些 API 极大地简化了客户端(浏览器)编程过程中的许多方面,包括:
HTML DOM 的遍历与操作 浏览器事件处理 AJAX(Asynchronous JavaScript And XML)编程 特效(如动画效果)
在直接使用 JavaScropt+DHTML 的传统客户端编程方式下,开发人员不得不编写冗长的代码。并且,为了使这些代码能够兼容不同的浏览器,我们还得编写额外的代码来处理这些跨浏览器问题。jQuery 的设计目标正是在于简化客户端编程。让我们能够编写简练的代码,节约开发时间,而这些代码却一样可以功能强大,并且兼容多种浏览器。
获取 jQuery:开始使用 jQuery
jQuery 网站上提供了两种方式的发布文件。一种是内容经过压缩的文件;另一种是原始文件。前者文件中不包含代码注释以及代码运行过程中不需要的空白字符,它适合于生产环境(正式使用的环境)中使用,可以减少文件加载所需时间。后者文件中包含详细的代码注释,适合于开发和测试环境中使用。
jQuery 的下载地址:http://jquery.com/download/
下载 jQuery 之后,在相应的网页中通过 script 元素引用 jQuery 代码即可使用它。如清单 1 所示:
清单 1. 从本地站点引用 jQuery
<html><head><title>使用 jQuery</title><script src="../js/lib/jQuery/1.9.1/jQuery.js"></script></head><body></body></html>
我们还可以通过 Google、Microsoft 等公司提供的 CDN 服务直接获取 jQuery。其方法是在需要使用 jQuery 的网页中直接引用 CDN 服务的 URL。比如,使用 Google 的 CDN 的一个网页清单 2 所示:
清单 2. 从 CDN 引用 jQuery
<html><head><title>使用 jQuery</title><scriptsrc='//ajax.googleapis.com/ajax/libs/jQuery/1.9.1/jQuery.min.js'></script></head><body> </body></html>
Microsoft 提供的 CDN 的 URL 为: http://ajax.aspnetcdn.com/ajax/jQuery/jQuery-1.9.1.js
Hello World:jQuery 第一个实例
下面的例子中,我们使用 jQuery 实现在页面上显示当前时间的功能。
清单 3. Hello World
<html><head><meta http-equiv="content-type" content="text/html;charset=utf-8"><script src="../js/lib/jQuery/1.9.1/jQuery.js"></script><script>
function init
Page(){//jQuery 代码:调用 jQuery 的核心函数---$函数$("#message").html("Hello World, it is now:"+new Date().toLocaleString());}</script></head><body onload="initPage()"><span id="message"></span></body></html>
从上面例子(在线例子:http://blog.viscenthuang.info/jQuery/page/CodeDemo.htm?code=HelloWorld.htm)
的代码中我们可以看到, initPage 这个函数会在页面加载完毕后被调用。而该函数在执行后会在 ID 为 message 的 HTML 结点内添加表示客户端当前时间的字符串。您可以不必急着去理解上面代码的具体意思。下一节将介绍 jQuery 的语法。另外,这个例子中我们使用 body 元素的 onload 属性来绑定事件处理器(initPage)只是为了方便讨论。在本章的后面内容中会介绍 jQuery 中用于处理页面 load 事件绑定的简便 API。