技術文章 » 什麼是jquery plugins

什麼是jquery plugins

2022-09-27 18:01:44

jquery plugins的意思為「jquery外掛」，就是開發者用jquery編寫的一些工具，可以把它理解成使用jQuery封裝的一個功能或特效；在呼叫時只需要用很少的程式碼就能實現很好的效果。編寫jquery外掛的目的主要是給已經有的一系列方法或函數做一個封裝，以便在其他地方重複使用，方便後期維護和提高開發效率。

前端（vue）入門到精通課程：進入學習
API 檔案、設計、偵錯、自動化測試一體化共同作業工具：

本教學操作環境：windows7系統、jquery3.6.1版本、Dell G3電腦。

plugins的意思為「外掛」。jquery plugins的意思為「jquery外掛」。

1.png

什麼是jquery外掛？

jQuery外掛，就是開發愛好者自己利用Jquery製作的特效，然後經過封包或包裝處理成js檔案，釋出到網上供大家使用的指令碼集合。

編寫jquery外掛的目的主要是給已經有的一系列方法或函數做一個封裝，以便在其他地方重複使用，方便後期維護和提高開發效率。

通常這類外掛除了呼叫jQuery庫檔案，還需要呼叫外掛檔案。都有使用說明，一看即會。 比如jQuery官網製作的外掛jQuery，在使用它時不僅要連結庫檔案，還要連結UI檔案以及UI的CSS檔案，如：
登入後複製

經過這幾部的操作，jQuery效果才能真正被參照到網頁檔案中起到作用。

外掛編寫

關於外掛的編寫，jquery官方給了一套物件級別開發外掛的模板：

;(function ($) {
    $.fn.plugin=function (options) {
        var defaults={
            //各種引數、各種屬性
        };
        //options合併到defaults上,defaults繼承了options上的各種屬性和方法,將所有的賦值給endOptions
        var endOptions=$.extend(defaults,options);
        
        this.each(function () {
            //實現功能的程式碼
        });
    };
})(jQuery);
登入後複製

模板要點：

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

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

jquery外掛呼叫的方法：

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

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

3、通過$.widget()應用jQuery UI部件工場方法建立

其中的方法1沒辦法呼叫選擇器，僅僅被jQuery理解成為新增靜態方法，所以我們使用的時候不需要選中DOM物件

jquery常用的第三方外掛

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

下面介紹一下常用第三方外掛。

1、jQuery表單驗證外掛：Validation

（1）Validation簡介

    最常使用JavScript的場合就是表單的驗證，而jQuery作為一個優秀的JavaScript庫，也提供了一個優秀的表單驗證外掛——Validation.Validation是歷史最悠久的jQuery外掛之一，經過了全球範圍內不同專案的驗證，並得到了許多Web開發者的好評。作為一個標準的驗證方法庫，Validation擁有如下優點：

  • 內建驗證規則：擁有必填、數位、E-Mail、URL和信用卡號碼等19類內建驗證規則
  • 自定義驗證規則：可以很方便地自定義驗證規則
  • 簡單強大的驗證資訊提示：預設了驗證資訊提示，並提供自定義覆蓋預設提示資訊的功能
  • 實時驗證：可以通過keyup或blur事件觸發驗證，而不僅僅在表單提交的時候驗證。

（2）外掛下載地址：http://bassistance.de/jquery-plugins/jquery-plugin-validation/

這裡寫圖片描述


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

2、jQuery表單外掛：Form

（1）Form外掛簡介

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

（2）jQuery Form表單外掛下載地址：http://jquery.malsup.com/form/。讀者可以下載該外掛，並在該網站上檢視簡單上手說明、API、範例程式碼等。

3、動態繫結事件外掛:livequery

（1）livequery外掛簡介

    jQuery的事件繫結功能使得jQuery程式碼與HTML程式碼能夠完全分離，這樣程式碼的層次關係更加清晰，維護起來也更加簡單。然而對於動態載入到頁面的HTML元素，每次都需要重新系結事件到這些元素上，十分不便。一款新的外掛由此產生，即livequery，可以利用它給相應的DOM元素註冊時間或者觸發回撥函數函數。不僅當前選擇器匹配的元素會被繫結事件，而且後來通過JavaScript新增的元素都會被繫結事件。當元素不再和選擇器匹配時，livequery會自動取消事件註冊，使得開發者不再需要關注HTML元素的來源，只需要關注如何編寫其繫結的事件即可。

    通過jQuery選擇器選擇一個DOM元素，livequery外掛會實時地在整個DOM範圍將其持久化。這意味著無論元素是先前存在的還是後來動態載入的，事件都會被繫結，就像是CSS給元素新增樣式一樣。同時，這款外掛幾乎在沒佔用什麼資源的情況下就做到了這些功能。
（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進行重構，並統一了API。由於改進重大，因此版本號不是1.3而是直接跳到1.5，並且改名為jQuery UI。

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

  • 互動。這裡都是一些 與滑鼠 互動相關的內容。包括拖動，置放，縮放，選擇 和排序 等待。微件（Widget）中有部分是基於這些互動組建來製作的。此庫需要 一個jQuery UI 核心庫——ui.core.js支援
  • 微件。這裡主要是一些介面的擴充套件。裡邊包括 了手風琴導航，自動完成，取色器，對話方塊，滾軸，標籤 ，日曆，放大鏡，進度條和微調控制器等待。此庫需要 一個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」連結可以直接下載完整套件，包括原始碼，發行版和測試驅動等。

5、管理Cookie的外掛：Cookie

（1）Cookie外掛簡介

    Cookie是網站設計者放置在使用者端的小文字檔案。Cookie能為使用者提供很多的便利，例如購物網站儲存使用者曾經瀏覽過的產品列表，或者入口網站記住使用者喜歡選擇瀏覽哪類新聞。在使用者執行的情況下，還可以儲存使用者的登陸情況，使得使用者在存取網站時不必每次都鍵入這些資訊。

    jQuery提供了一個十分簡單的外掛來管理網站的Cookie，該外掛的名稱也是Cookie.

（2）jQuery Cookie外掛的下載地址：http://plugins.jquery.com/cookie/

6、模態視窗外掛：SimpleModal

（1）SimpleModal外掛簡介

    SimpleModal是一個輕量級的jQuery外掛，它為模態視窗的開發提供了一個強有力的介面，可以把它當作模態視窗的框架。SimpleModal非常的靈活，可以建立你能夠想象到的任何東西i，並且 你還不需要考慮UI開發中的跨瀏覽器相關問題。

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

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

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

下載網址：https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js

8、fly外掛

新增購物車效果、實現拋物線運動

下載地址：https://github.com/amibug/fly

9、qrcode

能夠在使用者端生成矩陣二維條碼QRCode 的jquery外掛

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

10、spinner

可以很方便的實現購物車數量的加減，也支援使用鍵盤上的上下鍵來改變購物車的數量。

下載地址：https://github.com/vsn4ik/jquery.spinner

等等。。。

【推薦學習：、】

以上就是什麼是jquery plugins的詳細內容，更多請關注TW511.COM其它相關文章！