jQuery基础教程之强大的选择器(过滤选择器-基本过滤选择器)

转载 2012年03月31日 14:01:30

向大家推荐一本jQuery学习的好书《锋利的jQuery》
此书循序渐进地对jQuery的各种函数和方法调用进行了介绍,读者可以系统地掌握jQuery的DOM操作、事件监听和动画、表单操作、AJAX以及插件方面等知识点,并结合每个章节后面的案例演示进行练习,达到掌握核心知识点的目的。
此书很适合那些想学jQuery的同学,同样也很适合Web开发人员阅读和参考。

这几天在想着如何结合例子来向大家展示jQuery的强大选择器的用法,苦于自己的水平有限,绞尽脑汁也没写出什么好的DEMO来,呵呵~很幸运的是,最近发现了锋利的jQuery这本书的原书例子代码,让我欣喜不已,因为这些个代码示例写得太好了,可以让人很直观地明白jQuery的使用方法。想学习jQuery的同学一定不要错过哦锋利的jQuery示例代码下载

由于这本书中已经对今天我要说的jQuery过滤选择器进行了很好很全的总结,所以我也就不浪费精力再去自己写教程了,直接将书中的内容在此展示于大家看,相信自己的水平暂时还没达到作者的水平,所以就进行拿来主义吧,哈哈~~另外告诉大家一个很好的学习jQuery的博客地址锋利的jQuery作者博客,此博客中,内容很是丰富,大家一定会学到很多jQuery的知识。

接下来就是关于jQuery过滤选择器的内容了:(PS:都是摘抄于《锋利的jQuery》)

—————————————————–朴实的分割线—————————————–
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS中的伪类选择器语法相同,即选择器都以一个冒号(:)开头。按照不同的过滤规则,过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器

  1. 基本过滤选择器
    选择器 描述 返回 示例
    :first 选取第一个元素 单个元素 $(“div:first”)选取所有div元素中的第一个div元素
    :last 选取最后一个元素 集合元素 $(“input:not:(.myclass)”)选取class不是myclass的input元素
    :even 选取索引是偶数的所有元素,注意:索引是从0开始的 集合元素 $(“input:even”)选取索引是偶数的input元素。
    :odd 选取索引是奇数的所有元素,注意:索引是从0开始的 集合元素 $(“input:odd”)选取索引是奇数的input元素。
    :eq(index) 选取索引等于index的元素,注意:索引是从0开始的 集合元素 $(“input:eq(1)”)选取索引等于1的input元素。实际上选择的是第二个input元素
    :gt(index) 选取索引大于index的元素,注意:索引是从0开始的 集合元素 $(“input:gt(1)”)选取索引大于1的input元素。
    :lt(index) 选取索引小于index的元素,注意:索引是从0开始的 集合元素 $(“input:lt(1)”)选取索引小于于1的input元素。这个就等同于$(“input:eq(0)”)
    :header 选取所有的标题元素,例如h1,h2,h3….. 集合元素 $(“:header”)选取网页中所有的h1,h2,h3….
    :animated 选取当前正在执行动画的所有元素 集合元素 $(“div:animated”)选取正在执行动画的div元素

    ——————————————————朴实的分割线—————————————

    关于上面的解释中,有一点我觉得有必要提醒大家的是”:first”和”:last”选择器,虽然获取到的是一个元素,但是返回的jQuery对象仍然是一个jQuery包装集,还是一个集合,还是要这样$(“div:first”)[0]转换为DOM对象。
    关于这个jQuery基本过滤选择器,锋利的jQuery的作者已经给出了很好的DEMO演示代码,我把代码放到了我的博客里了,大家可以去jQuery教程基础篇之强大的选择器-过滤选择器-基本过滤选择器在线演示

    这里给个自己开发的小插件(就一个功能表格隔行换色),就是利用了基本过滤选择器中的:even和:odd
    table隔行换色插件。代码很简单,大家可以看看,也顺便学习一下如何自己开发一个属于自己的插件。呵呵~~

jQuery过滤选择器详解

基本过滤选择器选取第一个元素(:first) //选择第一个div元素. $('#btn1').click(function(){ $('div:first...
  • csujiangyu
  • csujiangyu
  • 2015年08月19日 10:19
  • 5977

jQuery之属性过滤选择器

在HTML文档中,元素的开始标记中通常包含有多个属性(attribute), 在jQuery中,除了直接使用id和class属性作为选择器之外,还可以根据各种属性(如title等)对由选择器 查询到...
  • woshisap
  • woshisap
  • 2012年03月11日 00:37
  • 89111

jQuery基础教程之强大的选择器(过滤选择器-可见性过滤选择器)

在上一篇文章jQuery教程基础篇之强大的选择器(过滤选择器-内容过滤选择器)中,我们了解了jQuery内容过滤选择器的知识,今天我们来学习一下jQuery的另一个强大的过滤选择器——可见性过滤选择器...
  • wql19881207
  • wql19881207
  • 2012年03月31日 14:06
  • 493

10分钟-jQuery过滤选择器

1.:first过滤选择器本次我们介绍过滤选择器,该类型的选择器是根据某过滤规则进行元素的匹配,书写时以“:”号开头,通常用于查找集合元素中的某一位置的单个元素。在jQuery中,如果想得到一组相同标...
  • jimo_lonely
  • jimo_lonely
  • 2016年04月01日 15:31
  • 1124

jQuery-过滤选择器

jQuery过滤选择器 (1)基本过滤选择器 (2)内容过滤选择器 (3)可见性过滤选择器 (4)子元素过滤选择器...
  • fightingcoder419
  • fightingcoder419
  • 2016年08月23日 22:07
  • 93

jQuery基础教程之强大的选择器(过滤选择器-基本过滤选择器)

向大家推荐一本jQuery学习的好书《锋利的jQuery》 此书循序渐进地对jQuery的各种函数和方法调用进行了介绍,读者可以系统地掌握jQuery的DOM操作、事件监听和动画、表单操作、AJAX...
  • wql19881207
  • wql19881207
  • 2012年03月31日 14:01
  • 625

Jquery的过滤选择器分为哪几种?

Jquery的过滤选择器分为哪几种? 转载▼ 标签:  jquery   过滤选择器   分类 分类: JQuery 所有的过滤选择器分为哪几种: 一、基本过滤选择器(...
  • u013700340
  • u013700340
  • 2014年03月19日 11:49
  • 1082

Jquery选择器分类(基本选择器,层次选择器,过滤选择器,表单选择器)

基本选择器 说明:通过元素id、class和标签名等来查找DOM元素 1.id选择器:$("#test");//选取id为test的元素 2.类选择器:$(".test");//选取所有class为...
  • allan492975230
  • allan492975230
  • 2013年08月01日 15:50
  • 1166

jQuery过滤选择器

要点: - 基本过滤器 - 内容过滤器 - 可见性过滤器 - 子元素过滤器 - 其他方法...
  • super_yang_android
  • super_yang_android
  • 2016年05月06日 22:55
  • 3054

JQuery过滤性选择器

:first过滤选择器 过滤选择器,该类型的选择器是根据某过滤规则进行元素的匹配,书写时以“:”号开头,通常用于查找集合元素中的某一位置的单个元素。 在jQuery中,如果想得到一组相同标签元素中...
  • anisweir
  • anisweir
  • 2015年05月11日 10:35
  • 360
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery基础教程之强大的选择器(过滤选择器-基本过滤选择器)
举报原因:
原因补充:

(最多只允许输入30个字)