外掛 - 入門

可以通過新增其原型來擴充套件 jQuery API。例如，現有的 API 已經有很多可用的功能，如 .hide()，.fadeIn()，.hasClass() 等。

jQuery 原型通過 $.fn 公開，原始碼包含該行

jQuery.fn = jQuery.prototype

向這個原型新增函式將允許從任何構造的 jQuery 物件呼叫這些函式（這是每次呼叫 jQuery 時隱式完成的，或者如果你願意，每次呼叫$）。

構造的 jQuery 物件將根據傳遞給它的選擇器儲存一個內部元素陣列。例如，$('.active') 將構建一個 jQuery 物件，該物件在呼叫時儲存具有活動類的元素（例如，這不是一組實時元素）。

外掛函式內部的 this 值將引用構造的 jQuery 物件。結果，this 用於表示匹配的集合。

基本外掛 ：

$.fn.highlight = function() {
    this.css({ background: "yellow" });
};

// Use example:
$("span").highlight();

jsFiddle 示例

可連結性和可重用性

與上面的示例不同，jQuery 外掛應該是可連結的。
這意味著可以將多個方法連結到相同的元素集合，例如 $(".warn").append("WARNING! ").css({color:"red"})（請參閱我們如何在 .append() 之後使用 .css() 方法，這兩種方法都適用於相同的 .warn 集合）

允許一個人在不同的集合上使用相同的外掛，通過不同的自定義選項在自定義/可重用性中起著重要作用 ****

(function($) {
  $.fn.highlight = function( custom ) {

    // Default settings
    var settings = $.extend({
        color : "",              // Default to current text color
        background : "yellow"    // Default to yellow background
    }, custom);

    return this.css({     // `return this` maintains method chainability
        color : settings.color,
        backgroundColor : settings.background
    });

  };
}( jQuery ));

// Use Default settings
$("span").highlight();    // you can chain other methods

// Use Custom settings
$("span").highlight({
    background: "#f00",
    color: "white"
});

jsFiddle 演示

自由

以上示例在理解基本外掛建立的範圍內。請記住，不要將使用者限制為一組有限的自定義選項。

比如說你想要構建一個 .highlight() 外掛，你可以在其中傳遞一個所需的文字字串，該字串將被突出顯示並允許最大的樣式自由：

//...
// Default settings
var settings = $.extend({
   text : "",          // text to highlight
   class : "highlight" // reference to CSS class
}, custom);

return this.each(function() {
   // your word highlighting logic here
});
//...

使用者現在可以傳遞所需的**文字，**並通過使用自定義 CSS 類完全控制新增的樣式：

$("#content").highlight({
    text : "hello",
    class : "makeYellowBig"
});

jsFiddle 示例