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元素

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

二、:last()

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

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

三、:not(selector)

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

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

四、:even

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

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

五、:odd

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

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

六、:eq(index)

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

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

七、:gt(index)

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

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

八、:lt(index)

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

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

九、: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
You might like
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
Laravel 5框架学习之Eloquent 关系
2015/04/09 PHP
php筛选不存在的图片资源
2015/04/28 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
javascript中的location用法简单介绍
2007/03/07 Javascript
js AspxButton的客户端操作
2009/06/26 Javascript
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
JQuery datepicker 使用方法
2011/05/20 Javascript
asp知识整理笔记3(问答模式)
2015/09/27 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
2017/01/21 Javascript
初探js和简单隐藏效果的实例
2017/11/23 Javascript
vue超时计算的组件实例代码
2018/07/09 Javascript
Python中无限元素列表的实现方法
2014/08/18 Python
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
python async with和async for的使用
2019/06/20 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
python内存管理机制原理详解
2019/08/12 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
Python异步编程之协程任务的调度操作实例分析
2020/02/01 Python
Python爬虫教程知识点总结
2020/10/19 Python
python实现三种随机请求头方式
2021/01/05 Python
介绍信样本
2015/01/31 职场文书
骨干教师个人总结
2015/02/11 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS