The traversal of jquery learning

1. Ancestors: Walking up the DOM tree

**parent (): Returns the immediate parent element of the selected element, which traverses the DOM tree only one level up

$ (document). Ready (function () {

$ ("span"). parent ();

});

**parents (): Returns all ancestor elements of the selected element, all the way up to the root element of the document (

$ (document). Ready (function () {

$ ("span"). Parents ();

});

**parents (): This method can also use optional parameters to filter the search for ancestor elements

$ (document). Ready (function () {

$ ("span"). Parents ("ul");

});

**parentsuntil (): Returns all ancestor elements between two and a given element

$ (document). Ready (function () {

$ ("span"). Parentsuntil ("div");

});

2. Descendants: Traverse the DOM tree down

**children (): Returns all child elements of the selected element, which traverses the DOM tree only one level down

$ (document). Ready (function () {

$ ("div"). Children ();

});

**children (): You can also use optional parameters to filter the search for child elements

$ (document). Ready (function () {

$ ("div"). Children ("p.1");

});

**find (): Returns the descendant elements of the selected element, all the way down to the last descendant

$ (document). Ready (function () {

$ ("div"). Find ("*"); Return all descendants of <div>

$ ("div"). Find ("span"); Returns all <span> elements that belong to <div> descendants

});

3. Sibling: Horizontal traversal in DOM tree

**siblings () Method: Returns all sibling elements of the selected element

$ (document). Ready (function () {

$ ("H2"). siblings (); Return

$ ("H2"). Siblings ("P"); Returns all <p> elements of a sibling element belonging to

});

**next () Method: Returns the next sibling element of the selected element

$ (document). Ready (function () {

$ ("H2"). Next ();

});

**nextall () Method: Returns all the following sibling elements of the selected element

$ (document). Ready (function () {

$ ("H2"). Nextall ();

});

**nextuntil () Method: Returns all the following sibling elements between two given arguments

$ (document). Ready (function () {

$ ("H2"). Nextuntil ("H6"); Returns all the following sibling elements between two parameters

});

The **prev (), Prevall (), and Prevuntil () methods work in the same way as above, except in the opposite direction, which returns the previous sibling element

4. Filter: The scope of the abbreviated search element;

**first (): Returns the first element of the selected element

$ (document). Ready (function{

$ ("div p"). Last (); Select the last <p> element in the last <div> element

});

**eq (): Returns the element with the specified index number in the selected element, starting with index number 0 instead of 1.

$ (document). Ready (function () {

$ ("P"). EQ (1);

});

**filter (): Allows you to set a standard; elements that do not match this standard are removed from the collection, and the matching elements are returned

$ (document). Ready (function () {

$ ("P"). Filter (". url"); Returns all <p> elements with the class name "url"

});

**not (): Returns all elements that do not match the criteria, as opposed to the filter () method

$ (document). Ready (function () {

$ ("P"). Not (". url");

});

The traversal of jquery learning