- jQuery即學即用
- 王志剛編著
- 60字
- 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的認證方式,這是當前比較流行的認證方式,可以保證在各自認證下的個人或商業用途。下載的壓縮文件中包含認證文件,一般在使用時不用設置,可以免費使用。可以訪問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的對應方法。