$.extend 和$.fn.extend的区别

此处要用面向对象的思想进行理解

首先这两个方法是jquery为开发插件提供的两个方法

可以把jquery看做是一个封装好的类 类中肯定有属性和方法

比如$(“#btn1”)会生成一个jquery类的实例 对象

$.extend(object);他是为jquery 类添加方法 可以理解为添加静态方法

$.extend({

minfunction(a,b){

return a<b?a:b;

},

Max:function(a,b){

Return a>b?a:b;

}

})

$.enxtend(target,object1,[objectN])用一个或多个其他对象来扩展一个对象返回被扩展的对象

Var settings={validate:false,limit:5,name:”foo”}

Var options={validate:true ,name:”bar”}

$.extend(settings,options);

结果:settings=={validate:true,limit:5,name:”bar”}

// 新的更深入的 .extend() 
jQuery.extend( true, 
{ name: “John”, location: { city: “Boston” } }, 
{ last: “Resig”, location: { state: “MA” } } 
); 
// 结果 
// => { name: “John”, last: “Resig”, 
// location: { city: “Boston”, state: “MA” } } 

$.fn.extend(object) 它是为jquery的成员(对象)添加方法

$.fn是指jQuery的命名空间,fn上的成员(方法function及属性property),会对jQuery实例每一个有效。 

查看jQuery代码,就不难发现。

jQuery.fn = jQuery.prototype = {

   init: function( selector, context ) {//.... 

};

原来 jQuery.fn = jQuery.prototype.

所以,它是对jQuery.prototype进得扩展,就是为jQuery类添加成员函数jQuery类的实例可以使用这个成员函数

例如:

$.fn.extend({

doAlertWhileClick:function(){

$(this).click(function(){

Alert($(this).val())

})

}

})

$("#input1").doAlertWhileClick(); // 页面上为:    

$("#input1") 为一个jQuery实例,当它调用成员方法 doAlertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容

loading………….

原文地址:https://www.cnblogs.com/lflying/p/10986413.html