Home > Developer > JavaScript
Copy codeThe Code is as follows:
$ ("Ancestor descendant"): select the child element after the parent Element
$ ("Parent> child"): select the child element directly following the parent element. What is "directly", that is, the meaning of the first level?
$ ("Prev + next"): prev and next are two elements of the same level. Select the next element after the prev element.
$ ("Prev ~ Siblings "): select the elements filtered by siblings after prev. Note: siblings is a filter.
The last two are used less often and are generally replaced by other selectors.
Copy codeThe Code is as follows:
$ ("Prev + next") is equivalent to next ()
$ ("Prev ~ Siblings ") is equivalent to nextAll ()
Instance:
Copy codeThe Code is as follows:
<Style type = "text/css">
/* Highlight */
. Highlight {
Background-color: gray
}
</Style>
Copy codeThe Code is as follows:
<Body>
<Div>
<P id = "p1"> the P element in the first DIV. </P>
</Div>
<P id = "p2"> the first single P element. </P>
<Div>
<Span> the SPAN element in the DIV. </Span>
<P id = "p3"> the P element in the second DIV. </P>
<Span>
<P id = "p4"> the P element in the SPAN in the DIV. </P>
</Span>
</Div>
<Table>
<Tr>
<Th> A </th> <th> B </th> <th> C </th>
</Tr>
<Tr>
<Td> 1 </td> <td> 2 </td> <td> 3 </td>
</Tr>
</Table>
<P id = "p5"> the second single P element. </P>
<Span> Single SPAN element. </Span>
</Body>
Copy codeThe Code is as follows:
Var s = $ ("div p"). addClass ("highlight"); // select all p elements after the div and the result is: p1, p3, p4
Copy codeThe Code is as follows:
Var s = $ ("div> p"). addClass ("highlight"); // After the div is selected, all the first-level p elements are p1 and p3. P4 is not selected because p4 is not a directly-affiliated element of div.
Copy codeThe Code is as follows:
Var s = $ ("div + p"). addClass ("highlight"); // select the p element next to the div and the result is p2. P5 is not selected because p5 is not close to div
Copy codeThe Code is as follows:
Var s = $ ("div ~ P "). addClass (" highlight "); // select all the adjacent p elements after the div and the result is p2, p5
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
