jQuery选择器

jQuery学习 本文总阅读量次

常用的就不记录了，只记录一些和原生js有区别的部分

基本选择器

  • #id、元素、.class、*（通配符）

元素选择器

  • 选择所有匹配的元素，返回的是一个数组
  • 可以通过$(this)匹配当前点中的单一元素，$(this).index()可获取当前点中元素的数组下标
  • 由于是数组，所以也可使用$("p")[index]来匹配单一元素
  • 在页面中选取所有<p>元素:$("p")

多项选择器

  • $（"selector1，selector2，selectorN"）；将每一个选择器匹配到的元素合并后一起返回。
  • 可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。
  • 注意：合并后的结果不是遵循我们给定的选择器顺序，二是遵循html原本的DOM结构

层级选择器

  • 祖先后代选择器:$（ancestor descendant'）；在给定的祖先元素下匹配所有的后代元素。
  • 直接后代选择器:$（'parent > child'）；在给定的父元素下匹配所有的子元素。
  • 兄弟选择器:$（'prev + next'）；匹配所有紧接在prev元素后的next元素。
  • 所有同级选择器:$（'prev ~ siblings'）；匹配prev元素之后的所有siblings元素。

属性选择器

  • $（'[attribute]'）属性名
  • $（'[attribute=value]'）属性值
  • $（'[attribute! =value]'）属性值不为value
  • $（'[attribute^ =value]'）属性值以value开头
  • $（'[attribute$ =value]'）属性值以value结尾
  • $（'[attribute* =value]'）属性值包含value
  • $（'[selector1][selector2][selectorN]'）属性值同时满足

过滤器

  • 参数：
    • n:子元素序号，必须为整数，从1开始
    • even：匹配所有偶数元素
    • odd：匹配所有奇数元素
    • formula：使用特殊公式，如(an+b)进行选择

child系列

  • :first- child第一个孩子
  • :last-child最后一个孩子
  • :nth-child(n| even| odd| formula)当前元素的父元素的第几个孩子（注意是从1开始，不是0）
  • :nth-last-child(n| even| odd| formula)倒数第几个孩子
  • :only-child独生子

须同时满足2个条件

  • 可参考:nth-child(n) 选择器（CSS3）
  • 注意：前4个过滤器都必须同时满足2个条件才能进行匹配，如下例子
  • 例子：
    • $（'div > p:first- child'）只能匹配div下的第一个元素是p元素（条件1）时的第一个p标签（条件2），这两个条件是需要同时满足的，假设div的第一个子元素不是p元素，则无法匹配。
    • $（'div > p:nth- child(2)'）只能匹配div下的第二个元素是p的情况

type系列（更好用）

  • :first-of-type
  • :last-of-type
  • :nth-of-type(n | even| odd| formula)
  • :nth-last-of-type(n | even| odd| formula)
  • :only-of-type

区别于child系列

  • 他的条件更注重去匹配type（元素），$（'div > p:first-of-type')只需要div下有众多个子元素，匹配div下第一个p元素，并不强求p是div的第一个子元素

表单相关

  • :input：选中<input>、<textarea>、<select>、<button>，他不仅是选中input，他匹配所有表单元素
  • :text：匹配所有单行文本框，与input[type='text']效果一样
  • 其他input的type用法也同上，:password/:radio/checkbox/image/reset/button/:file

状态相关

  • :enabled：匹配所有可用元素
  • :disabled：匹配所有不可用元素
  • :checked：匹配所有选中的被选中元素（复选框、单选框、select的option)
  • :selected：匹配所有选中的option元素

查找与过滤方法

jQuery学习