jQuery插件的使用和編寫

經常使用的jQuery插件

　　1.表單驗證插件formValidator

　　　　　　formValidator目前支持5種大的校驗方式,

　　　　　　　　1) inputValidator (針對input,textarea,select控件的字符長度,值範圍,選擇個數的控制)

　　　　　　　　2) compareValidator (提供2個對象的比較,目前能夠比較字符串和數值型)

　　　　　　　　3) ajaxValidator (經過ajax到服務器上作數據校驗)

　　　　　　　　4) regexValidator (提供可擴展的正則表達式庫)

　　　　　　　　5) functionValidator (可以使用外部函數來作校驗)

　　　　　　formValidator與其餘校驗控件的區別:

　　　　　　　　1 校驗功能能夠擴展 : 其餘的校驗控件是代碼裏寫死的,而formValidator是經過外部js文件來擴展的,你能夠經過寫正則表達式和函數來無限擴展這些功能.

　　　　　　　　2 實現了校驗代碼於html代碼的徹底分離

　　　　　　　　3 你只須要寫一行代碼就能完成一個表單元素的全部校驗:

　　　　　　　　　　1) 支持全部類型客戶端控件的校驗

　　　　　　　　　　2) 支持jQuery全部的選擇器語法,只要控件有惟一的ID和type屬性

　　　　　　　　　　3) 支持函數和正則表達式的擴展.(提供擴展庫formValidatorReg.js以供添加,修改)

　　　　　　　　　　4) 支持2種校驗模式.第一種:文字提示(showword模式);第二種:彈出窗口提示(showalert模式)

　　　　　　　　　　5) 支持多個校驗組

　　　　　　　　　　6) 支持4種狀態的信息提示功能,能夠靈活的控制4種狀態是否顯示

　　　　　　　　　　7) 支持自動構建提示層.能夠進行精肯定位

　　　　　　　　　　8) 支持自定義錯誤提示信息

　　　　　　　　　　9) 支持控件的字符長度,值範圍,選擇個數的控制.值範圍支持數值型和字符型;選擇的個數支持radio/checkbox/select三種控件

　　　　　　　　　　10) 支持2個控件值得比較.

　　　　　　　　　　11) 支持服務器端校驗

　　　　　　　　　　12) 支持輸入格式的校驗

　　2.動態綁定事件插件--livequery

　　　　　　1.livequery插件簡介

　　　　　　　　能夠利用它給相應的DOM元素註冊事件或者觸發回調函數.不只當前選擇器匹配的元素會被綁定事件,並且後來經過javaScript添加的元素都會被綁定事件.

　　　　　　當元素再也不和選擇器匹配時,livequery會自動取消事件註冊,使得開發者再也不須要關注HTML元素的來源,只須要關注如何編寫其綁定的事件便可.

　　　　　　2.livequery插件下載地址

　　　　　　　　http://plugins.jquery.com/project/liveQuery　

　　3.jQuery UI插件

　　　　　　1.jQuery UI簡介

　　　　　　　　jQuery UI主要分爲3個部分:

　　　　　　　　　　交互:這裏都是一些與鼠標交互相關的內容.包括拖動,置放,縮放,選擇和排序等等.此庫須要一個jQuery UI核心庫--ui.core.js支持.

　　　　　　　　　　微件:這裏主要是一些界面的擴展.包括手風琴導航,自動完成,取色器,對話框,滑塊,標籤,日曆,放大鏡,進度條和微調控制器等等.此庫須要一個jQuery UI核心庫--ui.core.js支持.

　　　　　　　　　　效果庫:此庫用於提供豐富的動畫效果,讓動畫再也不侷限於animate()方法.效果庫有本身的一套核心即effects.core.js,無需jQuery UI的核心庫--ui.core.js支持

　　　　　　2.jQuery UI插件下載地址

　　　　　　　　http://ui.jquery.com/download

　　　　　　3.與單擊事件衝突

　　　　　　　　在某些特殊狀況下會由於拖動事件搶在單擊事件以前而致使單擊事件失效.若是出現這種狀況,能夠設置參數delay延時1毫秒.

　　　　　　　　示例:

$(document).ready(function(){
    $("#myList").sortable({delay:1});//修復潛在連接點擊問題
});

　　　　　　4.與後臺結合

　　　　　　　　若是要把Sortable插件與後臺結合,須要完成兩件事情,首先是查找觸發排序後的回調函數,而後取得排列的順序並經過Ajax發送給後臺.

　　4.管理Cookie的插件--Cookie

　　　　　　jQuery提供了一個十分簡單的插件來管理網站的Cookie,該插件的名稱也是Cookie.

　　　　　　Cookie插件的下載地址是:http://plugins.jquery.com/project/Cookie

編寫jQuery插件

　　1.插件的種類

　　　　　　1.封裝對象方法的插件:將對象方法封裝起來,用於對經過選擇器獲取的jQuery對象進行操做,是最多見的一種插件.據不徹底統計,95%以上的jQuery插件都是封裝對象方法的插件.

　　　　　　2.封裝全局函數的插件:能夠將獨立的函數加到jQuery命名空間之下.

　　　　　　3.選擇器插件:個別狀況下,會須要用到選擇器插件.

　　2.插件的基本要點

　　　　　　jQuery插件的文件名推薦命名爲jquery.[插件名].js, 以避免和其餘JavaScript庫插件混淆.

　　　　　　全部的對象方法都應答附加到jQuery.fn對象上,而全部的全局函數都應當附加到jQuery對象自己上.

　　　　　　在插件內部,this指向的是當前經過選擇器獲取的jQuery對象,而不像通常的方法那樣,例如click()方法,內部的this指向的是DOM元素.

　　　　　　能夠經過this.each來遍歷全部元素.

　　　　　　全部的方法或函數插件,都應當以分號結尾,不然壓縮的時候可能出現問題.

　　　　　　插件應該返回一個jQuery對象,以保證插件的可鏈式操做.

　　　　　　避免在插件內部使用$做爲jQuery對象的別名,而應使用完整的jQuery來表示.這樣能夠避免衝突.

　　3.插件中的閉包

　　　　　　ECMAScript對閉包進行了簡單的描述:容許使用內部函數(即函數定義和函數表達式位於另外一個函數的函數體內),並且,這些內部函數能夠訪問他們所在的外部函數中聲明的全部局部變量,參數和聲明的其餘內部函數,當其中一個這樣的內部函數在包含它們的外部函數以外被調用時,就會造成閉包.