jQuery插件教程

Arno 發布于2019-08-21 10:22 / 1290人閱讀

摘要：就是內部作為全局函數的插件添加到內核上去的。選擇器插件擴充自己喜歡的一些選擇器。在插件里的，經過了一些封裝處理，就是表示對象。調用時，字體大小會運用插件里的默認值

jQuery插件的分類

jQuery插件有很多，有UI類，表單驗證，輸入類，特效類，Ajax類，滑動類，導航類，工具類，動畫類等等。

jQuery的插件主要分為三類：

1、封裝對象方法的插件：也就是基于某個DOM元素的jQuery對象，局部性
2、封裝全局函數的插件：將獨立的函數添加到jquery的命名空間之下。jquery.trim()就是jquery內部作為全局函數的插件添加到內核上去的。
3、選擇器插件：擴充自己喜歡的一些選擇器。類似于.toggle()

插件的基本要點

 1. 插件的文件名推薦為 jquery.[插件名].js，例如jquery.validate.js
 2. 所有的對象方法都應當附加到jQuery.fn對象上，而所有的全局函數都應當附加到jQuery對象本身上
 3. 在插件內部，this指向的是當前通過選擇器獲取的jQuery對象，而不像一般的方法那樣，例如click()方法，內部的this指向的是DOM元素
 4. 可以通過this.each來遍歷所有元素
 5. 所有的方法或函數插件，都應當以分號結尾，否則壓縮時可能出問題，有的為了更加穩妥些，在插件的開始處加上一個分號
 6. 插件應該返回一個jQuery對象，這樣可以保證插件的可鏈式操作。除非插件需要返回的是一些需要獲取的量，例如字符串或者數組等
 7. 盡量利用閉包技巧歷來避免變量名的沖突
 8. 引入的自定義插件必須在jQuery庫后面

插件開發方式

jQuery插件開發方式主要有三種：

通過$.extend()來擴展jQuery
通過$.fn 向jQuery添加新的方法
通過$.widget()應用jQuery UI的部件工廠方式創建

通常我們使用第二種方法來進行簡單插件開發，而第一種方法是在jQuery命名空間上添加了一個靜態方法，并不能讓我們選中DOM元素，然后再調用該方法。而第三種并不常用，也較為復雜

插件的結構

在開始編寫jQuery插件時，我們有必要了解一下插件的基本結構，所有的jQuery插件都聲明為jQuery.fn對象的方法：

jQuery.fn.showPlugin = function () {
      //code here
};

我們使用如下代碼使用插件：

$("#plugin").showPlugin();

這里，我并沒有使用$，這是為了避免命名沖突，如果要用 $ 的話，可以像下面這樣把插件代碼封裝在一個自執行的匿名函數中，然后傳入參數jQuery

(function($){
    jQuery.fn.showPlugin = function () {
        //code here
    };
})(jQUery);

$.extend

.extend()允許你使用一個或多個對象擴展基準對象，擴展的方式是依序將右邊的對象合并到基準對象（左邊第一個對象）。

;(function($){
    $.extend({
        "nav" : function () {

        }
    })
})(jQuery);

我們通過如下方法使用該全局方法：

$.nav();

前面（見：淺析jQuery整體框架與實現（上））我們說過，$.extend是全局性的，而$.fn.extend是局部性的，前面之所以要加分號是因為為了防止在此之前引入的js文件沒有加分號

$.fn.myPlugin = function() {
    //在這里面,this指的是用jQuery選中的元素
    //example :$("a"),則this=$("a")
    this.css("color", "red");
}

this指代jQuery選擇器返回的集合。在插件里的this，經過了一些封裝處理，this就是表示jQuery對象。而不需要再次使用$()進行包裝了

鏈式調用

要讓插件實現鏈式調用只需要return該對象即可：

$.fn.myPlugin = function() {
    this.css("color", "red");
    return this.each(function() {
        //對每個元素進行操作
        $(this).append(" " + $(this).attr("href"));
    }))
}

使用return this.each(function () {} 這樣就實現了我們的鏈式操作。

接收多個參數

$.fn.myPlugin = function(options) {    //經常用options表示有多個參數。
    var defaults = {
        "color": "red",
        "fontSize": "12px"
    };
    var settings = $.extend(defaults, options);
    return this.css({
        "color": settings.color,
        "fontSize": settings.fontSize
    });
}

調用時，字體大小會運用插件里的默認值：

$("a").myPlugin({
    "color": "#2C9929"
});

GPU云服務器云服務器 jquery插件源碼jquery jquery插件手寫jQuery插件 jquery表單插件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85415.html

前端技術博客文章、書籍積累

摘要：好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優雅地使用把標簽放在結束標簽之后結束標簽之前的差別什么是響應式設計怎樣進行書籍《JavaScriptDOM編程藝術》《JavaScript高級程序設計》《JavaScript框架設計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹（修訂版）》《JavaScript設計模式》《J...

LiangJ 2019-08-30 12:58 評論0 收藏0
前端技術博客文章、書籍積累

摘要：好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優雅地使用把標簽放在結束標簽之后結束標簽之前的差別什么是響應式設計怎樣進行書籍《JavaScriptDOM編程藝術》《JavaScript高級程序設計》《JavaScript框架設計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹（修訂版）》《JavaScript設計模式》《J...

codercao 2019-08-19 18:10 評論0 收藏0
前端技術博客文章、書籍積累

摘要：好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優雅地使用把標簽放在結束標簽之后結束標簽之前的差別什么是響應式設計怎樣進行書籍《JavaScriptDOM編程藝術》《JavaScript高級程序設計》《JavaScript框架設計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹（修訂版）》《JavaScript設計模式》《J...

huayeluoliuhen 2019-08-01 15:13 評論0 收藏0
前端必須要珍藏的技術文章和面試題

摘要：前端工程師學習資料，快速查找面試題，經典技術文章的總結，編程技巧，幫助學習者快速定位問題花點時間整理出一下前端工程師日常工作所需要的學習資料查找，幫助學習者快速掌握前端工程師開發的基本知識編程始于足下記住再牛逼的夢想也抵不住傻逼似的堅持蝴蝶前端工程師學習資料，快速查找面試題，經典技術文章的總結，編程技巧，幫助學習者快速定位問題花點時間整理出一下web前端工程師日常工作所需要的學習資料...

MoAir 2019-08-26 10:29 評論0 收藏0