jquery第三方插件:1、Validation,一個(gè)表單驗(yàn)證插件;2、Form,一個(gè)Ajax表單插件;3、livequery,一個(gè)動(dòng)態(tài)綁定事件插件;4、Cookie,一個(gè)管理Cookie的插件;5、SimpleModal,模態(tài)窗口插件等。
本教程操作環(huán)境:windows7系統(tǒng)、jquery1.10.2版本、Dell G3電腦。
JQuery有著豐富的第三方的插件,例如:樹(shù)形菜單、日期控件、圖片切換插件、彈出窗口等等基本前臺(tái)頁(yè)面上的組件都有對(duì)應(yīng)插件,并且用JQuery插件做出來(lái)的效果很炫,并且可以根據(jù)自己需要去改寫(xiě)和封裝插件,簡(jiǎn)單實(shí)用。
下面介紹一下常用第三方插件。
jquery常用的第三方插件
1、jQuery表單驗(yàn)證插件:Validation
(1)Validation簡(jiǎn)介
????最常使用JavScript的場(chǎng)合就是表單的驗(yàn)證,而jQuery作為一個(gè)優(yōu)秀的JavaScript庫(kù),也提供了一個(gè)優(yōu)秀的表單驗(yàn)證插件——Validation.Validation是歷史最悠久的jQuery插件之一,經(jīng)過(guò)了全球范圍內(nèi)不同項(xiàng)目的驗(yàn)證,并得到了許多Web開(kāi)發(fā)者的好評(píng)。作為一個(gè)標(biāo)準(zhǔn)的驗(yàn)證方法庫(kù),Validation擁有如下優(yōu)點(diǎn):
- 內(nèi)置驗(yàn)證規(guī)則:擁有必填、數(shù)字、E-Mail、URL和信用卡號(hào)碼等19類內(nèi)置驗(yàn)證規(guī)則
- 自定義驗(yàn)證規(guī)則:可以很方便地自定義驗(yàn)證規(guī)則
- 簡(jiǎn)單強(qiáng)大的驗(yàn)證信息提示:默認(rèn)了驗(yàn)證信息提示,并提供自定義覆蓋默認(rèn)提示信息的功能
- 實(shí)時(shí)驗(yàn)證:可以通過(guò)keyup或blur事件觸發(fā)驗(yàn)證,而不僅僅在表單提交的時(shí)候驗(yàn)證。
(2)插件下載地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Validation插件的官方API地址為: http://docs.jquery.com/Plugins/Validation
2、jQuery表單插件:Form
(1)Form插件簡(jiǎn)介
????jQuery Form插件是一個(gè)優(yōu)秀的Ajax表單插件,可以非常容易地、無(wú)侵入地升級(jí)HTML表單以支持Ajax。jQuery有兩個(gè)核心方法——ajaxForm()和ajaxSubmit(),它們集合了從控制表單元素到?jīng)Q定如何管理提交進(jìn)程的功能。另外iain,插件還包括其他的一些方法:formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()和resetForm()等
(2)jQuery Form表單插件下載地址:http://jquery.malsup.com/form/。讀者可以下載該插件,并在該網(wǎng)站上查看簡(jiǎn)單上手說(shuō)明、API、實(shí)例代碼等。
3、動(dòng)態(tài)綁定事件插件:livequery
(1)livequery插件簡(jiǎn)介
????jQuery的事件綁定功能使得jQuery代碼與HTML代碼能夠完全分離,這樣代碼的層次關(guān)系更加清晰,維護(hù)起來(lái)也更加簡(jiǎn)單。然而對(duì)于動(dòng)態(tài)加載到頁(yè)面的HTML元素,每次都需要重新綁定事件到這些元素上,十分不便。一款新的插件由此產(chǎn)生,即livequery,可以利用它給相應(yīng)的DOM元素注冊(cè)時(shí)間或者觸發(fā)回調(diào)函數(shù)函數(shù)。不僅當(dāng)前選擇器匹配的元素會(huì)被綁定事件,而且后來(lái)通過(guò)JavaScript添加的元素都會(huì)被綁定事件。當(dāng)元素不再和選擇器匹配時(shí),livequery會(huì)自動(dòng)取消事件注冊(cè),使得開(kāi)發(fā)者不再需要關(guān)注HTML元素的來(lái)源,只需要關(guān)注如何編寫(xiě)其綁定的事件即可。
????通過(guò)jQuery選擇器選擇一個(gè)DOM元素,livequery插件會(huì)實(shí)時(shí)地在整個(gè)DOM范圍將其持久化。這意味著無(wú)論元素是先前存在的還是后來(lái)動(dòng)態(tài)加載的,事件都會(huì)被綁定,就像是CSS給元素添加樣式一樣。同時(shí),這款插件幾乎在沒(méi)占用什么資源的情況下就做到了這些功能。
(2)jQuery livequery插件的下載地址:http://plugins.jquery.com/livequery/
4、jQuery UI插件
(1)jQuery UI簡(jiǎn)介:
????jQuery UI源自于一個(gè)jQuery插件——Interface。Interface插件最早版本我1.2,只支持jQuery1.1.2的版本,后來(lái)有人對(duì)Interface的大部分代表基于jQuery1.2的API進(jìn)行重構(gòu),并統(tǒng)一了API。由于改進(jìn)重大,因此版本號(hào)不是1.3而是直接跳到1.5,并且改名為jQuery UI。
????jQuery UI主要分為3個(gè)部分,交互、微件和效果庫(kù)
- 交互。這里都是一些 與鼠標(biāo) 交互相關(guān)的內(nèi)容。包括拖動(dòng),置放,縮放,選擇 和排序 等待。微件(Widget)中有部分是基于這些交互組建來(lái)制作的。此庫(kù)需要 一個(gè)jQuery UI 核心庫(kù)——ui.core.js支持
- 微件。這里主要是一些界面的擴(kuò)展。里邊包括 了手風(fēng)琴導(dǎo)航,自動(dòng)完成,取色器,對(duì)話框,滑塊,標(biāo)簽 ,日歷,放大鏡,進(jìn)度條和微調(diào)控制器等待。此庫(kù)需要 一個(gè)jQuery UI 核心庫(kù)——ui.core.js支持
-
效果庫(kù)。此庫(kù)用于提供豐富的動(dòng)畫(huà)效果,讓動(dòng)畫(huà)不再局限于animate()方法。效果庫(kù)有自己的一套核心即effects.core.js,無(wú)需jQuery的核心庫(kù)ui.core.js支持
(2)jQuery UI插件的下載地址為:http://jqueryui.com/download/all/。選擇“jQuery UI 1.6rc2”鏈接可以直接下載完整套件,包括源碼,發(fā)行版和測(cè)試驅(qū)動(dòng)等。
5、管理Cookie的插件:Cookie
(1)Cookie插件簡(jiǎn)介
????Cookie是網(wǎng)站設(shè)計(jì)者放置在客戶端的小文本文件。Cookie能為用戶提供很多的便利,例如購(gòu)物網(wǎng)站存儲(chǔ)用戶曾經(jīng)瀏覽過(guò)的產(chǎn)品列表,或者門(mén)戶網(wǎng)站記住用戶喜歡選擇瀏覽哪類新聞。在用戶運(yùn)行的情況下,還可以存儲(chǔ)用戶的登陸情況,使得用戶在訪問(wèn)網(wǎng)站時(shí)不必每次都鍵入這些信息。
????jQuery提供了一個(gè)十分簡(jiǎn)單的插件來(lái)管理網(wǎng)站的Cookie,該插件的名稱也是Cookie.
(2)jQuery Cookie插件的下載地址:http://plugins.jquery.com/cookie/
6、模態(tài)窗口插件:SimpleModal
(1)SimpleModal插件簡(jiǎn)介
????SimpleModal是一個(gè)輕量級(jí)的jQuery插件,它為模態(tài)窗口的開(kāi)發(fā)提供了一個(gè)強(qiáng)有力的接口,可以把它當(dāng)作模態(tài)窗口的框架。SimpleModal非常的靈活,可以創(chuàng)建你能夠想象到的任何東西i,并且 你還不需要考慮UI開(kāi)發(fā)中的跨瀏覽器相關(guān)問(wèn)題。
(2)SimpleModal插件的下載地址:http://www.ericmmartin.com/projects/simplemodal/
7、延遲加載圖片插件:lazyload
延遲加載圖片或符合某些條件才開(kāi)始加載圖片
下載網(wǎng)址:https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js
8、fly插件
添加購(gòu)物車(chē)效果、實(shí)現(xiàn)拋物線運(yùn)動(dòng)
下載地址:https://github.com/amibug/fly
9、qrcode
能夠在客戶端生成矩陣二維碼QRCode 的jquery插件
下載地址:https://github.com/lrsjng/jquery-qrcode
10、spinner
可以很方便的實(shí)現(xiàn)購(gòu)物車(chē)數(shù)量的加減,也支持使用鍵盤(pán)上的上下鍵來(lái)改變購(gòu)物車(chē)的數(shù)量。
下載地址:https://github.com/vsn4ik/jquery.spinner
等等。。。
【推薦學(xué)習(xí):jQuery視頻教程、web前端視頻】