1. 程式人生 > >$.extend()和$.fn.extend()的區別和他們相應的作用

$.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,每例項化一個女的

相關推薦

no