jquery prevents repeated clicks and displays in the load.

$. Loadevents ("Showloading", $ ("#tt"), "#902D2D");

$. Loadevents ("Hideloading", $ ("#tt"));

Native code:

! (function($) {$.extend ({"Loadevents":function(EventType, $parent, Loadcolor, BgColor, opacity, fn) {Switch(eventtype) { Case"Showloading": {                    if($ (Document.head). Find (' #css_loader '). Length = = 0) {$ (Document.head). Append (' <link rel= ' stylesheet "type=" Text/css "id=" Css_loader "href=" Loader.css ">"); }                    varLoadertargets = []; var$body =$ (document.body); var_bgcolor = ' Rgba (238,238,238,0.5) '; var_opacity = 1; var_loadcolor = ' #67CF22 '; if(typeof(bgColor)! = "undefined") {_bgcolor=BgColor; }                    if(typeof(opacity)! = "undefined") {_opacity=opacity; }                    if($parent. Find ("#events_loader"). Length = = 0){                        //you can have multiple instances of loading, so you need to use loaders to manage                        var$loader = $ ("<div id= ' Events_loader ' ></div>"). css ({background: _bgcolor, opacity:_opacity, Position:' Absolute ', Top:0, left:0, Width:' 100% ', Height:' 100% '                        }); //Loading Animation                        var$icon = $ (' <div class= "spinner" > ' + ' <div class= "rect1" ></div> ' +                             ' <div class= ' rect2 ' ></div> ' + ' <div class= ' rect3 ' ></div> ' + ' <div class= ' rect4 ' ></div> ' + ' <div class= ' rect5 ' > </div> ' + ' </div> '); if(typeof(loadcolor)! = "undefined") {_loadcolor=Loadcolor; } $icon. Children (). CSS ({"Background": _loadcolor});                        $loader. Append ($icon);                    $parent. Append ($loader); }                     Break; }                 Case"Hideloading": {$parent. Find ("#events_loader"). Remove ();  Break}}} ) (jQuery);

Css

. Spinner{width:60px;Height:60px;text-align:Center;font-size:10px;position:Absolute;Top:50%; Left:50%;Transform:Translate ( -50%,-50%);}. Spinner > Div{Height:100%;width:6px;Display:Inline-block;Margin-left:6px;-webkit-animation:stretchdelay 1.2s Infinite ease-in-out;Animation:stretchdelay 1.2s Infinite ease-in-out;}. Spinner. Rect2{-webkit-animation-delay:-1.1s;Animation-delay:-1.1s;}. Spinner. Rect3{-webkit-animation-delay:-1.0s;Animation-delay:-1.0s;}. Spinner. Rect4{-webkit-animation-delay:-0.9s;Animation-delay:-0.9s;}. Spinner. Rect5{-webkit-animation-delay:-0.8s;Animation-delay:-0.8s;}@-webkit-keyframes Stretchdelay{0%, 40%, 100% {-webkit-transform:ScaleY (0.4)}20%{-webkit-transform:ScaleY (1.0)}} @keyframes Stretchdelay{0%, 40%, 100% {transform:ScaleY (0.4);-webkit-transform:ScaleY (0.4); }20%{Transform:ScaleY (1.0);-webkit-transform:ScaleY (1.0); }}

Achieve results

Extension :$.extend ({}), use of (function () {}) (jQuery) ;

$.extend () deep copy, shallow copy of the function;

because of its own existence in some overloaded prototypes

Give me a chestnut:

var dog1={height: "60cm", Age:3,color:{head: "Yellow", Body: "White"};

var dog2={sex: "Female", Color:{body: "Red"};

var dog=$.extend (DOG1,DOG2);// default false

var dog1=$.extend (true, dog1,dog2);

var dog2=$.extend (false, DOG1,DOG2);

Output Result:

Dog={height: "60cm", Age:3,sex: "Female", Color:{body: "Red"};

Dog1={height: "60cm", Age:3,sex: "Female", Color:{head: "Yellow", Body: "Red"};

Dog2={height: "60cm", Age:3,sex: "Female", Color:{body: "Red"};

(function () {}) (JQuery) understanding of anonymous immediate execution functions;

(function (ARG) {...}) (param), which defines an anonymous function with the arg parameter, which is then executed by the param method call;

is actually equivalent to Var fuc = function () {};FN (param). Jquery is also the same operation.

$.extend () can also perform two custom encapsulation methods for jquery

When you want to develop a common plug-in can be implemented in this way.

For example, I want to encapsulate the native JS attribute into my own jquery .

For a chestnut: wrap the native document.getelementsbytagname into jquery to use

JS Module

(function ($) {

$.extend ({

"Gettagname": function (colval) {

var tagname = document.getElementsByTagName (colval);

return tagname;

}

});

}) (JQuery);

var tagval = $.gettagname ("h1") [0];

Console.log ("tagval=" +tagval.innertext);

Html Module

Huang Big

Appeal of Loadevents is also the same way to encapsulate the implementation, the main introduction of the principle of implementation can be their own attempt or message inquiry.

jquery prevents repeated clicks and displays in the load.