Read jquery source Five (ready event, Access)

SOURCE 3373-3461: main include ready event

//The deferred used on DOM readyvarReadylist;jquery.fn.ready=function(FN) {//ADD the callbackjQuery.ready.promise (). Done (FN); return  This;}; Jquery.extend ({//Is the DOM ready to be used? Set to True once it occurs.IsReady:false,    //A counter to track how many items to wait for before    //The Ready event fires. See #6781Readywait:1,    //Hold (or release) the Ready eventHoldready:function(Hold) {if(Hold) {jquery.readywait++; } Else{Jquery.ready (true ); }    },    //Handle When the DOM was readyReadyfunction(wait) {//Abort If there is pending holds or we ' re already ready        if(Wait = = =true? --JQuery.readyWait:jQuery.isReady) {            return; }        //Remember that the DOM was readyJquery.isready =true; //if a normal DOM ready event fired, decrement, and wait if need is        if(Wait!==true&&--jquery.readywait > 0 ) {            return; }        //If There is functions bound, to executeReadylist.resolvewith (document, [JQuery]); //Trigger any bound ready events        if(JQuery.fn.triggerHandler) {jQuery (document). Triggerhandler ("Ready" ); JQuery (document). Off ("Ready" ); }    }});/** * The Ready event handler and Self cleanup method*/functioncompleted () {Document.removeeventlistener ("Domcontentloaded", completed,false ); Window.removeeventlistener ("Load", completed,false ); Jquery.ready ();} JQuery.ready.promise=function(obj) {if( !readylist) {Readylist=jquery.deferred (); //Catch cases where $ (document). Ready () was called after the browser event had already occurred.        //We once tried to use readyState ' interactive ' here, but it caused issues like the one        //discovered by Chriss here:http://bugs.jquery.com/ticket/12282#comment:15        if(Document.readystate = = = "complete" ) {            //Handle It asynchronously to allow scripts the opportunity-to-delay readysetTimeout (Jquery.ready); } Else {            //Use the handy event callbackDocument.addeventlistener ("domcontentloaded", completed,false ); //A fallback to window.onload.Window.addeventlistener ("Load", completed,false ); }    }    returnreadylist.promise (obj);};//Kick off the DOM ready check even if the user does notJQuery.ready.promise ();

View Code

1.ready and Load Events

The Ready event executes when the DOM structure is loaded and fires before the Load event.

The Load event is triggered when the document is loaded, all elements, resources (images, CSS, embedded iframe) are loaded. In most cases, JS code can be executed only if the DOM structure is loaded.

The domcontentloaded event is supported by ie9+ and other browsers, and the onreadystatechange can be monitored for the following versions of IE9 Internet Explorer. The new version of jquery is incompatible with the old version of IE, the source only listen to domcontentloaded events.

2. Readylist is defined to hold the asynchronous queue deferred, and the Ready method is added to the jquery object. Such as:

// The deferred used on DOM ready var  function(FN) {    //  ADD The callback    jQuery.ready.promise ( ). Done (FN);     return  This ;};

3. Continue to be This code jQuery.ready.promise (). Done (FN);

3.1 First Ready is a property method defined under jquery that triggers the execution of the function inside the readylist, with the following code snippet:

    function (wait) {        //  execute readylist inside the function         readylist.resolvewith (document, [JQuery]);    }

3.2 Adds a property method promise to this ready, with the following code:

JQuery.ready.promise =function(obj) {if( !readylist) {Readylist=jquery.deferred (); //ReadyState has several values: Loading,interactive,complete        if(Document.readystate = = = "complete" ) {            //asynchronously executes the function inside the ready if it is already loadedsetTimeout (Jquery.ready); } Else {            //Binding EventsDocument.addeventlistener ("domcontentloaded", completed,false ); //Window.addeventlistener ("Load", completed,false ); }    }    returnreadylist.promise (obj);};

3.3 document.readyState:loading (Loaded), interactive (DOM loaded), complete (DOM and resources all loaded)

The completed function for the 3.4 binding is:

This event is also removed when triggered, because only one time is required and the Ready method is called to trigger.

function completed () {    false  );     false  );    Jquery.ready ();}

3.5 3461 lines of code jQuery.ready.promise (); There is a single line here, whether we use ready or not, will execute.

SOURCE 3468-3517

4. Access: Sets or reads a value for an element in the collection, which is internally called by many other functions, such as ATTR,TEXT,CSS. In the end, the setattribute is used as a native method.

Cond...

　　

Read jquery source Five (ready event, Access)