How the jquery selector gets the parent element, sibling element, child element

First, the new page

1  <ul>2         <Li>List Item 1</Li>3         <Li>List Item 2</Li>4         <Liclass= "Third-item">List Item 3</Li>5         <Li>List Item 4</Li>6         <Li>List Item 5</Li>7     </ul>8 9     <P>Hello1</P>Ten     <P>Hello2</P> One     <Div> A         <span>Word</span> -     </Div> -  the     <ulclass= "Level-1"> -         <Liclass= "Item-i">I</Li> -         <Liclass= "Item-ii"> - II +             <ulclass= "Level-2"> -                 <Liclass= "Item-a">A</Li> +                 <Liclass= "Item-b"> A B at                     <ulclass= "Level-3"> -                         <binclass= "Item-1">1</Li> -                         <Liclass= "Item-2">2</Li> -                         <Liclass= "Item-3">3</Li> -                     </ul> -                 </Li> in                 <Liclass= "Item-c">C</Li> -             </ul> to         </Li> +         <binclass= "ITEM-III">Iii</Li> -     </ul>

Second, get the parent element

　1. Parent ([expr]):

Gets all the parent elements of the specified element

The code is as follows:

$ ("Li.third-item"). Parent (). CSS (' Background-color ', ' Aqua ');

The effect is as follows:

2, parents ()

Gets the ancestor element of each element in the current matching element collection, which is optional by applying a selector.

1. 1. $ (' li.item-a '). Parents (). CSS (' background-color ', ' red ');

The result of the call is that elements such as Level-2 list, item II, and Level-1 list (along the DOM tree all the way up to

3. Closest (selector)
The closest () method obtains the first ancestor element of a matching selector, starting at the current element along the DOM tree.

Third, get sibling elements

1. Next (selector)
Gets the next sibling element immediately adjacent to the matching element.

2. Nextall (selector)
Gets all the sibling elements that follow the matching element.

3. Prev (selector)
Get the previous sibling element adjacent to the matching element (opposite to next)

4. Prevall (selector)
Get all sibling elements preceding the current matching element (opposite Nextall)

　5, Andself ():
Gets all the sibling elements that are behind the specified element, followed by the specified element.

Iv. getting child elements

1. Children (selector)
Returns the child elements of the matching element.

2. Find (selector)
Gets the descendants of the current element

　3, find child element:>

　　　　For example ul under all LI elements var nods = $ ("ul > li");

Use the following:

<script type= "Text/javascript" > $ (document). Ready (function () {//Gets all the parent elements of the specified element//$ ("Li            . Third-item "). Parent (). CSS (' Background-color ', ' Aqua '); Gets the previous sibling element of the specified element,//$ ("Li.third-item"). Prev (). CSS (' background-color ', ' red ');//list item 2 red//Get specified All of the sibling elements in front of the element//$ ("Li.third-item"). Prevall (). CSS (' background-color ', ' red ');//list item 3 previously changed to red// Gets the next sibling element of the specified element//$ ("Li.third-item"). Next (). CSS (' background-color ', ' red ');//list Item 4 red//Get specified meta All sibling elements behind the//$ ("Li.third-item"). Nextall (). CSS (' background-color ', ' red ');//list item 4 turns red//fetch refers to All child elements behind the//$ (' Ul.level-2 '). Children (). CSS (' border ', ' 1px solid green '),//level-2 under Class Item-a,item-b and Item-c Add a color green border, not including item-b under class level-3 element//Get all specified child elements behind the specified element $ (' Ul.level-2 '). Find (' Li '). CSS (' border ' , ' 1px solid green '); Li under//level-2 with a color green border//get all sibling elements behind the specified element,After adding the specified element var P_nex = $ ("P"). Nextall (). Andself ();             P_nex.addclass (' p-css ');//Select all the sibling tags that follow the p tag and your own class plus P-CSS//Sub-element var nods = $ ("Ul.level-1 > li");    alert (nods.length);//3}); </script>

　　

How the jquery selector gets the parent element, sibling element, child element