Jquery.attr () Source code interpretation

We know that $ (). attr () essentially calls the Jquery.access method internally, which is passed in as a callback when called Jquery.attr. After passing various judgments (see the Jquery.access () method), the Jquery.attr method is called at the end of the value and assignment.

So, the key is to see jquery.attr here how to go ~ ~

The source code is as follows:

attrfunction(elem, name, value) {varhooks, ret, NType=Elem.nodetype; //if Elem does not exist, or is a text, comment, attribute node        //don ' t get/set attributes on text, comment and attribute nodes        if(!elem | | nType = = 3 | | nType = = 8 | | nType = = 2 ) {            return; }        //Fallback to prop when attributes is not supported        if(typeofElem.getattribute = = = core_strundefined) {//if Elem does not support getattribute such as document or documentation fragmentation            returnJquery.prop (elem, name, value);//calling the Jquery.prop method        }        //All attributes is lowercase        //Grab necessary Hook if one is defined        //?         if(NType!== 1 | |!jquery.isxmldoc (elem)) {//Elem is not a label or elem is not in XMLName = Name.tolowercase ();//Property name UppercaseHooks = jquery.attrhooks[Name] | |(jQuery.expr.match.bool.test (name)? Boolhook:nodehook);//JQuery.attrHooks.type        }        if(Value!== undefined) {//Assign Value            if(Value = = =NULL) {//If the value is set to NULL, it is equivalent to removing attr, such as. attr (' checked ', null);jquery.removeattr (elem, name); } Else if(Hooks && "Set"inchHooks && (ret = Hooks.set (elem, value, name))!== undefined) {//set method for calling hooks                returnret; } Else{elem.setattribute (name, value+ "" );//if value is a numeric value, it is implicitly converted to a string                returnvalue; }        } Else if(Hooks && "get"inchHooks && (ret = Hooks.get (elem, name))!==NULL) {//Get of Call Hook            returnret; } Else{//Take valueret = jQuery.find.attr (elem, name);//call Sizzle.attr because there is one sentence in jQuery: Jquery.find = Sizzle;            //To fix a null value to undefined            //non-existent attributes return null, we normalize to undefined            returnRET = =NULL?Undefined:ret; }    }

From the code above, there are 7 trends:

1. Return

2, Jquery.prop

3, Jquery.removeattr

4, Attrhooks.set

5, Elem.setattribute

6, Attrhooks.get

7, Sizzle.attr

The first 5 are set values, and 6 and 7 are read values.

2 and 3 will read, here do not mention, first look at the sizzle.attr is what it is ^ ^

Sizzle.attr =function(Elem, name) {//Set document VARs if needed    if((elem.ownerdocument | | elem)!== document) {//if it is not the current documentSetdocument (Elem);//I don't know why I think about the IFRAME?     }    //Expr.attrhandle is an object that contains the    //Async Autofocus AutoPlay checked controls defer disabled hidden ismap loops    //multiple open readonly required scoped selected custom methods (properties)    varfn =expr.attrhandle[name.tolowercase ()],//Don ' t get fooled by Object.prototype properties (JQuery #13807)        //Hasown is hasOwnProperty .        //so this hasown.call (Expr.attrhandle, Name.tolowercase ()) is in determining whether the incoming property name is not the object's        //custom properties, not properties on prototypes        //Val is the result of invoking a custom method or undefinedval = fn && hasown.call (Expr.attrhandle, Name.tolowercase ())?fn (elem, name,!documentishtml): undefined; //if Val is undefined        //returns the value of Elem.getattribute (name) if (Support.attributes is true or document is not HTML)        //Otherwise Val is the value of Elem.getattributenode (name))            //If Val is true and Val.specified is true, return Val.value            //Otherwise, NULL is returned    //otherwise returns Val    returnval = = = undefined?support.attributes|| !documentishtml?Elem.getattribute (name): (Val= Elem.getattributenode (name)) && val.specified?Val.value:NULL: Val;};

Complex ternary operators see the head is big, there is wood, OK, here can see, value with GetAttribute or GetAttributeNode.

And see what Attrhooks is:

attrhooks: {type: {set:function(Elem, value) {if(!jquery.support.radiovalue && Value = = = "Radio" && Jquery.nodename (elem, "input")) ) {                    //Setting the type on a radio button after the value resets the value in Ie6-9                    //Reset value to default in case type was set after value during creationvarval =Elem.value; Elem.setattribute ("Type", value); if(val) {Elem.value=Val; }                    returnvalue; }            }        }    }

As you can see from here, Attrhooks is concerned with setting the type value of the input tag, well, if you set the value to radio, be careful.

Jquery.attr () Source code interpretation