jQuery的$.extend()、$.fn和$.fn.extend()学习总结
-
jQuery为开发插件提供了两个方法,分别是:
-
jQuery.fn.ectend()
-
jQuery.extend()
-
-
jQuery.fn
jQuery.fn = jQuery.prototype = {
init: function(selector, content){ //....
//...
}
}
-
jQuery.extend(object)
- 为jQuery类添加类方法,可以理解为添加静态方法。如:
jQuery.extend({
min: function(a, b) { return a < b ? a : b },
max: function(a, b) { return a > b ? a : b }
});
jQuery.min(2,3); // 2
jQuery.max(2,3); // 3
-
Object jQuery.extend(target, object1, [objectN])
- 用一个或者多个其他对象来扩展一个对象,返回被扩展的对象
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
//结果:settings == { validate: true, limit: 5, name: "bar" }
-
jQuery.fn.extend(object)
-
对jQuery.prototype进行扩展,就是jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”
-
比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert当前编辑框里的内容
$.fn.extend({ alertIfClick: function() { $(this).click(function(){ alert($(this).val()); }); } }); $("#input1").alertIfClick();
-
$("#input1")为一个jQuery实例,当它调用成员方法alertIfClick后,便实现了扩展,每次被点击时它会先弹出目前编辑框里的内容
-
jQuery.extend()的调用并不会把方法扩展到对象的实例上,引用它的方法也需要通过jQuery类来实现,如jQuery.init(),而jQuery.fn.extend()的调用把方法扩展到了对象的prototype上,所以实例化一个jQuery对象的时候,它就具有了这些方法,这是很重要的,在jQuery.js中到处体现这一点
-
-
jQuery.fn.extend = jQuery.prototype.extend
- 可以拓展一个对象到jQuery的prototype里去,这样的话就是插件机制了
(function($){ $.fn.tooltip = function( options ){ }; //等价于 var tooltip = { function( options ){ } }; $.fn.extend(tooltip) == $.prototype.extend(tooltip) == $.fn.tooltip })(jQuery);