$.extend()和$.fn.extend()的區別和他們相應的作用
阿新 • • 發佈:2019-01-16
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,每例項化一個女的