The difference between multi-condition selectors, relative selectors and hierarchical selectors in jquery_jquery

1. The commonly used filter selectors in Jquery are as follows:

1. :first, selects the first element, such as $("div:first") selects the first div element

2. :last, selects the last element, such as $("div:last") selects the last div element

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

4. :even/:odd, selects elements with even/odd indexes, such as $("div :even"), select all div elements with even index numbers

5, :eq (index number)/:gt (index number)/:lt (index number), select equal to the index number/greater than the index Elements with number/less than index number, such as $("div:lt(3)"), select all div elements with index number less than 3

Note: Mixed use of

filter selectors Remember that the subsequent filtering conditions are based on the re-numbering after filtering by the previous filtering selector, that is, the filtering is step-by-step, such as

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





Second, focus

Multi-condition selector
Multi-condition selector: $("p,div,span,menuitem"), select the p tag at the same time, div tags, and span tag elements with menuitem style
Note that there cannot be more or less spaces in the selector expression, which is easy to make mistakes!

Relative selector

As long as you specify the second parameter in $(), the second parameter is a relative element. For example, the html code is as follows:

Copy the code The code is as follows:

td>dsfdef ;td>dsds tr>

dsds	dsfdef
dsfdef

Then you can use the following js code to operate the background color of td
$("td", $(this)).css("background ", "red"), this code uses a relative selector, and the selected td is relative to the current tr element. The selected td elements are all td elements under the current tr element, and there are no td elements involved in other rows

Copy code

The code is as follows: $(function () {

$("#table1 tr").click(function () {

$("td", $(this)).css("background", "red");
});
});



Level selector:
1 $("#div li") Get all li elements under the div (descendants, children, children of children....)
2 $( "#div > li") Gets the direct li child element under the div // Pay attention to the space

3 $(".menuiitem div") Gets the first div element after the style name menuitem, which is not commonly used.
3 $(".menuitem ~ div") gets all div elements after the style name menuitem, which is not commonly used.

The difference in details is (error-prone point):
Multi-conditional selector: $("p,div,span,menuitem"), relative selector: $("td", $(this) ).css("background", "red")", hierarchical selector: $("#div li") gets all li elements under the div (descendants, children, children of children....)

The difference between the three is:

Multi-conditional selector: separated by a comma within a "",

Relative selector: 2 elements separated,

Level Selectors are separated by spaces within a ""