Differences between multi-condition selector, relative selector, and hierarchical selector in jquery

I. Jquery's common filter selectors are as follows:

1. first: select the first element. For example, $ ("div: first") selects the first div element.

2. last: select the last element. For example, $ ("div: last") selects the last div element.

3. not (selector): selects elements that do not meet the "selector" condition, for example, $ ("div: not (. className)"), and selects all div elements whose style is not className

4. even/: odd: select the element whose index is an even number or an odd number, for example, $ ("div: even"), and select all div elements whose index number is an even number.

5.: eq (index serial number)/: gt (index serial number)/: lt (index serial number), and select an element equal to or greater than the index number/less than the index number, for example, $ ("div: lt (3)"), select all div elements whose index number is less than 3.

Note:

When using the filter selector in combination, remember that the filter condition following the filter condition is based on the re-serial number after the filter selector, that is, the filtering level by level, such

$ ("# T1 tr: gt (0): lt (3)" ).css ("fontSize", "28"); // lt (3) is from gt (0) the serial number in the new sequence. Do not write it as lt (4)

II. Key Points

Multi-condition Selector
Multi-condition selector: $ ("p, div, span, menuitem"). Select the p tag, div tag, and span tag element with the menuitem style.
Note: The number of spaces in the selector expression cannot be less than one. It is easy to make mistakes!

Relative Selector

You only need to specify the second parameter in $ (), and the second parameter is a relative element. For example, the html code is as follows:Copy codeThe Code is as follows: <table id = "table1">
<Tr> <td> dsds </td> <td> dsfdef </td> </tr>
<Tr> <td> dsds </td> <td> dsfdef </td> </tr>
<Tr> <td> dsds </td> <td> dsfdef </td> </tr>
<Tr> <td> dsds </td> <td> dsfdef </td> </tr>
<Tr> <td> dsds </td> <td> dsfdef </td> </tr>
</Table>

You can use the following js Code to manipulate the background color of td.
$ ("Td", Token (this)).css ("background", "red"). This Code uses the relative selector. The selected td is the relative element of the current tr. The selected td element is all td elements under the current tr element and does not involve the td elements of other rows.

Copy codeThe Code is as follows: <script type = "text/javascript">
$ (Function (){
$ ("# Table1 tr"). click (function (){
$ ("Td", Token (this)).css ("background", "red ");
});
});
</Script>

Level selector:
1 $ ("# div li") Get all the li elements under the div (descendant, child, child ....)
2 $ ("# div> li") Get the direct li sub-element under the div // note the space
3 $ (". menuitem + div") gets the first div element after the style name is menuitem, which is not commonly used.
3 $ (". menuitem ~ Obtain all the div elements after the style name is menuitem, which is not commonly used.

The difference is ):
Multi-condition selector: $ ("p, div, span, menuitem"), relative selector: $ ("td", operator (this+}.css ("background", "red ")", level selector: $ ("# div li") to obtain all the li elements under the div (descendant, child, child ....)

The differences between the three are:

Multi-condition selector: comma-separated in,

Relative selector: separate two elements,

The hierarchy selector is distinguished by spaces in a single space.