jquery插件模式中this和this.each有什么区别?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery插件模式中this和this.each有什么区别?相关的知识,希望对你有一定的参考价值。

我正在阅读这个jQuery插件模式:https://github.com/jquery-boilerplate/jquery-patterns/blob/master/patterns/jquery.extend-skeleton.js我不明白的是在return语句中调用this上的每个函数的目的是什么?这取代了:

    ;(function($){
        $.fn.extend({
            pluginName: function( options ) {

                this.defaultOptions = {};

                var settings = $.extend({}, this.defaultOptions, options);

                return this.each(function() {

                    var $this = $(this);

                });

            }

        });

    })(jQuery);

如果我只是返回this

;(function($){
    $.fn.extend({
        pluginName: function( options ) {

            this.defaultOptions = {};

            var settings = $.extend({}, this.defaultOptions, options);

            return this;

        }

    });

})(jQuery);

两者都一样。据我所知,this充当插件中的选定元素。例如,如果我有三个与类test的div,我这样做:

$(".test").pluginName(); // returns an array of three div elements in both plugin styles  

据我所知,$(".test")给出了一个由三个dom元素组成的数组,并且对于$(".test").pluginName();,pluginName被调用三次,并且三个返回的值被推送到最后返回的数组中。

所以请求解释为什么他们在回报声明中使用this.each()而不是this

答案

据我所知,$(“。test”)给出了一个包含三个dom元素的数组,pluginName被调用三次为$(“。test”)。pluginName();并将三个返回的值推入一个最后返回的数组中。

这是不正确的。 pluginName()被调用一次,将此设置为对应于三个DOM元素的jQuery对象。因此,使用this.each()以便循环遍历jQuery对象并为每个对象执行任何操作。

以上是关于jquery插件模式中this和this.each有什么区别?的主要内容,如果未能解决你的问题,请参考以下文章

jQuery插件:返回此vs返回this.each()

jquery 插件 .append .each 和一个唯一的 id

jquery中的each方法,$.each this.each $.fn.each

强大的JQuery-自定义插件

封装Jquery 合并table中任何同列数据

jquery 插件封装模板