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