$.extend()和$.fn.extend()的区别和他们相应的作用

jQuery为开发插件提拱了两个方法,分别是:
jQuery.fn.extend(object);    给jQuery对象添加方法

jQuery.extend(object);     为扩展jQuery类本身.为类添加新的方法。

如果二者按照类的概念来理解的话:

 jQuery.extend(object)为jQuery类添加添加类方法,可以理解为添加静态方法。    

// 静态方法, 跟jq实例没关系(dOM)
        // $.extend({})
        $.extend({
            getColor() {
                var str = '0123456789abcdef';
                var color = '#';
                for(var i = 0; i < 6; i++) {
                    var _random = Math.random() * 15;
                    color += str[Math.round(_random)];
                }
                return color;
            }
        })

jQuery.fn.extend(object) $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效。

给jQuery对象添加方法,对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个类“成员函数”。对象级别则可以理解为基于对象的拓展       

$.fn.extend({
           setColor() {
                this.each(function(index, item) {
                    $(item).css("backgroundColor", $.getColor());
                })
                return this;
           },
           setHover: function(options) {
               var _default = {
                    "backgroundColor": "#000", 
                    "color": "#fff"
               }
               $.extend(_default, options)
               var defaultCss = {};
                this.on("mouseenter", function() {
                    // 记录改变的样式
                    for(var i in _default) {

                        defaultCss[i] = $(this).css(i);
                    }
                    $(this).css(_default);

                })
                this.on("mouseleave", function() {
                    $(this).css(defaultCss);
                })
           }
        })


简而言之,每个人都拥有的,都需要的就放到extend,如吃饭,睡觉。

而像怀孕这种只有女的有的能力就放在fn.extend,每实例化一个女的

猜你喜欢

转载自blog.csdn.net/qq_36245035/article/details/80953010