jQuery插件教程

jQuery插件的分類

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

jQuery的插件主要分爲三類：

一、封裝對象方法的插件：也就是基於某個DOM元素的jQuery對象，局部性
二、封裝全局函數的插件：將獨立的函數添加到jquery的命名空間之下。jquery.trim()就是jquery內部做爲全局函數的插件添加到內核上去的。
三、選擇器插件：擴充本身喜歡的一些選擇器。相似於.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'
});