虚位以待(AD)
虚位以待(AD)
首页 > 网页特效 > Jquery > jQuery基础教程之强大的选择器(过滤选择器-基本过滤选择器)

jQuery基础教程之强大的选择器(过滤选择器-基本过滤选择器)
类别:Jquery   作者:码皇   来源:互联网   点击:

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS中的伪类选择器语法相同,即选择器都以一个冒号(:)开头。按照不同的过滤规则,过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤 ,魔客吧
过滤选择器主要是通过特定的过滤规则来筛选出所需的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基础教程之强大的选择器(过滤选择器