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

脚本收藏iframe

Jul 21 Javascript

浅析onsubmit校验表单时利用ajax的return false无效问题

Jul 10 Javascript

javascript实现瀑布流动态加载图片原理

Aug 12 Javascript

简单的vue-resourse获取json并应用到模板示例

Feb 10 Javascript

javascript 删除select中的所有option的实例

Sep 17 Javascript

在Angular中使用JWT认证方法示例

Sep 10 Javascript

electron + vue项目实现打印小票功能及实现代码

Nov 25 Javascript

详解如何在Angular优雅编写HTTP请求

Dec 05 Javascript

详解Element 指令clickoutside源码分析

Feb 15 Javascript

Vue数据绑定简析小结

May 07 Javascript

js异步接口并发数量控制的方法示例

Nov 22 Javascript

vue项目中的支付功能实现(微信支付和支付宝支付)

Feb 18 Vue.js

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

You might like

php框架Phpbean说明

2008/01/10 PHP

PHP MemCached 高级缓存应用代码

2010/08/05 PHP

浅析SVN常见问题及解决方法

2013/06/21 PHP

PHP使用imagick读取PDF生成png缩略图的两种方法

2014/03/20 PHP

PHP往XML中添加节点的方法

2015/03/12 PHP

PHP读取文件,解决中文乱码UTF-8的方法分析

2020/01/22 PHP

让图片旋转任意角度及JQuery插件使用介绍

2013/03/20 Javascript

JavaScript使用cookie记录临时访客信息的方法

2015/04/07 Javascript

jQuery滚动新闻实现代码

2016/06/26 Javascript

火狐和ie下获取javascript 获取event的方法(推荐)

2016/11/26 Javascript

原生JS简单实现ajax的方法示例

2016/11/29 Javascript

jQuery修改DOM结构_动力节点Java学院整理

2017/07/05 jQuery

JavaScript实现购物车基本功能

2017/07/21 Javascript

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

2018/10/10 Javascript

vue-cli3+ts+webpack实现多入口多出口功能

2019/05/30 Javascript

Vue之封装公用变量以及实现方式

2020/07/31 Javascript

在Python中处理XML的教程

2015/04/29 Python

Python中一行和多行import模块问题

2018/04/01 Python

python简易远程控制单线程版

2018/06/20 Python

Python Pillow Image Invert

2019/01/22 Python

Python生成一个迭代器的实操方法

2019/06/18 Python

python内置函数sorted()用法深入分析

2019/10/08 Python

pytorch GAN生成对抗网络实例

2020/01/10 Python

python 实现线程之间的通信示例

2020/02/14 Python

Tensorflow中的dropout的使用方法

2020/03/13 Python

python变量的作用域是什么

2020/05/26 Python

Python requests模块安装及使用教程图解

2020/06/30 Python

python openCV自制绘画板

2020/10/27 Python

AC Lens：购买隐形眼镜

2017/02/26 全球购物

Linux的文件类型

2012/03/07 面试题

客户接待方案

2014/02/26 职场文书

读群众路线心得体会

2014/03/07 职场文书

讲文明树新风演讲稿

2014/05/12 职场文书

关于运动会广播稿200字

2014/10/08 职场文书

《确定位置》教学反思

2016/02/18 职场文书

中学生打架《检讨书》范文

2019/08/12 职场文书