JQuery pagenation Knowledge Point finishing--$.extend (), and $.fn.extend () applications (20150517)

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

JQuery.fn.extend ();

Jquery.extend ();

One, $.extend () method

The $.extend () method has two uses in jquery:

The first is the extension method of jquery:

Instance:

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:

1 Jquery.extend ({2 3Minfunction(A, B) {returnA < b?a:b;},4 5Maxfunction(A, B) {returna > B?a:b;}6 7 });8 9Jquery.min (2,3);//2TenJquery.max (4,5);//5

extension method (i)

1$(function(){2 Jquery.extend ({3Modalshow:function(options) {4 varDefaults = {5Triggerid: ' Loginshow ',6Callbackfunction () { }7}<br>//here is the second usage of $.extend <br> var opts = $.extend ({},defaults, options);8 if($ ("#" + Opts.triggerid) [0] = =NULL) {9 var$triggerBTN = $ (' <input type= "button" value= "Loginshow" id= ' + opts.triggerid + '/> ');Ten$triggerBTN. Bind ("click",function () { One alert (opts.triggerid); A }); -$ ("Body"). Append ($triggerBTN); -}Else { the$ ("#" + Opts.triggerid). Bind ("click",function () { - alert (opts.triggerid); - }) - } + } - }); +$.modalshow ();//here is where the call is, the button with Id ' loginshow ' can be added to the HTML before it can be automatically generated A})

Extension Method (Ii.)

1$(function(){2 JQuery.fn.extend ({3Modalshow:function(options) {4 varDefaults = {5 //here is the jquery object6Triggerid: This. attr ("id"),7Callbackfunction () { }8}<br>//here is the second usage of $.extend <br> var opts = $.extend (defaults, options);9$ ("#" + Opts.triggerid). Bind ("click",function () {Ten alert (opts.triggerid); One }) A } - }); -$ ("#loginShow"). Modalshow ();//here is where the call takes place, where the element is first added to the HTML the})

The second method is a recursive merge method:

Jquery.extend ([deep], Target, Object1, [objectn])

return value: Object

Merging 2 objects to get new target,deep is optional (recursive merge)

Example (i)

Describe:

Merge settings and options, modify and return settings.

1 var false, Limit:5, Name: "foo" }; 2 var true, Name: "Bar" }; 3 jquery.extend (settings, options);

return Result:

true, Limit:5, Name: "Bar"}

Example (ii)

Describe:

Merge defaults and options without modifying the defaults.

1 var empty = {}; 2 var false, Limit:5, Name: "foo" }; 3 var true, Name: "Bar" }; 4 var settings = Jquery.extend (empty, defaults, options);

return Result:

true, Limit:5, Name: "Bar"true, Limit:5, Name: "Bar"}

Example (iii)

Jquery pagenation page plug-in code snippet:

1defaultoption={debug=false, firstbtntext=NULL, infoformat= "{start}~{end} of {total} entires", jumpbtntext= "Go", lastbtntext=NULL, loadfirstpage=true, showfirstlastbtn=true, nextbtntext= "»", pagebtncount=11,pagesize=10,pagesizeitems=NULL, prebtntext= "«", remote={pageindexname= "PageIndex", pagesizename= "PageSize", param=NULL, totalname= "Total", url=NULL, callback=NULL,},showinfor=false, showjump=false, showpagesize=false};2 3$.fn.page.defaults=Undefind;4 5options={total=352,showinfo=true, showjump=true, showpagesizes=true};6 7  This. options = $.extend (true, {}, Defaultoption, $.fn.page.defaults, Options);

return Result:

this. options={debug=false, firstbtntext=null, infoformat= ' {start}~{end} of {total} Entires ", jumpbtntext=" Go ", lastbtntext=null, loadfirstpage=true, showfirstlastbtn=true , nextbtntext= "»", pagebtncount=11,pagesize=10,pagesizeitems=null, prebtntext= "«", Remote={pageindexname= "PageIndex", pagesizename= "PageSize", param=null, Totalname= "Total", url=null , callback=null,},showinfor=true, showjump=true, showpagesize=true , total=352}

Second, the use of JQuery.fn.extend (object):

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.

Reference Source: http://blog.csdn.net/xylike816/article/details/6704119

Http://blog.sina.com.cn/s/blog_7c5d61f30101da1k.html

JQuery pagenation Knowledge Point finishing--$.extend (), and $.fn.extend () applications (20150517)