3.3 jQuery代码_jQuery即学即用-QQ阅读男生历史网

书名：jQuery即学即用
作者名：王志刚编著
本章字数：320字
更新时间：2020-08-27 04:35:55

第3章配置jQuery的使用环境

要使用jQuery前，首先要准备jQuery库。本章将介绍如何从jQuery的官方网站下载最新版本的jQuery库，以及使用前的一些设置。

3.1 下载jQuery

首先链接到jQuery的官方网站（http://jquery.com），如图3-1所示。

图3-1 jQuery的官方网站 http://jquery.com

3.1.1 jQuery版本

单击页面中的Download(jQuery);链接，从对应的网页中查找最新版本（Current Release）的库文件，jQuery的库文件以jquery-x.x.x.js、jquery-x.x.x.min.js或jquery-x. x.x.pack.js形式发布。

文件名x.x.x的部分是jQuery的版本号（如1.3.5等），min与pack为压缩方式。

其他还包括在Visual Studio的智能输入功能Intelligense中使用的jquery-x.x.x.vsdoc.js，以及测试版的jquery-x.x.x.realse.js等。

3.1.2 jQuery库文件的压缩版与非压缩版

在两种压缩版本的jQuery文件中min是使用YUI Compressor压缩的版本；pack是使用Packed压缩的版本，二者都是JavaScript中有名的压缩工具。

在需要确认代码内容时使用非压缩版，但是在实际使用时文件越小越有利，一般使用压缩版。

从压缩比来说，Packed方式的压缩比稍高。但是其压缩的文件在执行时需要eval处理，多少有些延迟。v1.3版本以后的版本发布了以YUI Compressor（URL为http://developer. yahoo.com/yui/compressor）方式的压缩版本。

3.1.3 其他下载网址及下载方法

除了上述jQuery官方网站外，可以下载jQuery的网站如下。

（1）Downloading jQuery

URL为http://docs.jquery.com/Downloading_jQuery。

此为jQuery官方网站的下载专用页面，各阶段的发布版本都可以在此下载；另外还可以获得称为“NIGHTLY BUILDS”的测试版本，以及关于SVN（一种代码管理软件，全称“SubVersion”）的通知等，如图3-2所示。

图3-2 jQuery官方网站的下载专用页面 http://jquery.com

（2）Google Code的jqueryjs

URL为http://code.google.com/p/jqueryjs/。

这是Google Code提供且面向开发人员的API网站中的jqueryjs项目，可以使用此处提供的多个方便的检索功能。

Google Code API网站中的jqueryjs项目如图3-3所示。

图3-3 Google Code API网站中的jqueryjs项目 http://code.google.com/p/jqueryjs/

（3）Google CDN（Contents Delivery Network）

URL为http://code.google.com/intl/zh/apis/ajaxlibs/documentation/index.html#jquery。

AJAX Libraries API是非常受欢迎的JavaScript程序库，它通过Internet提供服务。在自己的页面中加入下述的代码后，即可通过Internet使用：

        <script src="http://www.google.com/jsapi"></script>
        <script>
          google.load("jquery","1.4.2");  //使用1.4.2版本时
        </script>

（4）Microsoft AJAX CDN

微软从2009年9月15日开始提供了与Google CDN同样的服务。

URL为http://www.asp.net/ajax/cdn/#2。

使用Microsoft AJAX CDN时必须添加的代码如下：

        <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/
    javascript"></script>

3.1.4 下载jQuery插件

jQuery不仅在单独使用时有Ajax功能，同时具备了与prototype.js的script.aculo.us或YUI动画类相当的渐入渐出、幻灯及动画等功能。

这些扩展jQuery库以插件形式提供，利用这种自由扩展的机制可以开发各种新颖的功能。

在http://plugins.jquery.com/网站上汇集了各种插件并且可以自由下载。

因为数量过多，所以要找到满足要求的插件可能要费些时间。利用Google等搜索引擎检索，如“jQuery Plugins”这样的关键字可以得到不少介绍jQuery插件的好网站。

3.1.5 下载jQuery UI及主题

jQuery UI是jQuery的官方库群，包含如拖动、缩放、日历、对话框和排序表等widget及丰富效果的扩展程序。

（1）一般形式下载

