jQuery参考实例 1.1 在页面中导入jQuery

本文翻译自jQuery Cookbook (O’Reilly 2009) 1.1 Including the jQuery Library Code in an HTML Page

需求

在网页中使用jQuery

解决方案

在网页中嵌入jQuery库,目前有两种成熟的方案:

  • 使用Google提供的内容分发网络(CDN)来导入某个版本的jQuery。
  • 从jQuery.com官方网站上下载某个版本的jQuery,并部署到自己的服务器上。

讨论

导入jQuery与导入别的任何一个外部JavaScript文件并没有什么不同,只需使用HTML的<script>标签,并对该标签的src属性赋值即可。以下是一个导入jQuery的例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>  
<head>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <script type="text/JavaScript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>  
<body>  
<script type="text/JavaScript">  
alert('jQuery ' + jQuery.fn.jquery);  
</script>  
</body>  
</html>  

上述示例中使用了Google内容分发网络所提供的jQuery压缩版本。不过,在压缩后的JavaScript代码中调试错误是一件很困难的事情。因此,为了调试潜在的JavaScript错误,在开发阶段使用非压缩的版本会更好。更多有关Google提供的jQuery信息可以参见:http://code.google.com/apis/ajaxlibs/

当然,我们也可以使用更加传统的方式:在自己的服务器上部署jQuery。但大多数情况下,这样的做法并不明智。使用Google提供的jQuery有很多好处:jQuery的版本更加稳定可靠、用户的下载速度更快、网络延迟更小、jQuery文件已经被缓存在浏览器中的概率更高等等。

有些情况下,开发人员并不想使用Google提供的jQuery — 可能是开发者需要一个定制化的jQuery;也可能因为最终产品仅在局域网中使用,无法访问internet;或者纯粹出于个人好恶。如果不使用Google提供的jQuery,开发人员可以从http://jQuery.com 上下载jQuery文件并复制到自己的服务器上。在使用时,与上述示例类似,只需把src属性的值修改为相应的jQuery文件地址就可以了。

译者注:

Google的服务在一些地区并不稳定,因此个人认为,在自己的服务器上部署jQuery还是有必要的。

Chuan Shao

Read more posts by this author.

Shanghai

Subscribe to Chuan's blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!