Detailed explanation of jQuery traversal of DOM elements and nodes methods_jquery

The example in this article describes the jQuery method of traversing DOM elements and nodes. Share it with everyone for your reference, the details are as follows:

1. Traverse upward - ancestor elements

① $(selector).parent([filter]): Returns the direct parent element of the selector matching element. The method can accept a filter selector to filter the returned parent element.

② $(selector).parents([filter]): Returns all ancestor nodes of the matching element, all the way up to the document root element html. The method can accept a filter selector to filter the returned ancestor nodes.

Remarks: The difference between parent and parents is that parent returns the direct parent node, parents returns all ancestor nodes, and $("html").parent() returns the document node, while $("html").parents() Returns empty.

③ $(selector).parentUntil([ancestorSelector][,filter]): Returns all ancestor nodes between the matching node and ancestorSelector. Note that the matching points of ancestorSelector are not included. The method can accept a filter selector to filter the return Ancestor node, if ancestorSelector is empty or no element matching ancestorSelector is found in its ancestor node, all ancestor nodes are returned, which is equivalent to the parents() method.

$(selector).parentUtil(element[,ancestorSelector]): The usage and meaning are the same as above.

④ $(selector).offsetParent(): Returns the most recent positioned ancestor element of the matching element. The so-called positioned ancestor element means that its CSS position attribute is set to relative, absolute, fixed, which is mainly calculated during the animation demonstration process. The offset and position of elements play a big role.

⑤ $(selector).closest(ancestorSelector[,context]): Get the nearest ancestor element that matches ancestorSelector. The method can accept a parameter context to control the scope of the search. The differences from the parents method are as follows:

a.closest searches upward starting from the current element itself
parents starts from the parent node element.

b.closest traverses up the DOM tree until it finds an element position that matches the ancestorSelector
parents traverses up the DOM tree until the root element of the document, adding each ancestor element to a temporary collection; if a selector is applied, this collection is filtered based on the selector

c.closest returns a jQuery object containing 0 or one element
parents returns a jQuery object containing 0, one or more elements

Other transformation usage:

$(selector).closest(ancestorSelectors[,context]);
$(selector).closest(jQuery object);
$(selector).closest(element)

2. Downward traversal - descendant elements

① .children([childrenSelector]): Returns the direct child elements of the element. The method can accept a parameter to filter the returned child elements.

② .find(descendantSelector): Returns all descendant elements of the element that match descendantSelector, all the way down to the last descendant.

Other transformation usage:

.find(jQuery object);
.find(element);

③ .contents(): Returns all child elements of the element. The difference from children is that contents includes text nodes and comment nodes.

3. Sibling traversal - brother elements

① .siblings([selector]): Returns all sibling elements of the current element. The method can receive an optional parameter to filter the returned sibling elements.

② .next([selector]): Returns the next sibling element of the current element. The method can accept an optional parameter to filter the returned sibling elements.

③ .nextAll([selector]): Returns all sibling elements after the current element. The method can accept an optional parameter to filter the returned sibling elements.

④ .nextUntil([selector][,filter]): Returns all sibling elements of the current element until a sibling element matching the selector condition is encountered. The method can accept an optional parameter filter to filter the returned sibling elements.

⑤ .prev/prevAll/prevUntil has the same usage and similar functions as next/nextAll/nextUntil, but the search direction is opposite.

4. Filtering

① .filter(selector): Filter the sub-set that meets the selector conditions from the current matching element set to reduce the matching scope.

.filter(function(index)): Filter the currently matched set of elements according to the callback function. The parameter index passed in to the callback function refers to the index of the element in the set. This can be used to represent the element in the function body, and the function returns true /false, if true is returned, the child elements are retained, otherwise the child elements are excluded.

Other transformation usage:

.filter(element|jQueryObject)

② .first(): Returns the first element in the current matching element set.

③ .last(): Returns the last element in the current matching element set.

④ .eq(index/-index): Returns the element at the specified position in the current matching element set. The index starts from 0, and a negative number means sorting from the end to the beginning.

⑤ .has(selector/element): Returns an element set with specific sub-elements from the current element set, excluding elements that do not have corresponding sub-elements. Child elements can be matched using the parameter selector or element object.

⑥ .is(selector|function(index)|element|jQueryObject): Check the element collection based on a selector or callback function or element or jQuery object, and return if it contains at least one element that matches the given expression true, otherwise false is returned. In addition, if the current element collection is empty or the expression is empty, false is returned. This method is generally used in callback functions such as event handlers to determine whether this is a specific element

⑦ .map(callback(index,domElement)): Convert the currently matched element array into another object array (whether it is a dom element or not) through the callback function return value. If you want to convert an ordinary jQueryObject array, you can use jQuery. map(array,callback(objectOfArray,indexOfArray)) method to achieve.

⑧ .not(selector|elements|function(index)|jQuery object): Delete elements that meet parameter adjustment from the currently matching element array. The parameters can be selector, DOM element, ordinary jQuery object and a return Boolean The callback function of the variable.

⑨ .slice(start[,end]): Get a subset of the specified range from the currently matched element set. If start and end are negative numbers, get the element direction from the end to the beginning.

Readers who are interested in more jQuery-related content can check out the special topics on this site: "JQuery traversal algorithm and skills summary", "jQuery table (table) operation skills summary" , "Summary of jQuery drag effects and techniques", "Summary of jQuery extension techniques", "Summary of jQuery common classic special effects", "jQuery animation and special effects usage summary", "jquery selector usage summary" and "jQuery common plug-ins and usage summary"

I hope this article will be helpful to everyone in jQuery programming.