$.extend and $.fn.extend function and difference of jquery/implementation of progress bar with span

jquery has two methods for developing plug-ins, namely:

JQuery.fn.extend ();

Jquery.extend ();

Although JavaScript does not have a clear class concept, it is more convenient to use a class to understand it.

jquery is a well-encapsulated class, such as we use the statement $ ("#btn1") to generate an instance of the jquery class.

Jquery.extend (object); Adding a class method to the jquery class can be understood as adding a static method. Such as:

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(4,5); //  5

Objectjquery. Extend (Target, Object1, [objectn]) extends an object with one or more other objects, returning the extended object
var settings = { validate: false, limit: 5, name: "foo" }; 
var options = { validate: true, name: "bar" }; 
jQuery.extend(settings, options);
Results:settings == { validate: true, limit: 5, name: "bar" }

JQuery.fn.extend (object); The extension to Jquery.prototype is to add "member functions" to the jquery class. An instance of the jquery class can use this "member function".

For example, we want to develop a plugin, make a special edit box, when it is clicked, then alert the contents of the current edit box. You can do this:

$.fn.extend ({          
      Alertwhileclick:function () {            
            $ (This). Click (function () {                  
                   alert ($ (this). Val ());            
             });            
      }       
});        
$ ("#input1"). Alertwhileclick ();  //page:     

$ ("#input1") is a jquery instance, and when it calls the Member method Alertwhileclick, it implements the extension, which pops up the contents of the current edit each time it is clicked.

$(Window).Height();Browser Current window viewable area height$(Document).Height();The height of the browser's current window document$(Document.Body).Height();The height of the body of the browser's current window document$(Document.Body).Outerheight(True);Browser Current Window document body total height includes border padding margin$(Window). width (); //Browser Current window viewable area width $ (documentwidth () Browser Current Window Document object width $ (document. Body). width () Browser Current window document body height $ (document. Body). outerwidth (true
Anonymous user
Link: https://www.zhihu.com/question/20985674/answer/16807177
Source: Known
Copyright belongs to the author, please contact the author for authorization.

$.extend and $.fn.extend effects and differences of jquery/Implementing a progress bar with span