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

Posted 2021-12-24 lflying

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

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

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

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

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

如

$.extend(

min：function(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………….