编程 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 相关文章推荐

jQuery选择器的工作原理和优化分析

Jul 25 Javascript

一个JQuery操作Table的代码分享

Mar 30 Javascript

jQuery图片轮播滚动切换代码分享

Apr 20 Javascript

基于javascript实现右下角浮动广告效果

Jan 08 Javascript

微信开发消息推送实现代码

Oct 21 Javascript

在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)

May 02 Javascript

angularjs利用directive实现移动端自定义软键盘的示例

Sep 20 Javascript

React.Js添加与删除onScroll事件的方法详解

Nov 03 Javascript

JS随机数产生代码分享

Feb 24 Javascript

Vuejs在v-for中,利用index来对第一项添加class的方法

Mar 03 Javascript

JS+canvas画布实现炫酷的旋转星空效果示例

Feb 13 Javascript

JavaScript中使用Spread运算符的八种方法总结

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