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都会被匹配
• [属性$='值']??? 属性值以特定值结尾的元素
• [属性*='值']??? 属性包含特定值的元素