jquery-pluginsjquery-plugins入門


備註

jQuery插件只是我們用來擴展jQuery原型對象的新方法。通過擴展原型對象,您可以使所有jQuery對象繼承您添加的任何方法。如上所述,無論何時調用jQuery()您都會創建一個新的jQuery對象,並繼承所有jQuery的方法。

插件的想法是用一組元素做一些事情。您可以將jQuery核心附帶的每個方法都考慮為插件,如.fadeOut().addClass()

您可以製作自己的插件並在代碼中私下使用它們,也可以將它們發布給公眾。網上有成千上萬的jQuery插件。創建自己的插件的障礙是如此之低,以至於您可以輕鬆創作!

將文本顏色更改為綠色的基本插件。

// plugin initialization
$.fn.greenify = function() {
    // within the function you can use any of the jQuery methods
    // and `this` context refers to jQuery object
    this.css( "color", "green" );
};
 
// apply plugin
$( "a" ).greenify(); 
 

鏈接

這是有效的,但我們需要做一些事情才能使插件在現實世界中生存。當您將五個或六個動作鏈接到一個選擇器時,jQuery的一個功能就是鏈接。這是通過讓所有jQuery對象方法再次返回原始jQuery對象來實現的(有一些例外: .width() 調用不帶參數返回所選元素的寬度,並且不可鏈接)。使我們的插件方法可鏈接需要一行代碼:

$.fn.greenify = function() {
    this.css( "color", "green" );
    // return the reference for chaining
    return this;
}
 
$( "a" ).greenify().addClass( "greenified" );
 

安裝或設置

jQuery插件通常通過NPM或Yarn(如果託管在那裡)安裝,或者引用包含插件的外部腳本文件,無論是來自相對目錄還是CDN。

<script type="text/javascript" src="/path/to/plugin.jquery.js"></script>
 

支持默認選項

您可以通過接受選項來自定義插件。

$.fn.colourize = function(options) {

    // This is one method to support default options
    var style = $.extend({
        color: "green",
        backgroundColor: "white"
    }, options);

    // Set the colours on the current selection based on the option parameters
    return this.css({
        color: style.color,
        backgroundColor: style.backgroundColor
    });
};
 

用法示例:

$("button").colourize({
    color: "orange"
});
 

顏色選項“green”的默認值被$.extend() 覆蓋為“orange”。

典型的jQuery插件結構

雖然編寫jQuery插件很簡單,但我們希望將插件封裝在本地範圍內。除了確保在我們的插件擴展之前加載jQuery之外,這將避免命名空間衝突以及污染全局命名空間。

// Encapsulate our plugins in a local scope
(function($) {

    // Plugin definition
    $.fn.colourize = function() {

        // Plugin code

    };

// Pass the jQuery object into our local scope
}(jQuery));
 

在其他示例中可以省略本地範圍包裝器以使它們簡單和簡潔。

使用each()方法

典型的jQuery對象將包含對任意數量的DOM元素的引用,這就是jQuery對象通常被稱為集合的原因。如果你想對特定元素進行任何操作(例如獲取數據屬性,計算特定位置),那麼你需要使用.each()來遍曆元素。

$.fn.myNewPlugin = function() { 
    return this.each(function() {
        // Do something to each element here.
    });
 
    // return the reference for chaining
    return this;
};