Removeattr () method Analysis of jquery source code interpretation _jquery

Source: Internet
Author: User
Tags extend

This paper analyzes the Removeattr () method of jquery source interpretation in detail. Share to everyone for your reference. The specific analysis is as follows:

Ways to extend the jquery prototype object:

Copy Code code as follows:
JQuery.fn.extend ({
Name, passing in the name of the property to be removed for the DOM element.
Removeattr:function (name) {

Use the Jquery.fn object, the each method of the jquery prototype object, to traverse the array of jquery objects selected by the current selector and return the jquery object for chained invocation.
Return This.each (function () {
Call jquery's Global method removeattr, incoming traversal of the DOM object this and the name of the property to be removed.
Jquery.removeattr (this, name);
});
}
});

The global approach to jquery removeattr

Copy Code code as follows:
Global approach to extending jquery objects
Jquery.extend ({

Elem for each DOM object that is traversed, value is the name of the property to be removed.
Removeattr:function (Elem, value) {
var name, propname,
i = 0,
Rnotwhite for (/\s+/g)
If value is "", the value of logic and expression is null
If value is assumed to be "title href", the second operand is returned because the two operands of the logical AND operator are not Boolean, at which point Attrnames is ["title", "href"].
Match is a JavaScript string method that retrieves the specified value within a string, or finds a match for one or more regular expressions, and returns an array that holds the matching result. Other types will complain.
Attrnames = value && value.match (rnotwhite);
If attrnames is not NULL, and the current DOM object has a node type of 1, enters the IF statement block, otherwise jumps out of the function, ends this traversal, and begins the next traversal.
if (attrnames && elem.nodetype = 1) {
At this point attrnames is an array with the name of the property to be removed, that is, ["title", "href"]
Performs a while loop, which means that you first assign an element to name from the Attrnames, I increment 1, and then determine if name has a value, have a value, go to loop execution, start the next loop after execution, until name has no value, and jump out of the loop.
while ((name = attrnames[i++])) {
If the attribute name is the same as "for" and "class" with the same name as the JS keyword, replace with "htmlfor" and "ClassName".
propname = jquery.propfix[Name] | | Name

If the Boolean attribute is treated in particular
if (jQuery.expr.match.bool.test (name)) {
Getsetinput detects whether the INPUT element supports getattribute ("value")
Getsetattribute detect whether to support the setting of the name of the hump named Format property
!rusedefault.test (name) is case-insensitive to detect whether name is a checked or selected attribute.
if (getsetinput && Getsetattribute | | |!rusedefault.test (name)) {
Removing a Boolean property is actually assigning a Boolean value to False
elem[propname] = false;
} else {
Support IE9 below
Convert the attribute "default-checked" to "defaultchecked" and assign False
elem[jquery.camelcase ("default-" + name)] =
elem[propname] = false;
}
} else {
If it is not a Boolean property, call jquery's global attr method to set the property
Jquery.attr (Elem, Name, "");
}
Getsetattribute is used to test whether setattribute supports setting the name of a hump-named property, and if so, use the modified property name when using SetAttribute and getattribute. (Compatible IE6/7)
If Getsetattibute equals false, the description is not supported, the modified property name is used, supported, and the original property name is used.
Call Dom native RemoveAttribute method, remove attribute
Elem.removeattribute (Getsetattribute name:propname);
}
}
}
});


Keyword attribute correction
Copy Code code 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 = "<link/><table></table><a href= '/a ' >a</a><input type= ' checkbox '/ > ";
A = Div.getelementsbytagname ("a") [0];
The tests of the batch.
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";

Detect if input supports getattribute ("value")

Copy Code code as follows:
SUPPORT:IE8 only
Check If we can trust GetAttribute ("value")
input = document.createelement ("input");
Input.setattribute ("Value", "");
Support.input = Input.getattribute ("value") = = "";

To detect whether a Boolean property

Copy Code code as follows:
Booleans = "checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open| Readonly|required|scoped ",

matchexpr = {
"BOOL": New RegExp ("^ (?:" + Booleans + ") $", "I")
},

I hope this article will help you with your jquery programming.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.