Differences in usage examples of several commonly used selectors in jquery-JS Tutorial-php.cn

Differences in usage examples of several commonly used selectors in jquery

伊谢尔伦

Release： 2017-06-19 13:58:09

Original

1193 people have browsed it

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

1. :first, select the first element, such as $("p: first") selects the first p element
2, :last, selects the last element, for example $("p:last") selects the last p element
3, :not (selector), selects not Elements that meet the "selector" condition, such as $("p:not(.className)"), select all p elements whose style is not className
4, :even/:odd, selectindex For even/odd elements, such as $("p:even"), select all p elements with even index numbers
5, :eq (index number)/:gt (index number)/:lt (index number) ), select elements equal to the index number/greater than the index number/less than the index number, such as $("p:lt(3)"), select all p elements with index numbers less than 3
Note:
Filter selector When using a mixture of (3)").css("fontSize", "28"); //lt(3) is the serial number in the new sequence from gt(0), do not write it as lt(4)

二, Key points
1. Multi-condition selector
Multi-condition selector: $("p,p,span,menuitem"), simultaneously selects p tag, p tag, and span tag element with menuitem style
Pay attention to the selector
There cannot be more or less spaces in the expression, which is error-prone!
2. 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

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

Copy after login

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 do not involve td elements in other rows.

<script type="text/
javascript
"> 
$(function () { 
$("#table1 tr").click(function () { 
$("td", $(this)).css("background", "red"); 
}); 
}); 
</script>

Copy after login

3. Hierarchical selector:
a $("#p li") gets all li elements under p (descendants, children, children of children.... )
b $("#p > li") Get the direct li child element under p // Pay attention to the space
c $(".menuitem + p") Get the first one after the style name menuitem The p element is not commonly used.
d $(".menuitem ~ p") gets all p elements after the style name menuitem, which is not commonly used.
The difference in details is (error-prone point):
Multiple condition selector: $("p,p,span,menuiitem"), relative selector: $("td", $(this)).css ("background", "red")", hierarchical selector: $("#p li") gets all li elements under p (descendants, children, children of children....)

三The difference between them is:
1. Multi-condition selector: separated by a comma within a "",
2. Relative selector: separated by two elements,
3. Hierarchical selector separated by a "" Separate them with spaces

The sample code is as follows:

<style type="text/css">
  /*高亮显示*/
  .highlight{   
   background-color: gray
  }
 </style>

Copy after login

<body>
   <div>
      <p>Hello</p>
   </div>
   <div id="test">ID为test的DIV</div>
   <input type="checkbox" id="s1" name="football" value="足球" />足球
   <input type="checkbox" name="volleyball" value="排球" />排球
   <input type="checkbox" id="s3" name="basketball" value="篮球" />篮球
   <input type="checkbox" id="s4" name="other" value="其他" />其他
  </body>

Copy after login

The above is the detailed content of Differences in usage examples of several commonly used selectors in jquery. For more information, please follow other related articles on the PHP Chinese website!