JQuery traversal of DOM elements and node methods, jquerydom

JQuery traversal of DOM elements and node methods, jquerydom

This document describes how jQuery traverses DOM elements and nodes. We will share this with you for your reference. The details are as follows:

1. Traverse up-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 the ancestor nodes of the matching element until the document root element html. The method can accept a filter selector to filter the returned ancestor nodes.

Note: What is the difference between parent and parents? parent returns the parent node directly, parents returns all ancestor nodes, and $ ("html "). parent () returns the document node, while $ ("html "). parents () returns NULL.

③ $ (Selector ). parentUntil ([ancestorSelector] [, filter]): returns all the ancestor nodes between the matching node and ancestorSelector. Note that the ancestorSelector does not match any time, the method can accept a filter selector to filter returned ancestor nodes. If ancestorSelector is empty or no matching ancestorSelector element 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 located ancestor element of the matching element. The so-called positioning ancestor element refers to the setting of its CSS position attribute to relative, absolute, fixed, it is mainly used to calculate the element offset and position during the animation demonstration process.

⑤ $ (Selector). closest (ancestorSelector [, context]): gets the most recent ancestor element that matches ancestorSelector. The method can take the context parameter to control the search range. The parents method has the following differences:

A. closest starts searching up from the current element.
Parents starts with the parent node element.

B. closest traverses up the DOM tree until it finds a position matching ancestorSelector.
Parents traverse up the DOM tree until the root element of the document adds Each ancestor element to a temporary set. If a selector is applied, the set is filtered Based on the selector.

C. closest returns the jQuery object containing 0 or one element.
Parents returns the jQuery object that contains 0, one, or more elements.

Other deformation usage:

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

Ii. Traverse down-child element

①. Children ([childrenSelector]): return the direct child element of the element. The method can take a parameter to filter the returned child element.

②. Find (descendantSelector): returns all descendant elements that match the decendantSelector element, and keeps knowing the last descendant.

Other deformation usage:

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

③. Contents (): returns all child elements of an element. The difference between contents and children is that contents contains text nodes and comment nodes.

3. Same-level traversal-sibling Element

①. 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 take an optional parameter to filter the returned sibling element.

③. 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 the sibling elements of the current element until a sibling element matching the selector condition is met. The method can use an optional parameter filter to filter the returned sibling elements.

⑤. The usage of prev/prevAll/prevUntil is the same as that of next/nextAll/nextUntil, but the search direction is the opposite.

Iv. Filtering

①. Filter (selector): filters child sets that meet the selector condition from the currently matched element set, and uses them to reduce the matching range.

. Filter (function (index): filters the currently matched element sets based on the callback function. The index parameter passed in by the callback function is the index of the element in the set, this can be used in the function body to represent the element. The function returns true/false. If true is returned, the child element is retained. Otherwise, the child element is excluded.

Other deformation usage:

.filter(element|jQueryObject)

②. First (): returns the first element in the currently matched element set.

③. Last (): returns the last element in the currently matched element set.

④. Eq (index/-index): return the elements at the specified position in the current Matching Element Set. The index starts from 0 and the negative number indicates the order from the end to the header.

⑤. Has (selector/element): returns a set of elements with special sub-elements from the current element set to exclude elements without corresponding sub-elements. Child elements can be matched using the selector parameter or element object.

6. is (selector | function (index) | element | jQueryObject): checks the element Set Based on a selector, callback function, element, or jQuery object, if at least one element matches the given expression, true is returned. Otherwise, false is returned. If the current element set is empty or the expression is empty, false is returned. This method is generally used in callback functions such as event processing handler to determine whether this is a specific element.

7. map (callback (index, domElement): converts the currently matched element array to another object array (whether it is a dom element or not) through the callback function return value ), if you want to convert a common jQueryObject array, you can use jQuery. map (array, callback (objectOfArray, indexOfArray) method.

Invalid. not (selector | elements | function (index) | jQuery object): deletes the elements that meet the parameter adjustment from the array of currently matched elements, parameters can be selector, DOM element, common jQuery objects, and a callback function that returns Boolean variables.

Begin. slice (start [, end]): obtains a subset of the specified range from the currently matched element set. If the start and end values are negative, the element direction is obtained from the end to the header.