Analysis of addClass () method for interpreting jQuery source code _ jquery

This article mainly introduces the addClass () method of jQuery source code interpretation. The annotation form gives a detailed analysis of the implementation skills and precautions of the addClass () method, which has some reference value, for more information about jQuery source code, see addClass. Share it with you for your reference. The specific analysis is as follows:

Extend the addClass function for the jQuery prototype object. jQuery. fn is jQuery. prototype.

The Code is as follows:

JQuery. fn. extend ({
/*
It can be seen that this is a plug-in method called addClass function.
*/
AddClass: function (value ){
Var classes, elem, cur, clazz, j, finalValue,
I = 0,
/*
This indicates the jQuery object selected by the selector to be added to the class. len is the length of the jQuery object array.
*/
Len = this. length,
// If an operand is not a Boolean value, the & operation does not necessarily return a Boolean value. In this case, it follows the following rules:
// 1. If the first operand is not a Boolean value, the second operand is returned;
// 2. If the second operand is not of the boolean type, the object will be returned only when the evaluate result of the first operand is true;
// 3. If both operands are not Boolean, the second operand is returned;
// 4. If one of the operands is null, null is returned;
// 5. If one of the operands is NaN, NaN is returned;
// 6. If one of the operands is undefined, undefined is returned.
// Case 1: If the value is null and complies with rule 4, null is returned, that is, the value of proceed is null;
// Case 2: If the value is undefine and complies with rule 6, undefined is returned, that is, the value of proceed is undefined;
// Case 3: If the value is NaN and meets rule 5, NaN is returned, that is, the value of proceed is NaN;
// Case 4: If the value type is numeric, false is returned;
// Case 5: If the value type is Boolean, false is returned;
// Case 7: If the value is of the Array, Object, and Function type and complies with rule 2, but typeof value = 'string' is false, this Object is returned and false is returned.
// Case 8: If value is of the string type and complies with rule 2, return value.
// Therefore, this sentence can only judge whether the value is of the string type and return this string to proceed. All other types return false at the end, or can be implicitly converted to false.
Proceed = typeof value = "string" & value;
// Since the preceding statement can only be used to determine whether the value is of the Function type, the following statement determines whether the value is of the string type. When jQuery's global function isFunction is used, it is $. isFunction ().
If (jQuery. isFunction (value )){
// If the value type is Function, enter here.
// Return the jQuery object for chained calling.
// Here this is the jQuery object selected by your selector.
Return this. each (function (j ){
// Start iteration. Here this Is Not A jQuery object. It is the DOM object of the current iteration. So we wrapped it with jQuery (this) to become a jQuery object, in this way, you can use the jQuery method. J indicates the index that is traversed each time. Pass a value function that is used to set the class name. The value function calls the current DOM for its execution object each time, and passes in the current DOM index value and class name. The value returned by the value function is determined by jQuery (this ). the addClass (Return Value) method is called again. If a string is returned, execute another if branch. If the returned function is still a function, continue to call the returned function.
JQuery (this). addClass (value. call (this, j, this. className ));
});
}
// The previously obtained proceed is a string. Here, we can determine whether it is a Null String. A non-null string is implicitly converted to true. If the empty string is implicitly converted to false, the if statement block is no longer executed. The program jumps to the final return this, And the jQuery object is returned and executed.
If (proceed ){
// The proceed non-empty string starts to execute the if statement block. Assume that the value is "show bd1 ".
// Rnotwhite is a regular expression (/\ S +/g), which indicates that non-blank characters are globally matched once or more times.
// (Value | "") returns "show bd1", which is very simple.
// "Show bd1 ". match (/\ S +/g) | [] returns ["show", "bd1"]. If you do not know the effect of match, go and check it.
Classes = (value | ""). match (rnotwhite) | [];
// Now classes is ['show', 'bd1 '] an array of class names to be added.
// Start traversing and add classes for each DOM object.
For (; I <len; I ++ ){
// This Is A jQuery object, and elem is the current DOM object.
Elem = this [I];
/*
=== The operator has a higher priority than the & operator. First, determine whether the DOM node type is an element node.
Rclass is a regular expression/[\ t \ r \ n \ f]/g;
The three-object operator in parentheses indicates whether the current DOM node already has a class. If yes, it indicates the possible tabs and line breaks in the class, replace carriage returns with a space character string "", and add 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 "". Last changed
Cur = elem. nodeType = 1 & "show bd1". This is very familiar. That's right. Evaluate the value based on the first six rules.
Assume that the node type of elem is 1, then cur = true & "", and finally cur = "show bd1 ".
If the node type of elem is not 1, then cur = false & "", and finally cur = false.
*/
Cur = elem. nodeType === 1 & (elem. className?
("" + Elem. className + ""). replace (rclass ,""):"");
// Now cur = "show bd1", go to the if statement block for execution.
If (cur ){
J = 0;
/*
Classes is ["show bd1"]
Cyclically check whether the class to be added already exists in the class with the current DOM element.
If not, add this class.
*/
While (clazz = classes [j ++]) {
If (cur. indexOf ("" + clazz + "") <0 ){
Cur + = clazz + "";
}
}
/*
Finally, use $. trim () to remove the space characters at both ends of the class "show bd1.
Check whether the current DOM element class is repeated with the spliced class. Avoid unnecessary repeated rendering of the same class.
*/
FinalValue = jQuery. trim (cur );
If (elem. className! = FinalValue ){
Elem. className = finalValue;
}
}
}
}
// Return this jQuery object for future chained calls.

Return this;
}
});

I hope this article will help you with jQuery programming.