jquery plugins的意思為“jquery插件”，就是開發(fā)者用jquery編寫的一些工具，可以把它理解成使用jQuery封裝的一個功能或特效；在調(diào)用時只需要用很少的程式碼就能實(shí)現(xiàn)很好的效果。編寫jquery外掛的目的主要是為已經(jīng)有的一系列方法或函數(shù)做一個封裝，以便在其他地方重複使用，方便後期維護(hù)並提高開發(fā)效率。

本教學(xué)操作環(huán)境：windows7系統(tǒng)、jquery3.6.1版本、Dell G3電腦。

plugins的意思為「插件」。 jquery plugins的意思為「jquery插件」。

什麼是jquery外掛？

jQuery插件，就是開發(fā)愛好者自己利用Jquery製作的特效，然後經(jīng)過數(shù)據(jù)包或包裝處理成js文件，發(fā)佈到網(wǎng)路上供大家使用的腳本集合。

寫jquery外掛的目的主要是為已經(jīng)有的一系列方法或函數(shù)做一個封裝，以便在其他地方重複使用，方便後期維護(hù)和提高開發(fā)效率。

通常這類外掛除了呼叫jQuery函式庫文件，還需要呼叫外掛檔。都有使用說明，一看即會。例如jQuery官網(wǎng)製作的插件jQuery，在使用它時不僅要連結(jié)庫文件，還要連結(jié)UI文件以及UI的CSS文件，如：

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

經(jīng)過這幾部的操作，jQuery效果才能真正被引用到網(wǎng)頁文件中發(fā)揮作用。

外掛程式編寫

關(guān)於外掛程式的編寫，jquery官方給了一套物件層級開發(fā)外掛程式的模板：

;(function ($) {
    $.fn.plugin=function (options) {
        var defaults={
            //各種參數(shù)、各種屬性
        };
        //options合并到defaults上,defaults繼承了options上的各種屬性和方法,將所有的賦值給endOptions
        var endOptions=$.extend(defaults,options);
        
        this.each(function () {
            //實(shí)現(xiàn)功能的代碼
        });
    };
})(jQuery);

模板要點(diǎn)：

1.函數(shù)全部放在閉包裡，外面的函數(shù)就呼叫不到裡面的參數(shù)了,比較安全

#2.前面加分號,避免不必要的麻煩

jquery外掛程式呼叫的方法：

1、透過$.extend()來拓展jquery

2、透過向$.fn來想jquery新增方法

3、透過$.widget()應(yīng)用jQuery UI零件工場方法建立

其中的方法1沒辦法呼叫選擇器，只是被jQuery理解成為加入靜態(tài)方法，所以我們使用的時候不需要選取DOM物件

jquery常用的第三方外掛程式

JQuery有著豐富的第三方的插件，例如：樹形選單、日期控制、圖片切換插件、彈出視窗等等基本前臺頁面上的元件都有對應(yīng)插件，並且用JQuery插件做出來的效果很炫，並且可以根據(jù)自己需要去改寫和封裝插件，簡單實(shí)用。

以下介紹常用第三方外掛程式。

1、jQuery表單驗(yàn)證外掛：Validation

（1）Validation簡介?

????最常使用JavScript的場合就是表單的驗(yàn)證，而jQuery作為一個優(yōu)秀的JavaScript庫，也提供了一個優(yōu)秀的表單驗(yàn)證插件——Validation.Validation是歷史最悠久的jQuery插件之一，經(jīng)過了全球範(fàn)圍內(nèi)不同項(xiàng)目的驗(yàn)證，並得到了許多Web開發(fā)者的好評。作為標(biāo)準(zhǔn)的驗(yàn)證方法庫，Validation擁有以下優(yōu)點(diǎn)：

• 內(nèi)建驗(yàn)證規(guī)則：擁有必填、數(shù)字、E-Mail、URL和信用卡號碼等19類別內(nèi)建驗(yàn)證規(guī)則
• 自訂驗(yàn)證規(guī)則：可以很方便地自訂驗(yàn)證規(guī)則
• 簡單強(qiáng)大的驗(yàn)證資訊提示：預(yù)設(shè)了驗(yàn)證資訊提示，並提供自訂覆蓋預(yù)設(shè)提示資訊的功能
• #即時驗(yàn)證：可以透過keyup或blur事件觸發(fā)驗(yàn)證，而不只是在表單提交的時候驗(yàn)證。

（2）外掛程式下載網(wǎng)址：http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Validation外掛程式的官方API位址為： http://docs.jquery.com/Plugins/Validation

2、jQuery表單外掛：Form

（1）Form外掛程式簡介?

????jQuery Form外掛程式是優(yōu)秀的Ajax表單插件，可以非常容易地、無侵入地升級HTML表單以支援Ajax。 jQuery有兩個核心方法－ajaxForm()和ajaxSubmit()，它們集合了從控製表單元素到?jīng)Q定如何管理提交程序的功能。另外iain，插件還包含其他的一些方法：formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()和resetForm()等?

#（2）jQuery Form表單插件下載位址：http://jquery.malsup.com/form/。讀者可以下載插件，並在該網(wǎng)站上查看簡單上手說明、API、實(shí)例程式碼等。

3、動態(tài)綁定事件外掛：livequery

（1）livequery外掛程式簡介?

