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 相关文章推荐
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
Aug 09 Javascript
JS控制阿拉伯数字转为中文大写示例代码
Sep 04 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
Nov 16 Javascript
JS数组的常见用法实例
Feb 10 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
Aug 05 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
js数字滑动时钟的简单实现(示例讲解)
Aug 14 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
Feb 18 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
May 01 Javascript
axios封装与传参示例详解
Oct 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
You might like
谈谈新手如何学习PHP
2006/12/14 PHP
PHP中动态显示签名和ip原理
2007/03/28 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
php实现word转html的方法
2016/01/22 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
PHP7新特性
2021/03/09 PHP
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
关于document.cookie的使用javascript
2010/10/29 Javascript
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
javascript 10进制和62进制的相互转换
2014/07/31 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
2017/08/14 Javascript
再谈Angular4 脏值检测(性能优化)
2018/04/23 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
Python使用PyCrypto实现AES加密功能示例
2017/05/22 Python
python使用标准库根据进程名如何获取进程的pid详解
2017/10/31 Python
Python实现备份MySQL数据库的方法示例
2018/01/11 Python
Python OrderedDict的使用案例解析
2019/10/25 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
JD Sports荷兰:英国领先的运动时尚零售商
2020/03/13 全球购物
大学生职业规划范文:象牙塔生活的四年计划
2014/01/14 职场文书
个人授权委托书范本
2014/04/03 职场文书
运动会拉拉队口号
2014/06/09 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
无保留意见审计报告
2015/06/05 职场文书
2015年除四害工作总结
2015/07/23 职场文书
html5调用摄像头实例代码
2021/06/28 HTML / CSS