Analysis of removeAttr() method of jQuery source code interpretation_jquery

This article analyzes the removeAttr() method of jQuery source code interpretation in more detail. Share it with everyone for your reference. The specific analysis is as follows:

Methods that extend the jQuery prototype object:

Copy code The code is as follows:

jQuery.fn.extend({
//name, pass in the attribute name of the DOM element to be removed.
​ removeAttr: function( name ) {

//Use the jQuery.fn object, that is, the each method of the jQuery prototype object to traverse the jQuery object array selected by the current selector, and return the jQuery object for chain calling.
          return this.each(function() {
//Call jQuery's global method removeAttr, passing in the traversed DOM object this and the name of the attribute to be removed.
jQuery.removeAttr( this, name );
        });
}
});

jQuery’s global method removeAttr

Copy code The code is as follows:

//Extend the global method of jQuery object
jQuery.extend({

//elem is each DOM object traversed, and value is the attribute name to be removed.
​ removeAttr: function(elem, value) {
        var name, propName,
            i = 0,
//rnotwhite is (/S /g)
//If value is " ", the value of the logical AND expression is null
//If value is assumed to be "title href", since neither operand of the logical AND operator is a Boolean value, the second operand will be returned. At this time, attrNames is ["title", "href"].
//match is a JavaScript string method that retrieves a specified value within a string, or finds a match for one or more regular expressions, and returns an array storing the matching results. Other types will report errors.
               attrNames = value && value.match( rnotwhite );
//If attrNames is not null, and the node type of the current DOM object is 1, enter the if statement block, otherwise jump out of the function, end this traversal, and start the next traversal.
If ( attrNames && elem.nodeType === 1 ) {
//At this time attrNames is an array containing the attribute names to be removed, that is, ["title", "href"]
//Execute the while loop. This way of writing means, first take out an element from attrNames and assign it to name, i will increase by 1, and then determine whether name has a value. If there is a value, enter the loop execution. After the execution is completed, the next loop will start. Until name has no value, break out of the loop.
               while ( (name = attrNames[i ]) ) {
//If the attribute name has the same name as the js keyword such as "for" and "class", replace it with "htmlFor" and "className".
                     propName = jQuery.propFix[ name ] || name;

//If it is a Boolean attribute, special treatment
If ( jQuery.expr.match.bool.test( name ) ) {
//getSetInput detects whether the Input element supports getAttribute("value")
//getSetAttribute detects whether setting the attribute name in camel case naming format is supported
//!ruseDefault.test( name ) is case-insensitive and detects whether name is a checked or selected attribute,
If ( getSetInput && getSetAttribute || !ruseDefault.test( name ) ) {
//Removing the Boolean attribute is actually assigning the value to false
to the Boolean attribute                                                                                                                                                                               to                       } else {
//Support ie9 and below
//Convert the attribute "default-checked" to "defaultChecked" and assign the value false
                                  elem[ jQuery.camelCase( "default-" name ) ] =
                                                                                                                                                                                                                       }
                     } else {
//If it is not a Boolean attribute, call jQuery's global attr method to set the attribute
jQuery.attr(elem, name, "");
                }
//getSetAttribute is used to test whether setAttribute supports setting attribute names in camel case naming format. If so, you need to use the corrected attribute name when using setAttribute and getAttribute. (Compatible with ie6/7)
//If getSetAttibute is equal to false, it means that it is not supported, and the modified attribute name is used. If it is supported, the original attribute name is used.
//Call the DOM native removeAttribute method to remove the attribute
                    elem.removeAttribute( getSetAttribute ? name : propName );
            }
}
}
});

Keyword attribute correction

Copy code The code is as follows:

jQuery.extend({
    propFix: {
        "for": "htmlFor",
        "class": "className"
    }
});
jQuery.extend({
    camelCase: function( string ) {
        return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
    }
});
var nodeHook, boolHook,
    attrHandle = jQuery.expr.attrHandle,
    ruseDefault = /^(?:checked|selected)$/i,
    getSetAttribute = support.getSetAttribute,
    getSetInput = support.input;
// Setup
div = document.createElement( "div" );
div.setAttribute( "className", "t" );
div.innerHTML = "  a";
a = div.getElementsByTagName("a")[ 0 ];
// First batch of tests.
select = document.createElement("select");
opt = select.appendChild( document.createElement("option") );
input = div.getElementsByTagName("input")[ 0 ];
a.style.cssText = "top:1px";
// Test setAttribute on camelCase class. If it works, we need attrFixes when doing get/setAttribute (ie6/7)
support.getSetAttribute = div.className !== "t";

检测input是否支持getAttribute("value")

复制代码 代码如下:

// Support: IE8 only
// Check if we can trust getAttribute("value")
input = document.createElement( "input" );
input.setAttribute( "value", "" );
support.input = input.getAttribute( "value" ) === "";

检测是否布尔值属性

复制代码 代码如下:

booleans = "checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",

matchExpr = {
    "bool": new RegExp( "^(?:" booleans ")$", "i" )
},

希望本文所述对大家的jQuery程序设计有所帮助。