The difference between multi-conditional selectors, relative selectors, and hierarchical selectors in jquery

One, jquery commonly used filter selector is as follows:

1: First, select the first element, such as $ ("Div:first"), and select a DIV element

2,: Last, select the final element, such as $ ("Div:last") to select the last div element

3: Not (selector), select an element that does not meet the "selector" criteria, such as $ ("Div:not (. className)"), select all DIV elements that are not className

4,: even/:odd, select an element with an even/odd index, such as $ ("Div:even"), select all DIV elements with an even number of index numbers

5,: EQ (index number)/:GT (index number)/:LT (index number), select equal to index number/greater than index number/less than the index number of elements, such as $ ("Div:lt (3)"), select the index number is less than 3 of all DIV elements

Attention:

When mixing filter selectors, keep in mind that the following filter conditions are based on the re-serial number filtered by the previous filter selector, which is the step-by-step nature of the filter, such as

$ ("#t1 tr:gt (0): LT (3)"). CSS ("FontSize", "28"); LT (3) is the ordinal of a new sequence out of the GT (0), not written as LT (4)





Second, the focus

Multi-Criteria Selector
Multi-condition Selector: $ ("P,div,span,menuitem"), select P tag, div tag, and span tag element with MenuItem style
Note that the space in the selector expression cannot be more than a few, error-prone!

Relative Selector

As long as the second argument is specified in $ (), the second argument is a relative element. For example, HTML code is as follows

The 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>

Then you can use the following JS code to operate the TD background color
$ ("TD", $ (this)). CSS ("Background", "red"), the code is the relative selector, the selected TD is the current TR as the relative element. The TD element selected is all TD elements under the current TR element and no TD elements involving other lines

The code is as follows:
<script type= "Text/javascript" >
$ (function () {
$ ("#table1 tr"). Click (function () {
$ ("TD", $ (this)). CSS ("Background", "Red");
});
});
</script>

Hierarchy selector:
1 $ ("#div Li") gets all the LI elements under the div (descendants, children, sons of children ...). ）
2 $ ("#div > li") get the direct Li Sub-element under DIV//Note space
3 $ (". MenuItem + div") gets the first DIV element after the style named MenuItem, not commonly used.
3 $ (". MenuItem ~ Div") gets all div elements that have a style name of MenuItem, not commonly used.

The difference between the details is (prone to error points):
Multi-condition Selector: $ ("P,div,span,menuitem"), relative selector: $ ("TD", $ (this)). CSS ("Background", "Red"), hierarchy selector: $ ("#div Li") Gets all the LI elements under the div (descendants, children, children ...). ）

The difference between the three is:

Multi-condition Selector: A comma is distinguished within a "",

Relative selector: 2 elements separated,

The hierarchy selector is separated by a space within a ""

The difference between multi-conditional selectors, relative selectors, and hierarchical selectors in jquery