jQuery框架使用入門

2016-07-11 1681 2 編輯:Monster 來源:jQuery入門

常見的JavaScript框架有jQuery、Dojo、ExtJS、Prototype、Mootools和Spry等。目前以jQuery最受開發者的追捧,下面簡要介紹這些框架的特點和用途。

(1)jQuery是一個優秀的JavaScript框架,它能使用戶更方便地處理HTML文檔。events事件、動畫效果、Ajax交互等。它的出現極大地改變了開發者使用JavaScript的習慣。

(2)Prototype是一個易于使用、面向對象的JavaScript框架。它封裝并簡化和擴展一些在Web開發過程中常用到的JavaScript方法與Ajax交互處理過程。

(3)Mootools是一個簡潔、模塊化、面向對象的JavaScript框架。它能夠幫助用戶更快、更簡單地編寫可擴展和兼容性強的JavaScript代碼。Mootools從Prototype中汲取了許多有益的設計理念,語法也和其極其類似。但它提供的功能要比Prototype多,整體設計也比Prototype要相對完善,功能更強大,如增加了動畫特效、拖放操作等。

(4) ExtJS是一個跨瀏覽器,用于開發RIA應用的JavaScript框架,提供高性能、可定制的Web U工控件庫;具有良好的設計、豐富的文檔和可擴展的組件模型。

1.jQuery框架的功能

jQuery框架的主要功能可以歸納為以下幾點:

(1)訪問頁面的局部。這是前面介紹的DOM模型所完成的主要工作之一,通過示例可以看到,DOM獲取頁面中某個節點或者某一類節點有固定的方法,而jQuery則大大簡化了其操作的步驟。

(2)修改頁面的表現(Presentation)。CSS的主要功能就是通過樣式風格來修改頁面的表現。然而由于各個瀏覽器對CSS 3標準的支持程度不同,使得很多CSS的特性沒能很好地體現。jQuery很好地解決了這個問題,它通過封裝好的jQuery選擇器代碼,使各種瀏覽器都能很好地使用CSS 3標準,極大地豐富了CSS的運用。

(3)更改頁面的內容。jQuery可以很方便地修改頁面的內容,包括修改文本的內容、插入新的圖片、修改表單的選項,甚至修改整個頁面的框架。

(4)響應事件。引入jQuery之后,可以更加輕松地處理事件,而且開發人員不再需要考慮復雜的瀏覽器兼容性問題。

(5)為頁面添加動畫。通常在頁面中添加動畫都需要開發大量的JavaScript代碼,而jQuery大大簡化了這個過程。jQuery庫提供了大量可自定義參數的動畫效果。

(6)與服務器異步交互。jQuery提供了一整套Ajax相關的操作,大大方便了異步交互的開發和使用。

(7)簡化常用的JavaScript操作。jQuery還提供了很多附加的功能來簡化常用的JavaScript操作,如數組的操作、迭代運算等。

2.如何下載并使用jQuery

jQuery的官方網站(http://jquery.com)提供了最新的jQuery框架下載,通常只需要下載最小的]Query包(Minified)即可。目前最新的版本jquery-1. 6.2.min.js文件只有55.9 KB。

jQuery是一個輕量級(Lightweight)的JavaScript框架,所謂輕量級,是說它根本不需要安裝,因為jQuery實際上就是一個外部js文件,使用時直接將該js文件用標記鏈接到自己的頁面中即可,代碼如下:

將jQuery框架文件導入后,就可以使用jQuery的選擇器和各種函數功能了。

3.jQuery中的“$”及其作用

在jQuery中,最頻繁使用的莫過于美元符號“$”,它能提供各種各樣的功能.包括選擇頁面中的一個或一類元素、作為功能函數的前綴、創建頁面的DOM節點等。

jQuery中的“$”實際上等同于“jQuery",如$(”h2”)等同于jQuery("h2”),為了編寫代碼的方便,才采用“$”來代替“jQuery"。“$”的功能主要表現在以下幾方面。

