编程 Javascript

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

Posted in Javascript onJanuary 27, 2014

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

<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

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

二、:last()

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

三、:not(selector)

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

四、:even

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

五、:odd

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

六、:eq(index)

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

七、:gt(index)

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

八、:lt(index)

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

九、:header

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

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

在线编辑器中换行与内容自动提取

Apr 24 Javascript

javascript处理table表格的代码

Dec 06 Javascript

原来Jquery.load的方法可以一直load下去

Mar 28 Javascript

解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题

Jan 14 Javascript

javascript制作loading动画效果 loading效果

Jan 14 Javascript

js实现登陆遮罩效果的方法

Jul 28 Javascript

深入浅析vue组件间事件传递

Dec 29 Javascript

javascript trie前缀树的示例

Jan 29 Javascript

理顺8个版本vue的区别(小结)

Sep 17 Javascript

js实现同一个页面,多个enter事件绑定的示例

Oct 10 Javascript

Vue 中使用富文本编译器wangEditor3的方法

Sep 26 Javascript

微信小程序学习之自定义滚动弹窗

Dec 20 Javascript

jquery选择器之层级过滤选择器详解

Jan 27 #Javascript

jquery选择器之内容过滤选择器详解

Jan 27 #Javascript

jquery选择器之属性过滤选择器详解

Jan 27 #Javascript

jQuery自定义事件的简单实现代码

Jan 27 #Javascript

jQuery中bind与live的用法及区别小结

Jan 27 #Javascript

jQuery实现动画效果的简单实例

Jan 27 #Javascript

firefox下jquery ajax返回object XMLDocument处理方法

Jan 26 #Javascript