[Original] jquery source code analysis-11 Dom traversal-Traversing-3 core functions

Author: nuysoft/high cloud QQ: 47214707 Email: nuysoft@gmail.com
Disclaimer: This article is an original article. If you need to reprint it, please indicate the source and retain the original article link.

Jquery source code analysis series (Continuous updates)

 

1. Dom traversal has three core functions:

Jquery. dir (ELEM, Dir,)	Starting from an element, iteratively Retrieves all elements in a certain direction and records them until they match the document object or the elements that match the.
Jquery. Nth (cur, result, Dir, ELEM)	Start from an element and iteratively retrieve the nth element in a certain direction
Jquery. sibling (n, ELEM)	All subsequent sibling elements of element N, including N, excluding ELEM

 

The Dom Traversal method (mostly) on the jquery object is converted to the call of the three core functions, and the three core functions are finally converted to the operations on the native API, look at the relationship between them:

Core functions	Jquery object Method	Description	Native API used
Jquery. dir	Parents	Ancestor Element	Parentnode
	Parentsuntil	Ancestor element, but not including	Parentnode
	Nextall	All sibling Elements	Nextsibling
	Prevall	All elder brother Elements	Previussibling
	Nextuntil	All sibling elements, but not	Nextsibling
	Prevuntil	All elder brother elements, but not including	Previussibling
Jquery. nth	Next	Next sibling Element	Nextsibling
	Prev	Last elder brother Element	Previussibling
Jquery. sibling	Siblings	All sibling and sibling elements, excluding the current element	ELEM. parentnode. firstchild
	Children	All child nodes	ELEM. firstchild

 

2. jquery. dir (ELEM, Dir,)

/*** Start from an element, iteratively retrieve all elements in a certain direction and record them until the elements matching the document object or the until * iteration condition (simplified): cur. nodetype! = 9 &&! Jquery (cur ). is (until) * Start Element of ELEM * dir iteration direction. Optional value: parentnode nextsibling previussibling * Until selector expression. If an element matching until is encountered, iteration ends */DIR: function (ELEM, Dir, until) {// the essence of this function, just a few lines of code, supports traversing the ancestor, all brother, all brother! VaR matched = [], // match the result cur = ELEM [dir]; // For the first access, try to get the first access to the Dir and provide the first judgment for the loop (the variable cur is redundant, only ELEM can be used) // does not contain itself/*** iterative access, until a document object or an until Matching Element * cur is encountered. nodetype! = 9 the current Dom node cur is not a document object *! Jquery (cur). Is (until) The current Dom node cur does not match the expression until ** until ==== undefined | cur. nodetype! = 1 |! Jquery (cur). Is (until) * This Boolean expression is also a bit interesting. The implicit condition for executing the final jquery. Is:! = Undefined & cur. nodetype = 1 * Composite Boolean and ternary expressions can reduce the number of lines of code and slightly improve performance, but the code is obscure and difficult to read and maintain. * It may be one of the reasons why jquery is popular */while (cur & cur. nodetype! = 9 & (until = undefined | cur. nodetype! = 1 |! Jquery (cur ). is (until) {If (cur. nodetype = 1) {// if it is an element, put the matching result array matched. push (cur) ;}cur = cur [dir]; // set the next node on the Dir to the current node and continue to access} return matched ;}

 

3. jquery. Nth (cur, result, Dir, ELEM)

/*** Start from an element and iteratively retrieve the nth element in a certain direction * Number of the starting element of cur * result, 1 representing the current element, and 2 representing the next element, and so on (do not understand why it starts from 1 ?) * Dir iteration direction * ELEM excess */nth: function (cur, result, Dir, ELEM) {result = Result | 1; // number? Start from 1 by default? Well, here we start counting from 1, 1 indicates the current element, 2 indicates the next one, and so on VaR num = 0; // the initial value of the egg, initially 1: better understanding // The for loop below! // Dir first fetches a recycle bin in the direction of Dir, Nth first loops and then retrieves // dir does not contain itself, Nth contains itself for (; cur = cur [dir]) {// If (cur. nodetype = 1 & ++ num = Result) {// Add first and then set the value. If num is equal to 1, the current element break is checked ;}} // If result is 0 or 1, the current element is obtained. // If result is less than 0, undefinedreturn cur is returned ;}

 

4. jquery. Nth (cur, result, Dir, ELEM)

/*** All subsequent sibling elements of element N, including N, excluding the starting element of ELEM * n (included in the returned results) * ELEM exclusion element */sibling: function (n, ELEM) {var r = []; for (; n = n. nextsibling) {// first judge and then obtain. The result contains N // nodetype = 1, which can only be element. It filters other elements such as text, ATTR, and comment if (N. nodetype = 1 & n! = ELEM) {R. Push (n) ;}} return r ;}