1. 程式人生 > >JQuery特點、優缺點及其常用操作

JQuery特點、優缺點及其常用操作

1.什麼是JQuery? JQuery是一個優秀的javascript框架。 JQuery是繼Prototype之後又一個優秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,寫更少的程式碼,做更多的事情。它是輕量級的js庫,這是其它的js庫所不及的,它相容CSS3,還相容各種常用瀏覽器。 JQuery是一個快速的,簡潔的JavaScript庫,使使用者能更方便地處理HTML documents、events、實現動畫效果,並且方便地為網站提供AJAX互動。 JQuery還有一個比較大的優勢是,它的文件說明很全,而且各種應用也說得很詳細,同時還有許多成熟的外掛可供選擇。JQuery能夠使使用者的html頁保持程式碼和html內容分離,也就是說,不用再在html裡面插入一堆js來呼叫命令了,只需定義id即可。

2.JQuery的特點 (1).一款輕量級的js框架。 JQuery核心js檔案才幾十kb,不會影響頁面載入速度。與Extjs相比要輕便的多。 (2).豐富的DOM選擇器(CSS1-3 + XPath) JQuery的選擇器用起來很方便,好比要找到某個dom物件的相鄰元素js可能要寫好幾行程式碼,而JQuery一行程式碼就搞定了,再比如要將一個表格的隔行變色,JQuery也是一行程式碼搞定。 (3).鏈式表示式。 JQuery的鏈式操作可以把多個操作寫在一行程式碼裡,更加簡潔。 (4).事件、樣式、動畫支援。 JQuery還簡化了js操作css的程式碼,並且程式碼的可讀性也比js要強。 (5).Ajax操作支援。 JQuery簡化了AJAX操作,後臺只需返回一個JSON格式的字串就能完成與前臺的通訊。 (6).跨瀏覽器相容。 JQuery基本相容了現在主流的瀏覽器,不用再為瀏覽器的相容問題而傷透腦筋。 (7).外掛擴充套件開發。 JQuery有著豐富的第三方的外掛,例如:樹形選單、日期控制元件、圖片切換外掛、彈出視窗等等基本前臺頁面上的元件都有對應外掛,並且用JQuery外掛做出來的效果很炫,並且可以根據自己需要去改寫和封裝外掛,簡單實用。 (8).可擴充套件性強。 JQuery提供了擴充套件介面:JQuery.extend(object),可以在JQuery的名稱空間上增加新函式。JQuery的所有外掛都是基於這個擴充套件介面開發的。

3.JQuery的優缺點 (1).JQuery優點 <1>.JQuery實現指令碼與頁面的分離 在HTML程式碼中,我們還經常看到類似這樣的程式碼:

(2).JQuery的缺點 <1>.不能向後相容。 每一個新版本不能相容早期的版本。舉例來說,有些新版本不再支援某些selector,新版jQuery卻沒有保留對它們的支援,而只是簡單的將其移除。這可能會影響到開發者已經編寫好的程式碼或外掛。 <2>.外掛相容性。 與上一點類似,當新版jQuery推出後,如果開發者想升級的話,要看外掛作者是否支援。通常情況下,在最新版jQuery版本下,現有外掛可能無法正常使用。開發者使用的外掛越多,這種情況發生的機率也越高。我有一次為了升級到jQuery 1.3,不得不自己動手修改了一個第三方外掛。 <3>.多個外掛衝突。 在同一頁面上使用多個外掛時,很容易碰到衝突現象,尤其是這些外掛依賴相同事件或selector時最為明顯。這雖然不是jQuery自身的問題,但卻又確實是一個難於除錯和解決的問題。 <4>.jQuery的穩定性。 jQuery沒有讓瀏覽器崩潰,這裡指的是其版本釋出策略。jQuery 1.3版釋出後僅過數天,就釋出了一個漏洞修正版1.3.1。他們還移除了對某些功能的支援,可能會影響許多程式碼的正常執行。我希望類似修改不要再出現。 <5>.對動畫和特效的支援差。 在大型框架中,jQuery核心程式碼庫對動畫和特效的支援相對較差。但是實際上這不是一個問題。目前在這方面有一個單獨的jQuery UI專案和眾多外掛來彌補此點。

4.JQuery使用方法 (1).JQuery選擇器 選擇網頁元素jQuery的基本設計和主要用法,就是"選擇某個網頁元素,然後對其進行某種操作"。這是它區別於其他函式庫的根本特點。 使用jQuery的第一步,往往就是將一個選擇表示式,放進建構函式jQuery()(簡寫為$),然後得到被選中的元素。 (2).改變結果集 如果選中多個元素,jQuery提供過濾器,可以縮小結果集;有一些時候,我們需要從結果集出發,移動到附近的相關元素,jQuery也提供了在DOM樹上的移動方法。 (3).鏈式操作 選中網頁元素以後,就可以對它進行某種操作。jQuery允許將所有操作連線在一起,以鏈條的形式寫出來。 這是jQuery最令人稱道、最方便的特點。它的原理在於每一步的jQuery操作,返回的都是一個jQuery物件,所以不同操作可以連在一起。 (4).元素的操作:取值和賦值 操作網頁元素,最常見的需求是取得它們的值,或者對它們進行賦值。 jQuery使用同一個函式,來完成取值(getter)和賦值(setter)。到底是取值還是賦值,由函式的引數決定。 需要注意的是,如果結果集包含多個元素,那麼賦值的時候,將對其中所有的元素賦值;取值的時候,則是隻取出第一個元素的值(.text()例外,它取出所有元素的text內容)。 (5).元素的操作:移動 如果要移動選中的元素,有兩種方法:一種是直接移動該元素,另一種是移動其他元素,使得目標元素達到我們想要的位置。 (6).元素的操作:複製、刪除和建立 複製元素使用.clone()。 刪除元素使用.remove()和.detach()。兩者的區別在於,前者不保留被刪除元素的事件,後者保留,有利於重新插入文件時使用。 清空元素內容(但是不刪除該元素)使用.empty()。 (7).工具方法 除了對選中的元素進行操作以外,jQuery還提供一些工具方法(utility),不必選中元素,就可以直接使用。 如果你懂得Javascript語言的繼承原理,那麼就能理解工具方法的實質。它是定義在jQuery建構函式上的方法,即jQuery.method(),所以可以直接使用。而那些操作元素的方法,是定義在建構函式的prototype物件上的方法,即jQuery.prototype.method(),所以必須生成例項(即選中元素)後使用。如果不理解這種區別,問題也不大,只要把工具方法理解成,是像javascript原生函式那樣,可以直接使用的方法就行了。 (8).事件操作 jQuery可以對網頁元素繫結事件。根據不同的事件,執行相應的函式。 (9).特殊效果 jQuery允許物件呈現某些特殊動畫效果。