当前位置：首页 > 资讯 > 技术文档

jquery选择器之基本过滤选择器详解

时间：2021-10-23 02:24 编辑：来源：阅读：
扫一扫，手机访问

摘要：jquery选择器之基本过滤选择器详解

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

[u]复制代码[/u] 代码如下:

<body>
   <h3>各省市行政区划</h3>
   <table border="1" width="50%">
    <thead>
     <tr>
      <th>北京</th>
      <th>上海</th>
      <th>商丘</th>
     </tr>
    </thead>
    <tbody>
     <tr>
      <td>海淀</td>
      <td>徐汇</td>
      <td>睢阳</td>
     </tr>
     <tr>
      <td>朝阳</td>
      <td>闸北</td>
      <td>梁园</td>
     </tr>
     <tr>
      <td>昌平</td>
      <td>黄埔</td>
      <td>柘城</td>
     </tr>
    </tbody>
   </table>
  </body>

一、:first

[u]复制代码[/u] 代码如下:

$("tr:first").addClass("highlight"); //获取匹配的第一个tr元素

[img]http://files.jb51.net/file_images/article/201401/20140127100221.png[/img] 二、:last()

[u]复制代码[/u] 代码如下:

$("tr:last").addClass("highlight"); //获取匹配的最后一个tr元素

[img]http://files.jb51.net/file_images/article/201401/20140127100229.png[/img] 三、:not(selector)

[u]复制代码[/u] 代码如下:

$("td:not(:even)").addClass("highlight");//获取除了索引是偶数的td

[img]http://files.jb51.net/file_images/article/201401/20140127100238.png[/img] 四、:even

[u]复制代码[/u] 代码如下:

$("tr:even").addClass("highlight");  //匹配所有索引值为偶数的元素，从 0 开始计数

[img]http://files.jb51.net/file_images/article/201401/20140127100248.png[/img] 五、:odd

[u]复制代码[/u] 代码如下:

$("tr:odd").addClass("highlight");  //匹配所有索引值为奇数的元素，从 0 开始计数

[img]http://files.jb51.net/file_images/article/201401/20140127100258.png[/img] 六、:eq(index)

[u]复制代码[/u] 代码如下:

$("tr:eq(2)").addClass("highlight"); //匹配一个给定索引值的元素

[img]http://files.jb51.net/file_images/article/201401/20140127100307.png[/img] 七、:gt(index)

[u]复制代码[/u] 代码如下:

$("tr:gt(1)").addClass("highlight");  //匹配所有大于给定索引值的元素

[img]http://files.jb51.net/file_images/article/201401/20140127100315.png[/img] 八、:lt(index)

[u]复制代码[/u] 代码如下:

$("tr:lt(2)").addClass("highlight");  //匹配所有小于给定索引值的元素

[img]http://files.jb51.net/file_images/article/201401/20140127100322.png[/img] 九、:header

[u]复制代码[/u] 代码如下:

$(":header").addClass("highlight");   //匹配如 h1, h2, h3之类的标题元素

[img]http://files.jb51.net/file_images/article/201401/20140127100330.png[/img]

全部评论(0)

上一篇：jQuery在线选座位插件seat-charts特效代码分享
下一篇：使用delegate方法为一个tr标签加一个链接

资讯排行榜
更多>>