jQuery UI中提供了统一所有widget设计使用的框架ThemeRoller，在下载页面（http://jqueryui.com/download）中选择需要的组件（Accordion或Effect “Blind”）。然后从Theme列表框中选择Smoothness或Sunny等主题（Theme），单击“下载”按钮，这样可下载包含与选择主题相关的CSS、图片和例子的zip文件。

（2）定制主题

可以定制方式下载jQuery UI，为此在themeroller页面（http://jqueryui.com/themeroller）中设置自己的字体（Font Settings）、圆角（Corner Radius）、Header/Toolbar的背景颜色，及border颜色等，然后下载定制的主题设计。

Google CDN也同样提供了jQuery UI，其网址如下。

http://code.google.com/intl/zh/apis/ajaxlibs/documentation/index.html#jqueryUI。

使用Google CDN的jQuery UI时必须添加的代码如下。

        <script src="http://www.google.com/jsapi"></script>
        <script>
          google.load("jquery","1.4.2");
          google.load("jqueryui","1.8.2");
        </script>

3.2 使用方法

jQuery作为JavaScript的库，使用前必须读入到页面中，jQuery可以用在HTML及xHTML中。为了方便介绍，只列出在HTML中的使用示例，xHTML与此类似。

3.2.1 导入jQuery主体的方法

如下设置下载的文件：

            <html>
            <head>
            <script type="text/javascript" src="jquery.js"></script>
            <script type="text/javascript">
            //在此加入自己的代码
            </script>
            </head>
            <body>
            <a href="http://jquery.com/">jQuery</a>
            </body>
            </html>

使用Google CDN提供的jQuery时：

            <html>
            <head>
            <script src="http://www.google.com/jsapi"></script>
            <script>
              google.load("jquery","1.4.2");
              google.load("jqueryui","1.8.2");
            </script>
            <script type="text/javascript">
            //在此加入自己的代码
            </script>
            </head>
            <body>
            <a href="http://jquery.com/">jQuery</a>
            </body>
            </html>

使用jQuery插件及jQuery UI时的导入方法如下，注意jQuery插件或jQuery UI的设置必须放在jQuery主体的后面：

            <html>
            <head>
            <link type=”text/css” src=”插件或jQuery UI的css文件”/>
            <script type="text/javascript" src="jquery.js"></script>
            <script type=”text/javascript” src=”插件或jQuery UI的js文件”></script>
            <script type="text/javascript">
            //在此加入自己的代码
            </script>
            </head>
            <body>
            <a href="http://jquery.com/">jQuery</a>
            </body>
            </html>

3.2.2 jQuery认证

jQuery采用了MIT与GPL的认证方式，这是当前比较流行的认证方式，可以保证在各自认证下的个人或商业用途。下载的压缩文件中包含认证文件，一般在使用时不用设置，可以免费使用。可以访问jQuery的官方网站（http://docs.jquery.com/Licensing）。

3.3 jQuery代码

jQuery代码与普通的JavaScript代码一样，可以添加在head或body标签内。也可以放在外部文件中，即：

        <script type="text/javascript">
        //与windows.onload相当的jQuery代码
        $(function(){
          //脚本
        });
        </script>

以上花括号中的代码是与windows.onload相当的jQuery代码，“//脚本”部分的内容会在页面被调入后执行。

        $(function(){ //脚本});
        jQuery(function(){ //脚本});
        jQuery(document).ready(function(){ //脚本});

以上3行代码执行同一个动作，因为书写方式简单，所以jQuery比其他程序库更受欢迎。

当与其他程序库，特别是与prototype.js同时使用时，不能使用$方法。因为prototype.js中也有该方法，可以用如下方法回避这种冲突：

        jQuery(function($){ //脚本});

将$方法以参数形式传入后，在脚本内就可以使用jQuery方法。这时还是不能在脚本内使用prototype.js的$方法。需要使用二者时，将prototype.js库先于jQuery导入，然后在脚本开始处添加如下语句：

        var j$ = jQuery.noConflict();

这样可以以j$方法的形式使用jQuery的$方法，而脚本中的$方法代表prototype.js的对应方法。

本周热推：

大数据技术与应用 Excel 2007公式、函数与图表应用 UG NX 5中文版完美自学手册 Drupal高手建站技术手册 FANUC工业机器人配置与编程技术

第3章 配置jQuery的使用环境