JQuery选择器

JQuery选择器


基本选择器

  • id选择:
    • $("#id")
  • 类选择:
    • $(".class")
  • 元素名选择:
    • $("元素名")
  • 选择所有元素:
    • $("*")
  • 以上选择可以叠加,中间用逗号隔开:
    • $("div,#one")    选择所有div元素,然后从中选择id为one的元素

层次选择器

  • 祖先 后代选择:
    • $("祖先A 后代B")    选择以A为祖先 所有的B元素(A中的所有B)
  • 子元素选择
    • $("父A>子B")    在A中选择B子元素
  • 下一个元素选择 (只是兄弟节点,不包过子节点)
    • $("A+B")    A后面的第一个B
  • 后面所有元素选择 (只是兄弟节点,不包过子节点)
    • $("A~B")    A后面的所有B

过滤选择器

  • :first     第一个元素
    • $("input:first")     第一个input元素
  • :last    最后一个元素
  • :not()     不满足条件的元素
    • $("div:not(:animated)")    没有进行动画的div元素

下标是从0开始

  • :even     下标为偶数的元素
  • :odd     下表为奇数的元素
  • :gt()     greater than 下标比..大的元素
  • :eq()     equal 下标和..相等的元素
  • :lt()     less than 下标比..小的元素
  • :header     标题元素
  • :animated     正在进行动画的元素

内容过滤选择器

  • :contains()     包含指定文本的元素
    • $("div:contains('Hello')")     文本内容包含hello的元素
  • :empty()     不包含文本或者子元素的空元素
  • :has()     含有特定元素的元素
    • $("div:has(.szx)")     选择含有 class 为 szx 的 div 元素
  • :parent()     含有文本或者子元素的元素 不是父元素

可见性选择器

  • :visible     选取可见元素
  • :hidden     选取不可见元素

属性选择器

  • [属性]     选取包含该属性的元素
  • [属性='值']     选取属性等于特定值的元素
  • [属性!='值']     选择属性值不为指定值的元素
  • [属性^='值']     属性值以特定值开始的元素
    • $("div[title^='he']")     属性值形如hello,hel,hell都会被匹配
  • [属性$='值']    属性值以特定值结尾的元素
  • [属性*='值']    属性包含特定值的元素

posted @ 2020-04-09 17:41  退役的熬夜选手  阅读(228)  评论(0编辑  收藏  举报