插件 - 入门

可以通过添加其原型来扩展 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 示例