????jQuery的事件綁定功能使得jQuery程式碼與HTML程式碼能夠完全分離，這樣程式碼的層次關(guān)係更加清晰，維護(hù)起來也更加簡單??。然而對於動態(tài)載入到頁面的HTML元素，每次都需要重新綁定事件到這些元素上，十分不便。一款新的插件由此產(chǎn)生，即livequery，可以利用它來給對應(yīng)的DOM元素註冊時間或觸發(fā)回調(diào)函數(shù)函數(shù)。不僅目前選擇器所匹配的元素會被綁定事件，而且後來透過JavaScript添加的元素都會被綁定事件。當(dāng)元素不再和選擇器相符時，livequery會自動取消事件註冊，使得開發(fā)者不再需要關(guān)注HTML元素的來源，只需要關(guān)注如何撰寫其綁定的事件。?

????透過jQuery選擇器選擇一個DOM元素，livequery外掛程式會即時地在整個DOM範(fàn)圍將其持久化。這意味著無論元素是先前存在的還是後來動態(tài)載入的，事件都會被綁定，就像是CSS為元素添加樣式一樣。同時，這款外掛幾乎在沒佔(zhàn)用什麼資源的情況下就做到了這些功能。
（2）jQuery livequery外掛程式的下載位址：http://plugins.jquery.com/livequery/

4、jQuery UI外掛程式

##（1）jQuery UI簡介：?

????jQuery UI源自於一個jQuery外掛程式－Interface。 Interface插件最早版本我1.2，只支援jQuery1.1.2的版本，後來有人對Interface的大部分代表基於jQuery1.2的API進(jìn)行重構(gòu)，並統(tǒng)一了API。由於改進(jìn)重大，因此版本號碼不是1.3而是直接跳到1.5，並且改名為jQuery UI。?

????jQuery UI主要分為3個部分，互動、微件和效果庫

##交互作用。這裡都是一些 與滑鼠 互動相關(guān)的內(nèi)容。包括拖動，放置，縮放，選擇 和排序 等待。微件（Widget）中有部分是基於這些交互組成來製作的。此函式庫需要 一個jQuery UI 核心函式庫－ui.core.js支援

• 微件。這裡主要是一些介面的擴(kuò)展。裡邊包括 了手風(fēng)琴導(dǎo)航，自動完成，取色器，對話框，滑塊，標(biāo)籤 ，日曆，放大鏡，進(jìn)度條和微調(diào)控制器等待。此函式庫需要 一個jQuery UI 核心函式庫－ui.core.js支援
• 效果函式庫。此庫用於提供豐富的動畫效果，讓動畫不再局限於animate()方法。效果庫有自己的一套核心即effects.core.js，無需jQuery的核心庫ui.core.js支援
（2）jQuery UI外掛程式的下載位址為：http ://jqueryui.com/download/all/。選擇「jQuery UI 1.6rc2」連結(jié)可以直接下載完整套件，包括原始碼，發(fā)行版和測試驅(qū)動程式等。

5、管理Cookie的插件：Cookie

（1）Cookie外掛程式簡介?

????Cookie是網(wǎng)站設(shè)計(jì)者放置在客戶端的小文字檔案。 Cookie能為使用者提供大量的便利，例如購物網(wǎng)站儲存使用者曾經(jīng)瀏覽過的產(chǎn)品列表，或是入口網(wǎng)站記住使用者喜歡選擇瀏覽哪一類新聞。在使用者運(yùn)作的情況下，還可以儲存使用者的登陸情況，使得使用者在造訪網(wǎng)站時不必每次都鍵入這些資訊。

????jQuery提供了一個十分簡單的插件來管理網(wǎng)站的Cookie，該插件的名稱也是Cookie.?

（2）jQuery Cookie插件的下載位址：http://plugins.jquery .com/cookie/

6、模態(tài)視窗外掛：SimpleModal

（1）SimpleModal外掛程式簡介?

????SimpleModal是一個輕量級的jQuery插件，它為模數(shù)態(tài)視窗的發(fā)展提供了一個強(qiáng)有力的接口，可以把它當(dāng)作模態(tài)視窗的框架。 SimpleModal非常的靈活，可以創(chuàng)造你能夠想像到的任??何東西i，而且 你還不需要考慮UI開發(fā)中的跨瀏覽器相關(guān)問題。

（2）SimpleModal外掛的下載位址：http://www.ericmmartin.com/projects/simplemodal/

7、延遲載入圖片外掛：lazyload

延遲載入圖片或符合某些條件才開始載入圖片

下載網(wǎng)址：https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js

8、fly外掛程式

新增購物車效果、實(shí)現(xiàn)拋物線運(yùn)動

下載網(wǎng)址：https://github.com/amibug/fly

9、qrcode

能夠在客戶端產(chǎn)生矩陣二維碼QRCode 的jquery外掛程式

##下載位址：https://github.com/ lrsjng/jquery-qrcode

10、spinner

可以很方便的實(shí)現(xiàn)購物車數(shù)量的加減，也支援使用鍵盤上的上下鍵來改變購物車的數(shù)量。

下載網(wǎng)址：https://github.com/vsn4ik/jquery.spinner

等等。 。 。

【推薦學(xué)習(xí)：

jQuery影片教學(xué)

、

web前端影片】

以上是什麼是jquery plugins的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！