1)“$”用做選擇器

在CSS中選擇器的作用是選中頁面中某些匹配元素,而jQuery中的“$”作為選擇器。同樣可選中單個元素或元素集合。

例如,在CSS中,"h2>a”表示選中h2的所有直接下級元素a,而在jQuery中同樣可以通過如下代碼選中這些元素,作為一個對象數組,供JavaScript調用。

$("h2>a")    //jQuery的子選擇器,引號不能省略

jQuery支持所有CSS 3的選擇器,也就是說可以把任何CSS選擇器都寫在$(””)中,像上面的“h2>a"這種子選擇器本來IE 6是不支持的,但把它轉換成jQuery的選擇器$(”h2>a")后,則所有瀏覽器都能支持。改寫后,則使得本來不支持子選擇器的IE6也能支持子選擇器了。

上面僅僅展示了用jQuery選擇器實現CSS選擇器的功能,實際上,jQuery選擇器的主要作用是選中元素后再為它們添加行為。就是通過jQuery的id選擇器選中了某個按鈕,接著為它添加單擊時的行為。還可以通過jQuery選擇器獲取元素的HTML屬性或修改HTML屬性。

2)“$”用做功能函數前綴

在jQuery中,提供了一些JavaScript中沒有的函數,用來處理各種操作細節。例如$.each()函數,它用來對數組或jQuery對象中的元素進行遍歷。為了指明該函數是jQuery的,就需要為它添加“$.”前綴。

說明:

①$.each函數用來遍歷數組或對象,因此它的語法有如下兩種形式:

①$.each(對象,function(屬性,屬性值){...});

②$.each(數組,function(元素序號,元素的值){...});

$.each()函數的第一個參數為需要遍歷的對象或數組,第二個參數為一個函數function。function函數為集合中的每個元素都要執行的函數,它可以接受兩個參數,第一個參數為數組元素的序號或者是對象的屬性,第二個參數為數組元素或者屬性的值。

②調用$.each)時,對于數組和類似數組的對象(具有length屬性,如函數的arguments對象),將按序號從0到length-1進行遍歷,對于其他對象則通過其命名屬性進行遍歷。

③此處的$.each()函數與前面的jQuery方法有明顯的區別,jQuery方法都需要通過一個jQuery對象進行調用(如$("#buttonid").click),而$.each()函數沒有被任何jQuery對象所調用,一般稱這樣的函數為jQuery全局函數。

④$.each()函數不同于each()函數。后者僅能用來遍歷jQuery對象。例如,可以利用each()方法配合this關鍵字來批量設置或獲取DOM元素的屬性。下面的代碼首先利用$("img")獲取頁面中所有img元素的集合,然后通過each()方法遍歷這個圖片集合。通過this關鍵字設置頁面上4個空元素的src屬性和title屬性,使這4個空的標記顯示圖片和提示文字。

提示:代碼中的this指代的是DOM對象而非]Query對象,如果想得到jQuery對象,可以用$(this)。

3)用做$

在jQuery中,采用$(document).ready()函數替代了JavaScript中的window.onload函數。

其中,(document)是指整個網頁文檔對象(即JavaScript中的window. document對象),那么$(document).ready事件的意思是在文檔對象就緒的時候觸發。

$(document).ready()不僅可以替代window.unload函數的功能,而且比wind.unload函數還具有很多優越性,下面來比較兩者的區別。

第一,若要將id為loading的圖片在網頁加載完成后隱藏起來,window. unload的寫法是:

