One, jquery commonly used filter selector is as follows:
1.: First, select element one, such as $ ("Div:first") Select the first DIV element
2.: Last, select the final element, such as $ ("Div:last") to select the last div element
3.: Not (selector), select elements that do not meet the "selector" criteria, such as $ ("Div:not (. className)"), and select the style is not all DIV elements ClassName
4.: even/:odd, select elements with an even/odd index, such as $ ("Div:even"), and select all DIV elements with an even number of index numbers
5.: EQ (index number)/:GT (index ordinal)/:lt (index number), select the element equal to index number/greater than index/less than index number, such as $ ("Div:lt (3)"), select all DIV elements with index number less than 3
Attention:
When mixing the filter selector, keep in mind that the filter is based on the previous filter selector, that is, the filter's stepwise, i.e.
$ ("#t1 tr:gt (0): LT (3)"). CSS ("FontSize", "28"); LT (3) is the serial number of the new sequence from the GT (0), not written as LT (4)
Second, the focus
Multi-condition Selector
Multi-condition Selector: $ ("P,div,span,menuitem"), select P tag, div tag, and span label element with MenuItem style
Note the number of spaces in the selector expression can not be less, easy error!
Relative Selector
As long as the second argument is specified in $ (), the second argument is the relative element. For example, the HTML code is as follows
Copy Code code 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 a 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 are involved in other rows
Copy Code code 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, children ...). ）
2 $ ("#div > li") get the direct Li child element under DIV//Note space
3 $ (". MenuItem + div") gets the first DIV element after the style name is MenuItem, not commonly used.
3 $ (". MenuItem ~ Div") gets all the DIV elements after the style name is MenuItem, not commonly used.
The difference in detail is (the error point):
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: comma-separated in a ""
Relative selector: 2 elements separated,
The hierarchy selector is separated by a space within a ""
