当前位置:主页 > jquery教程 > jquery选择器之基本过滤选择器详解

实例详解jquery基本过滤选择器

发布:2020-02-10 17:46:28 75


给大家整理一篇jQuery相关的编程文章,网友唐英武根据主题投稿了本篇教程内容,涉及到jquery、过滤选择器、jquery选择器之基本过滤选择器详解相关内容,已被779网友关注,相关难点技巧可以阅读下方的电子资料。

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

 

<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选择器之基本过滤选择器详解

参考资料

相关文章

  • 解析jquery缩略图预览滑块的实现

    发布:2020-03-14

    这篇文章主要介绍了jquery实现的缩略图预览滑块,实例分析了jQuery缩略图预览滑块的实现与使用技巧,并提供了完整的实例下载,需要的朋友可以参考下


  • jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方法

    发布:2020-01-25

    前些日子不是在做使用Jquery-UI实现一次拖拽多个选中的元素操作嘛,在持续完善这个组件时遇到了一个关于拖放排序的bug。今天就着图片和代码重现一下,也顺便告诉大家如何解决这个问题


  • jquery的ajax提交form表单的方法总结

    发布:2021-05-27

    下面小编就为大家带来一篇jquery的ajax提交form表单的两种方法小结(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考


  • jQuery编写网页版2048小游戏

    jQuery编写网页版2048小游戏

    发布:2023-01-03

    给网友朋友们带来一篇关于jQuery的教程,本文主要分享了jQuery编写网页版2048小游戏的示例代码,具有一定的参考价值,下面跟着小编一起来看下吧


  • 实例解析jquery ajax jsonp跨域调用

    发布:2020-03-16

    今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友


  • 易操作的jQuery表单提示插件

    易操作的jQuery表单提示插件

    发布:2023-01-05

    给网友朋友们带来一篇关于jQuery的教程,这篇文章主要为大家介绍了易操作的jQuery表单提示插件,使用它可以轻松为表单控件添加淡入淡出动画效果的提示,感兴趣的小伙伴们可以参考一下


  • jquery.picsign图片标注组件实例详解

    jquery.picsign图片标注组件实例详解

    发布:2022-06-14

    给网友朋友们带来一篇关于jquery的教程,这篇文章主要介绍了jquery.picsign 自己封装的第一个开源组件,需要的朋友可以参考下


  • jQuery 1.9使用$.support替代$.browser的实例内容

    发布:2019-10-04

    jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support,下面我们来看下具体的使用方法


网友讨论