分享關於jQuery插件實例

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'
});

以上是分享關於jQuery插件實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！