Differences between jQuery prop and attr

Differences between jQuery prop and attr
Comparison between the two jquery methods is suitable for scenario defect prop parsing native propertyelement. property radio/checkbox select tag. If you need to read boolean and index, you cannot read Custom Attributes. For example, <a my = 'I'/> my attributes cannot read attr, and element can be read through the Attr API.. in addition to the prop scenario, getAttribute (propertyName) may not be able to read boolean or some index values such as checked. In the selectedIndex prop method example, enter document on the console. getElementsByTagName ('A') [0]. the href console outputs "http://www.baidu.com/home/xman/show/liteoff" href, which is the native attribute of the DOM object HTMLAnchorElement mapped to tag. JQuery source code copy code prop: function (elem, name, value) {var ret, hooks, notxml, nType = elem. nodeType; // don't get/set properties on text, comment and attribute nodes if (! Elem | nType = 3 | nType = 8 | nType = 2) {return;} notxml = nType! = 1 |! JQuery. isXMLDoc (elem); if (notxml) {// Fix name and attach hooks name = jQuery. propFix [name] | name; hooks = jQuery. propHooks [name];} if (value! = Undefined) {if (hooks & "set" in hooks & (ret = hooks. set (elem, value, name ))! = Undefined) {return ret;} else {return (elem [name] = value ); // here is the read native property} else {if (hooks & "get" in hooks & (ret = hooks. get (elem, name ))! = Null) {return ret;} else {return elem [name] ;}} copy the code attr method example and enter document on the console. getElementsByTagName ('A') [10]. the getAttribute ('href ') console outputs "http://www.hao123.com" getAttribute is the query API of the Attr class. Others include deletion, modification, and addition. JQuery source code attr: function (elem, name, value, pass) {var ret, hooks, notxml, nType = elem. nodeType; // don't get/set attributes on text, comment and attribute nodes if (! Elem | nType = 3 | nType = 8 | nType = 2) {return;} if (pass & jQuery. isFunction (jQuery. fn [name]) {return jQuery (elem) [name] (value);} // Fallback to prop when attributes are not supported if (typeof elem. getAttribute = "undefined") {return jQuery. prop (elem, name, value);} notxml = nType! = 1 |! JQuery. isXMLDoc (elem); // All attributes are lowercase // Grab necessary hook if one is defined if (notxml) {name = name. toLowerCase (); hooks = jQuery. attrHooks [name] | (rboolean. test (name )? BoolHook: nodeHook);} if (value! = Undefined) {if (value = null) {jQuery. removeAttr (elem, name); return;} else if (hooks & "set" in hooks & notxml & (ret = hooks. set (elem, value, name ))! = Undefined) {return ret;} else {elem. setAttribute (name, value + ""); return value ;}} else if (hooks & "get" in hooks & notxml & (ret = hooks. get (elem, name ))! = Null) {return ret;} else {ret = elem. getAttribute (name); // read the attribute through the Attr API // Non-existent attributes return null, we normalize to undefined return ret = null? Undefined: ret ;}}