jQuery选择器总结

jQuery有四大类选择器::基本选择器、层次选择器、过滤选择器、表单选择器.

其中,过滤选择器可以分为六种:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器。


①、基本选择器

  1. ID选择器:$('#id');
  2. 元素选择器:$('div');
  3. 类选择器  : $('.class');
  4. 任意匹配选择器  : $('*') ;
  5. 用逗号隔开的独立选择器组合,选择列表总的所有对象  :$('#id,.class,div,...');


②、层次选择器

层次选择器通过DOM元素间的层次关系选择元素,主要的层次关系有:后代、父子、兄弟、相邻关系

$('ancestor descendant' ).....祖先与后代的关系,选择祖先ancestor的所有后代;

$('parent>child')...父子关系,选择父元素parent的所有子元素,不包括除子元素外的其他后代元素;

$('prev+next')...相邻关系,匹配所有紧跟在prev元素后的相邻元素,可以用.next()替代;

$('prev~siblings')...匹配prev后的所有兄弟元素,可以用.nextAll()替代;

.siblings()选择全部的相邻元素


③、过滤选择器

      简单过滤选择器:10

      .first()或:first    选择第一个元素

      .last()或:last     选择最后一个元素

      :not(selector)   选择除了指定选择器selector的所有元素

      :even               获取所有索引为偶数的元素,index从0开始

      :odd                 获取所有索引为奇数的元素,index从0开始

      :eq(index)        选择给定索引index的元素

      :gt(index)         获取索引值大于index的元素

      :lt(index)           获取索引值小雨index的元素

      :header            获取所有标题类型元素,例如h1/h2/h3/h4/h5/h6/h7

      :animated         获取正在执行动画效果的元素

         

     内容过滤选择器:4

     内容过滤选择器根据元素内容中的文字或者所包含的子元素的特征获取元素,其内容可以模糊或者绝对匹配进行元素定位

    :contains('text');   获取包含文本text的元素

    :empty                 选取所有不包含子元素或者文本的空元素

    :has(selector)      选取含有选择器selector选择的元素的元素

    :parent                获取含有子元素或者文本的元素


    可见性过滤选择器:2

    根据元素的是否可见的特征来选择元素

    :hidden                获取所有不可见的元素或者type为hidden的元素和样式为visibility:hidden的元素

    :visible                 获取所有可见的元素


    属性过滤选择器:7

    根据元素的某个属性来选择器元素 ,如ID号或者匹配属性值的内容,并以”["号开头,以”]“号结尾

     [attribute]                    获取包含给定属性的元素

     [attribute=value]         获取等于给定的属性是某个特定的值的元素

     [attribute!=value]        获取不等于给定的属性是某个特定值的元素

     [attribute^=value]       获取给定的属性是以给定的值开始的元素

     [attribute$=value]       获取给定的属性是以给定的值结尾的元素

     [attribute*=value]       获取给定的属性包含某些值的元素

     [select1][select2][select3]...获取满足多个条件的复合属性的元素

    

    子元素过滤选择器:4

    :nth-child(eq|even|odd|index)   获取每个父元素下的特定位置的元素   索引号从1开始

    :first-child                                  获取父元素下的第一个子元素

    :last-child                                   获取父元素下的最后一个元素

    :only-child                                   获取每个父元素下仅有一个子元素

  

    表单对象属性过滤选择器:4

    通过表单对象的某个特定属性来获取元素,如enabled,disabled,checked,selected属性

    :enabled              获取表单中所有属性为可用的元素

    :disabled             获取表单中所有属性为不可用的元素

    :checked              获取表单中所有被选择的元素

    :selected             获取表单中所有被选中的option元素


   ④、表单选择器

  :input                       获取所有input  textarea  select

  :text                         获取所有单行文本框

  :password               获取所有密码框

  :radio                      获取所有的单选按钮

  :checkbox               获取所有的复选框

  :submit                    获取所有提交按钮

  :image                   获取所有图像域

  :reset                     获取所有重置按钮

  :button                   获取所有按钮

  :file                        获取所有文件域





  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值