function hide(){

document.getElementByld("loading").style.display=“none";}

window.onload=hide;          //注意hide不能寫成hide()

由于window.onload事件會使hide()函數在頁面(包括HTML文檔和圖片等其他文檔)完全加載完畢后才開始執行,因此在網頁中id為“loading"的圖片會先顯示出來等整個網頁加載完成后執行hide   函數才會隱藏。

而jQuery的寫法是:

$(document).ready(function(){

("#loading").css("display","none);

})

jQuery的寫法則會使頁面僅加載完DOM結構后就執行(即加載完HTML文檔后),還沒加載圖像等其他文件就執行ready()函數,給圖像添加“display: none”的樣式,因此id為“loading"的圖片不可能被顯示。

所以說,$(document).ready()比window.onload載入執行更快。

第二,如果該網頁的HTML代碼中沒有id為loading的元素,那么window.onload函數中的getElementByld("loading")會因找不到該元素,導致瀏覽器報錯。所以為了容錯,最好將代碼改為:

function hide(){

if(docunent.getElementById("loading")){        

document.getElementById("loading"), style.display="none”;

}}

而jQuery的$(document).ready()則不需要考慮這個問題,因為jQuery已經在其封裝好的ready()函數代碼中做了容錯處理。

第三,由于頁面的HTML框架需要在頁面完全加載后才能使用,因此在DOM編程時window.onload函數被頻繁使用。倘若頁面中有多處都需要使用該函數,將會產生沖突。而jQuery采用ready()方法很好地解決了這個問題,它能夠自動將其中的函數在頁面加載完成后運行,并且在一個頁面中可以使用多個ready()方法,不會發生沖突。

總之,jQuery中的$(document).ready()函數有以下三大優點。

(1)在DOM文檔載入后就執行,而不必等待圖片等文件載入,執行速度更快。

(2)如果找不到DOM中的元素,能夠自動容錯。

(3)在頁面中多個地方使用ready()方法不會發生沖突。

4)創建DOM元素

在jQuery中通過使用“$”可以直接創建DOM元素,下面的代碼用于創建一個段落,并設置其align屬性以及段落中的內容。

當然,創建了DOM元素后還必須使用其他方法將其插入到文檔中,否則文檔中不會顯示新創建的元素。

5)解決“$”的沖突

盡管在通常情況下都使用“$”來代替jQuery,而且也推薦使用這種方式。但如果開發者在JavaScript中定義了名稱為“$”的函數,如“function$(){...}”,或使用了其他的類庫框架,而這些框架中也使用了“$”,那么就會發生沖突。jQuery同樣提供了noConflict()方法來解決“$”的沖突問題。

4.jQuery對象與DOM對象

當使用jQuery選擇器選中某個或某組元素后,實際上就創建了一個jQuery對象,jQuery對象是通過jQuery包裝DOM對象后產生的對象。但jQuery對象和DOM對象是有區別的。

1)jQuery對象轉換成DOM對象

也就是說,如果一個對象是jQuery對象,那么它就可以使用jQuery中的方法,例如html()就是jQuery中的一個方法。但jQuery對象無法使用DOM對象中的任何方法,同樣DOM對象也不能使用jQuery中的任何方法。

但如果jQuery沒有封裝想要的方法,不得不使用DOM方法的時候,有以下兩種方法將jQuery對象轉換成DOM對象。

(1) jQuery對象是一個數組對象,可以通過添加數組下標的方法得到對應的DOM對象。例如,$<"#msg")[0],就將jQuery對象轉變成了一個DOM對象。

(2)使用jQuery中提供的get()方法得到相應的DOM對象,如$("#msg").get(0)。

2)DOM對象轉換成jQuery對象

相應地,DOM對象也可以轉換成jQuery對象,只需要用$()把DOM對象包裝起來就可以獲得一個jQuery對象。

3)jQuery對象的鏈式操作

jQuery對象的一個顯著優點是支持鏈式操作。所謂鏈式操作,是指基于一個jQuery對象的多數操作將返回該jQuery對象本身,從而可以直接對它進行下一個操作。例如,對一個jQuery對象執行大多數方法后將返回jQuery對象本身,因此可以對返回的jQuery對象繼續執行其他方法。


本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
七星彩头尾