This paper analyzes the AddClass () method of jquery source interpretation in detail. Share to everyone for your reference. The specific analysis is as follows:
To extend AddClass functionality to the JQuery prototype object, Jquery.fn is Jquery.prototype
JQuery.fn.extend ({
/*
You can see that this is a plug-in method called AddClass.
*/
Addclass:function (value) {
var classes, Elem, cur, Clazz, J, Finalvalue,
i = 0,
/*
This represents the jquery object that the selector chooses to add class to, and Len is the length of the jquery object array.
*/
Len = This.length,
The,&& operation does not necessarily return a Boolean value when one operand is not a Boolean, and at this point it follows the following rules:
1. If the first operand is not a Boolean type, the second operand is returned;
2. If the second operand is not a Boolean type, the object is returned only if the first operand evaluates to true;
3. Returns the second operand if none of the two operands is a Boolean type;
4. Return NULL if one operand is null;
5. Returns nan if one operand is nan;
6. If one operand is undefined, return undefined.
Case 1: If value is null, conforms to rule 4, returns NULL, that is, the proceed value is null;
Condition 2: If value is undefine, conform to rule 6, return undefined, that is, proceed value is undefined;
Case 3: If value is Nan and conforms to Rule 5, return Nan, that is, the proceed value is Nan;
Case 4: Returns False if value is a numeric type;
Case 5: Returns False if Value is a Boolean type;
Case 7: If value is a array,object,function type, conforms to rule 2, but typeof value = = ' String ' is false, return the object and return False.
Case 8: If value is a string type and conforms to rule 2, return value.
Therefore, this sentence can only determine whether value is a string type, and returns this string assignment to proceed. Any other type will eventually return False or a type that can be implicitly converted to false.
proceed = typeof Value = = "string" && value;
Since the above can only determine whether it is a string type, the following sentence is to determine whether value is a function type. Using the global function of jquery isfunction judgment, is $.isfunction ().
if (jquery.isfunction (value)) {
If value is a function type, enter here.
Returns the jquery object for chained invocation.
This is the jquery object you chose for your selector.
Return This.each (function (j) {
To begin the iteration, this is not a jquery object, it is the DOM object of the current iteration, so it is wrapped in jquery (this) to become a jquery object so that you can use the jquery method. J represents the index of each traversal. Pass a value function that has a return value to set the class name. Value This function calls the current DOM for its object each time, passing in the current DOM index value and class name, the value returned by the value function, and the AddClass () method is called again by jquery (this). AddClass (return value). If a string is returned, another branch of if is executed. If return is a function, it continues to invoke the returned function.
JQuery (This). AddClass (The Value.call (this, J, This.classname));
});
}
Before getting proceed is a string, here is the decision whether to be an empty string, and the Non-empty string is implicitly converted to true. An empty string is implicitly converted to False oh, then the IF statement block is no longer executed, the program jumps to the final return this, and the jquery object is executed.
if (proceed) {
Proceed a non-empty string to begin executing an IF statement block. Suppose value is "show Bd1".
Rnotwhite is a regular expression (/\s+/g) that means global matching of non-white-space characters one or more times.
(Value | | "" "Return to" show Bd1 ", very simple.
"Show Bd1". Match ((/\s+/g)) | | [] return [show], "BD1"],match do not know what role of students to quickly check it.
Classes = (Value | | ""). Match (rnotwhite) | | [];
Now classes is [' Show ', ' BD1 '] An array you want to add the class name to.
The following begins the traversal, adding classes for each DOM object.
for (; i < Len; i++) {
This is a jquery object, Elem is the current DOM object.
Elem = this[I];
/*
= = = operator has higher precedence than && operator, first determines whether the DOM node type is an element node.
The Rclass is a regular expression of/[\t\r\n\f]/g;
The three-mesh operator in parentheses indicates whether the current DOM node already has class and, if so, replaces the possible tab, newline, carriage return, and so on in class with a string with a space, and adds a space to the front and back of the current class. If the current DOM node does not have a class, it also gives a string with a space "". Finally become
Cur = Elem.nodetype = = 1 && "Show Bd1", this is very familiar, yes, according to the first 6 rules of the first evaluation.
Assuming that the Elem node type is 1, then cur = True && "", and finally cur = "show bd1".
If the Elem node type is not 1, then cur = False && "", and finally cur = false.
*/
Cur = Elem.nodetype = = 1 && (elem.classname?
("" + Elem.classname + ""). Replace (Rclass, ""): "");
Now cur = "show bd1" into the If statement block execution.
if (cur) {
j = 0;
/*
Classes is ["Show Bd1"]
The loop checks whether the class you want to add already exists in the class that is already in the current DOM element.
If not, this class is added.
*/
while ((Clazz = classes[j++])) {
if (Cur.indexof ("" + Clazz + "") < 0) {
Cur + + clazz + "";
}
}
/*
Finally, with $.trim () The class "Show Bd1" at both ends of the space characters removed.
Checks whether the class of the current DOM element repeats with the stitched class. Avoid unnecessary repetition of adding the same class's render.
*/
Finalvalue = Jquery.trim (cur);
if (elem.classname!== finalvalue) {
Elem.classname = Finalvalue;
}
}
}
}
Returns this jquery object for subsequent chained calls.
return this;
}
});
I hope this article will help you with your jquery programming.
