The difference between $.extend(), $.fn and $.fn.extend() of js plugins



jQuery provides two methods for developing plug-ins,

jQuery.fn.extend();

jQuery.extend();


 jQuery.fn = jQuery.prototype;

$("#btn1") will generate an instance of the jQuery class, that is, you can directly call the methods in jQuery.prototype.

For jQuery.extend:

1. jquery.extend(obj) : Add a class method to the jQuery class, which can be understood as adding a static method

Such as:

[javascript]  view plain copy  
  1. jQuery.extend({  
  2. min: function(a, b) { return a < b ? a : b; },  
  3. max: function(a, b) { return a > b ? a : b; }  
  4. });  
  5. jQuery.min (2,3); // 2   
  6. jQuery.max(4,5); //  5  
2. jquery.extend( target, object1, [objectN] ): Extend an object with one or more other objects and return the extended object 

[javascript]  view plain copy  
  1. var settings = { validate: false, limit: 5, name: "foo" };   
  2. var options = { validate: true, name: "bar" };   
  3. jQuery.extend(settings, options);   
  4. 结果:settings == { validate: true, limit: 5, name: "bar" }  

For jQuery.fn.extend: The extension of jQuery.prototype is to add "member functions" to the jQuery class. Instances of the jQuery class can use this "member function". Extend an object to jQuery's prototype, which is the plug-in mechanism

[javascript]  view plain copy  
  1. $.fn.extend({            
  2.     alertWhileClick:function() {              
  3.           $(this).click(function(){                   
  4.                  alert($(this).val());             
  5.            });             
  6.      }         
  7. });         
  8. $("#input1").alertWhileClick();   

jQuery provides two methods for developing plug-ins,

jQuery.fn.extend();

jQuery.extend();


 jQuery.fn = jQuery.prototype;

$("#btn1") will generate an instance of the jQuery class, that is, you can directly call the methods in jQuery.prototype.

For jQuery.extend:

1. jquery.extend(obj) : Add a class method to the jQuery class, which can be understood as adding a static method

Such as:

[javascript]  view plain copy  
  1. jQuery.extend({  
  2. min: function(a, b) { return a < b ? a : b; },  
  3. max: function(a, b) { return a > b ? a : b; }  
  4. });  
  5. jQuery.min(2,3); //  2   
  6. jQuery.max(4,5); //  5  
2、 jquery.extend( target, object1, [objectN]):用一个或多个其他对象来扩展一个对象,返回被扩展的对象

[javascript]  view plain  copy
  1. var settings = { validate: false, limit: 5, name: "foo" };   
  2. var options = { validate: true, name: "bar" };   
  3. jQuery.extend(settings, options);   
  4. 结果:settings == { validate: true, limit: 5, name: "bar" }  

For jQuery.fn.extend: The extension of jQuery.prototype is to add "member functions" to the jQuery class. Instances of the jQuery class can use this "member function". Extend an object to jQuery's prototype, which is the plug-in mechanism

[javascript]  view plain copy  
  1. $.fn.extend({            
  2.     alertWhileClick:function() {              
  3.           $(this).click(function(){                   
  4.                  alert($(this).val());             
  5.            });             
  6.      }         
  7. });         
  8. $("#input1").alertWhileClick();   

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324918048&siteId=291194637