Details of basic filter selectors for jquery selectors

2020-03-30 01:34:34
OfStack


<style type="text/css">
  
  .highlight{   
   background-color: gray
  }
 </style>


<body>
   <h3> Administrative divisions of provinces and cities </h3>
   <table border="1" width="50%">
    <thead>
     <tr>
      <th> Beijing </th>
      <th> Shanghai </th>
      <th> shangqiu </th>
     </tr>
    </thead>
    <tbody>
     <tr>
      <td> haidian </td>
      <td> xuhui </td>
      <td> Have no opinion of Yang </td>
     </tr>
     <tr>
      <td> The rising sun </td>
      <td> zhabei </td>
      <td> it </td>
     </tr>
     <tr>
      <td> changping </td>
      <td> huangpu </td>
      <td> Zhecheng jingxin diamond </td>
     </tr>
    </tbody>
   </table>
  </body>

A, : first


$("tr:first").addClass("highlight"); //Gets the first tr element that matches

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201401/20140127100221.png ">

(2) : the last ()


$("tr:last").addClass("highlight"); //Gets the last tr element that matches

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201401/20140127100229.png ">

Third, : not selector ()


$("td:not(:even)").addClass("highlight");//Gets td except that the index is even

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201401/20140127100238.png ">

Four, : even


$("tr:even").addClass("highlight");  //Matches all elements with an even index value, counting from 0

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201401/20140127100248.png ">

Five, the: the odd


$("tr:odd").addClass("highlight");  //Matches all elements with an odd index value, counting from 0

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201401/20140127100258.png ">

Six, : eq (index)


$("tr:eq(2)").addClass("highlight");   //An element that matches a given index value

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201401/20140127100307.png ">

Seven, : gt (index)


$("tr:gt(1)").addClass("highlight");  //Matches all elements greater than the given index value

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201401/20140127100315.png ">

Eight, : lt (index)


$("tr:lt(2)").addClass("highlight");  //Matches all elements less than the given index value

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201401/20140127100322.png ">

Nine, : header


$(":header").addClass("highlight");   //Matches header elements such as h1, h2, h3, etc

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201401/20140127100330.png ">