游戏平台有哪些

書名： jQuery即學即用
作者名：王志剛編著
本章字數： 1106字
更新時間： 2019-01-09 16:34:22

第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 >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 >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 >jQuery</a>
            </body>
            </html>

3.2.2 jQuery認證

jQuery采用了MIT與GPL的認證方式，這是當前比較流行的認證方式，可以保證在各自認證下的個人或商業用途。下載的壓縮文件中包含認證文件，一般在使用時不用設置，可以免費使用?？梢栽L問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的對應方法。

官术网_书友最值得收藏!

jQuery即學即用

第3章 配置jQuery的使用環境