编程 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技巧总结

Jan 01 Javascript

jquery 跨域访问问题解决方法(笔记)

Jun 08 Javascript

JavaScript encodeURI 和encodeURIComponent

Dec 04 Javascript

jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)

Mar 05 Javascript

让DIV的滚动条自动滚动到最底部的3种方法(推荐)

Sep 24 Javascript

Javascript 实现全屏滚动实例代码

Dec 31 Javascript

JS中解决谷歌浏览器记住密码输入框颜色改变功能

Feb 13 Javascript

微信小程序引入es6 promise

Apr 12 Javascript

使用Bootstrap4 + Vue2实现分页查询的示例代码

Dec 21 Javascript

vue生命周期的探索

Apr 03 Javascript

Vue实现购物车详情页面的方法

Aug 20 Javascript

原生js实现五子棋游戏

May 28 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

You might like

php+mysqli实现批量执行插入、更新及删除数据的方法

2015/01/29 PHP

PHP+JS实现的商品秒杀倒计时用法示例

2016/11/15 PHP

解决laravel查询构造器中的别名问题

2019/10/17 PHP

javascript学习笔记(一) 在html中使用javascript

2012/06/18 Javascript

javascript 正则表达式相关应介绍

2012/11/27 Javascript

JS前端框架关于重构的失败经验分享

2013/03/17 Javascript

JS中图片缓冲loading技术的实例代码

2013/08/29 Javascript

js获取UserControl内容为拼html时提供方便

2014/11/02 Javascript

使用jQuery仿苹果官网焦点图特效

2014/12/23 Javascript

jquery滚动加载数据的方法

2015/03/09 Javascript

如何利用JS通过身份证号获取当事人的生日、年龄、性别

2016/01/22 Javascript

jQuery链式调用与show知识浅析

2016/05/11 Javascript

微信小程序 http请求详细介绍

2016/10/09 Javascript

详解在Vue中通过自定义指令获取dom元素

2017/03/04 Javascript

聊聊那些使用前端Javascript实现的机器学习类库

2017/09/18 Javascript

vue给input file绑定函数获取当前上传的对象完美实现方法

2017/12/15 Javascript

JS中判断字符串存在和非空的方法

2018/09/12 Javascript

angular6的响应式表单的实现

2018/10/10 Javascript

使用easyui从servlet传递json数据到前端页面的两种方法

2019/09/05 Javascript

vue中实现弹出层动画效果的示例代码

2020/09/25 Javascript

python Django模板的使用方法

2016/01/14 Python

请不要重复犯我在学习Python和Linux系统上的错误

2016/12/12 Python

浅谈python中的数字类型与处理工具

2017/08/02 Python

pyqt5中QThread在使用时出现重复emit的实例

2019/06/21 Python

Python Django 母版和继承解析

2019/08/09 Python

python selenium登录豆瓣网过程解析

2019/08/10 Python

python处理RSTP视频流过程解析

2020/01/11 Python

python打开音乐文件的实例方法

2020/07/21 Python

python简单利用字典破解zip文件口令

2020/09/07 Python

Giglio德国网上精品店：奢侈品服装和配件

2016/09/23 全球购物

介绍一下sql server的安全性

2014/08/10 面试题

Java程序员面试90题

2013/10/19 面试题

护士求职简历自我评价

2015/03/10 职场文书

信用卡催款律师函

2015/05/27 职场文书

MySQL主从复制断开的常用修复方法

2021/04/07 MySQL

详解PHP设计模式之依赖注入模式

2021/05/25 PHP