jQuery 插件-入门

示例

jQuery API可以通过添加其原型来扩展。例如，现有的API已经有许多可用的功能，例如，，等。.hide().fadeIn().hasClass()

jQuery原型通过公开$.fn，源代码包含以下行

jQuery.fn = jQuery.prototype

将函数添加到该原型将允许从任何构造的jQuery对象中调用这些函数（对jQuery的每次调用或对$的每次调用（如果愿意）都可以隐式完成）。

构造的jQuery对象将根据传递给它的选择器保存元素的内部数组。例如，$('.active')将在调用时构造一个jQuery对象，该对象包含具有活动类的元素（例如，这不是一组实时元素）。

thisplugin函数内部的值将引用构造的jQuery对象。结果，this用于表示匹配集。

基本插件：

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

// 使用示例：
$("span").highlight();

jsFiddle示例

可链接性和可重用性

与上面的示例不同，jQuery插件应可链接。
这意味着可以将多个方法链接到相同的元素集合，例如$(".warn").append("WARNING! ").css({color:"red"})（请参阅在之后的方法，两个方法都适用于同一集合）.css().append().warn

允许一个人通过不同的自定义选项在不同的集合上使用相同的插件在自定义/可重用性中起着重要的作用

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

    // 默认设置
    var settings = $.extend({
        color : "",              // 默认为当前文字颜色
        background : "yellow"    // 默认为黄色背景
    }, custom);

    return this.css({     // `return this`保持方法的可链接性
        color : settings.color,
        backgroundColor : settings.background
    });

  };
}( jQuery ));


// 使用默认设置
$("span").highlight();    // 您可以链接其他方法

// 使用自定义设置
$("span").highlight({
    background: "#f00",
    color: "white"
});

jsFiddle演示

自由

上面的示例在理解基本插件创建的范围内。请记住，不要限制用户使用有限的自定义选项集。

例如，假设您要构建一个插件，您可以在其中传递所需的文本字符串，该字符串将突出显示，并允许最大程度地涉及样式：.highlight()

//...
// 默认设置
var settings = $.extend({
   text : "",          // 突出显示的文字
   class : "highlight" // 引用CSS类
}, custom);

return this.each(function() {
   // 您的单词突出显示逻辑
});
//...

用户现在可以通过使用自定义CSS类传递所需的文本并完全控制添加的样式：

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

jsFiddle示例