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

支持ie与FireFox的剪切板操作代码

Sep 28 Javascript

JQuery插件Style定制化方法的分析与比较

May 03 Javascript

Node.js中调用mysql存储过程示例

Dec 20 Javascript

input file上传图片预览功能实例代码

Oct 25 Javascript

vue实现简单表格组件实例详解

Apr 16 Javascript

详解基于Vue cli生成的Vue项目的webpack4升级

Jun 19 Javascript

jQuery序列化form表单数据为JSON对象的实现方法

Sep 20 jQuery

Vue自定义指令写法与个人理解

Feb 09 Javascript

koa router 多文件引入的方法示例

May 22 Javascript

vue中axios的二次封装实例讲解

Oct 14 Javascript

JavaScript 实现继承的几种方式

Feb 19 Javascript

JavaScript原型链中函数和对象的理解

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