jquery traversal DOM element and node method detailed _jquery

This example describes the jquery traversal DOM element and node method. Share to everyone for your reference, specific as follows:

One, up traversal--ancestor element

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

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

Note: The difference between parent and parents, parent returns a direct parent node, parents returns all ancestor nodes, and $ ("HTML"). Parent () Returns the document node, and $ ("html"). Parents () returns NULL.

③$ (selector). Parentuntil ([Ancestorselector][,filter]): Returns all ancestor nodes between the matching node and the ancestorselector. Note that excluding ancestorselector matching points, the method can accept a filter selector to filter the returned ancestor nodes, Returns all ancestor nodes equal to the parents () method if the Ancestorselector is empty or if no matching ancestorselector element is found in its ancestor node.

$ (selector). Parentutil (Element[,ancestorselector]): usage and meaning ibid.

④$ (selector). offsetparent (): Returns the ancestor element closest to a matching element, which is defined as the CSS position property set to Relative,absolute,fixed. It is very important to calculate the offset and position of the elements in the animation demonstration process.

⑤$ (selector). Closest (Ancestorselector[,context]): Gets the closest ancestor element of a matching ancestorselector, which can accept a parameter context to control the scope of the search. The same parents method has the following differences:

A.closest never starts searching the current element itself
Parents begins with the parent node element.

B.closest up through the DOM tree until you find an element position that matches the Ancestorselector
Parents traverses the DOM tree up until the root element of the document, adding each ancestor element to a temporary collection, and if the selector is applied, the collection is filtered based on the selector

C.closest returns a jquery object that contains 0 or one element
Parents returns a JQuery object that contains 0, one, or more elements

Other deformation uses:

$ (selector). Closest (Ancestorselectors[,context]);
$ (selector). Closest (JQuery object);
$ (selector). Closest (Element)

Two, downward traversal--descendants element

①.children ([Childrenselector]): Returns the immediate child element of an element, and the method can accept a parameter to filter the returned child elements.

②.find (Descendantselector): Returns all descendant elements of the matching decendantselector of the element, always down to know the last descendant.

Other deformation uses:

. Find (JQuery object);
. Find (Element);

③.contents (): Returns all child elements of an element, the same children as the contents contains the text node and the comment node.

Third, sibling traversal--sibling elements

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

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

③.nextall ([selector]): Returns all sibling elements following the current element, which can accept an optional parameter to filter the returned sibling elements.

④.nextuntil ([Selector][,filter]): Returns all sibling elements of the current element until the sibling element that matches the selector condition is encountered, the method can accept an optional parameter filter to filter the returned sibling elements.

⑤.prev/prevall/prevuntil and Next/nextall/nextuntil Use the same, the role is similar, but search in the opposite direction.

IV. Filtration

①.filter (selector): A subset of filters in the current matching set of elements that match selector conditions, used to reduce the range of matches.

. filter (function (index)): Filters the collection of currently matched elements based on the callback function, and the callback function passes in the parameter index, which is the index of the element in the collection, which can be used in the function body to represent the element, the function returns True/false, and if true, The child element is persisted, otherwise the child element is excluded.

Other deformation uses:

. Filter (Element|jqueryobject)

②.first (): Returns the first element in the collection of current matching elements.

③.last (): Returns the last element in the collection of current matching elements.

④.eq (Index/-index): Returns the element at the specified position of the current matching element collection, with the index starting at 0 and the negative number being sorted from the end of the head.

⑤.has (selector/element): Returns a collection of elements with a specific child element from the current element collection, excluding elements that do not have corresponding child elements. Child elements can be matched with parameter selector or element objects.

⑥.is (selector|function (Index) |element|jqueryobject): Verifies the collection of elements based on a selector or callback function or element or jquery object. Returns True if it contains at least one element that conforms to the given expression, or false, or false if the current element collection is empty or the expression is empty. This method is commonly used in callback functions, such as event-handling handler, to determine if this is a particular element

⑦.map (Callback (index,domelement)): Converts the currently matched array of elements from the return value of the callback function to another array of objects (whether or not it is a DOM element). If you want to convert a normal jqueryobject array, you can use the Jquery.map (Array,callback (Objectofarray,indexofarray)) method to implement it.

⑧.not (selector|elements|function (Index) |jquery object): Removes the parameter-adjusted element from the currently matched array of elements, which can be selector, DOM element, A common jquery object and a callback function that returns a Boolean variable.

⑨.slice (Start[,end]): Gets a subset of the specified range from the currently matching set of elements, and the start and end, if negative, gets the element direction from the tail head.

More interested readers of jquery-related content can view this site: "jquery traversal algorithm and tips summary", "jquery table (table) Operation Tips Summary", "jquery drag-and-drop effects and tips summary", "JQuery Extended Skills Summary", " jquery Common Classic Effects Summary "jquery animation and special effects usage Summary", "jquery selector usage Summary" and "jquery common Plug-ins and Usage summary"

I hope this article will help you with the jquery program design.