文档介绍：第章
使用jQuery开发Web应用程序
( 视频讲解:63分钟)
jQuery是一个可实现快速开发、简洁、轻量级的JavaScript库,通过jQuery,可以用最精简的程序代码轻松实现跨浏览器HTML DOM操作、事件处理、设计页面元素动态效果、Ajax交互等功能。
jQuery目前受到了业界的普遍好评,已经被大量使用。jQuery还得到了微软等公司的支持,被放在微软官方Ajax站点的首要位置,而且jQuery的选择器语法被很多其他JavaScript库借鉴或直接引用,显示了该语法格式的强大功能。
jQuery的基石是jQuery核心库,在jQuery核心库的基础上诞生了很多jQuery插件,包括jQuery UI、jQuery Mobile以及其他大量的第三方插件。
使用jQuery核心库——jQuery Core
一般情况下,提起jQuery或“jQuery库”都是指jQuery核心库,即jQuery Core。要使用jQuery,必须首先获得一个jQuery核心库,其可以从网站/下载。
jQuery核心库有很多版本,而且版本更新很快,,如图1-1所示。
图1-1 下载jQuery核心库
下载的jQuery核心库是一个*.js文件,可以在网页中引用该文件,一般都会在网页的head元素中添加如下的HTML代码:
<script type="text/javascript" src="jquery-"></script>
注意,下载的*.js文件有两个版本:jquery--。两者的功能是相同的,前一个是精简过的文件(也被称为部署文件或产品文件),该文件较小,推荐在部署时使用,可以降低网络流量,减少Web服务器的负载;后一个文件则适合查看和修改源代码(也被称为开发者文件),该文件包含大量空格、换行符以及注释,因此文件较大。
CDN的全称是Content work,即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输更快、更稳定。
在一些特大型网络公司中,也存在jQuery库的副本,它们作为jQuery库的CDN,这些CDN是免费的,可以直接引用,也可以减轻Web服务器的负载。
例如,Google的服务器上就存在这样的副本,可以直接引用(考虑到Google强大的服务器群,所以加载jQuery库将会非常快):
<script type="text/javascript" src="http://ajax./ajax/ libs/jquery/.js">
</script>
微软的Ajax CDN服务器上也存在jQuery库的副本,可以直接引用:
<script type="text/javascript" src="http://ajax./ajax/ jquery/jquery-">
</script>
注意,这样的引用还是有一定风险的,如果Google、微软的网站不再提供该文件,那么就有可能导致不可预知的后果。
第一个jQuery范例
jQuery库也是JavaScript程序,在网页中应该使用script元素引用,与引用其他JavaScript代码完全相同。
一旦引用了jQuery库,就可以使用库中定义的方法来处理文档和执行其他一些运算。
下面是一个使用jQuery的完整范例:
<!DOCTYPE HTML>
<html lang="">
<head>
<meta charset="utf-8">
<title>jQuery Sample</title>
<script type="text/javascript" src="jquery-"></script>
</head>
<body>
<script>
$(document).ready(
function() {
alert('HTMLDOM已经准备完毕,现在可以操作了!');
}
);
</script>
</body>
</html>
图1-2 执行结果
在使用jQuery处理HTML文档之前,必须让jQuery读取HTML文档的DOM,之后才能进行其他操作。jQuery定义了一个ready事件来验证是否已经读取了DOM并已经完成DOM结构绘制(链接资源可能并未下载,但此时已经可以执行JavaScript程序),一般都应该使用该事件来初始化操作。
所以,在上述简单范例中,用一个ready事件作为处理HTML文档的开始,事件中定义了