jquery API 个人阅读笔记 --选择器

jquery API阅读

选择器

谈到jquery选择器，我们随口都可以说出属性选择器，类选择器，id选择器，伪类选择器等等。其实jquery的选择器远不止这些，其实也经常可以听到，jquery最强大的就是选择器。
确实是，jquery选择器为我们提供给了很多方便。

• id,class,ele就不在叙述了

  一次筛选多个选择器

  $('div,p,span.sel,.example')
  若同时需要对多种不同元素做相同操作，我们便可以一次性都筛选出来，中间只需逗号隔开

子代选择器 >

```$('div>p')```

通过大于> 由父级元素指到子级元素 不可跨级查询

兄弟元素 +

```$('div+p')```

查找在指定div下，平级或者平级元素的子级元素

~

```$('div ~ p')```

这些并不常用，这个是查找div之后的所有p标签。
当我们项目做大时，这些筛选范围太广，我们在实际开发中运用很少

伪类选择器

伪类选择器是很重要的选择器，除了我们之前提到的大家耳熟能详的那几类选择器之外，便是伪类了

• ：first 获取第一个元素
• ：last 获取最后一个元素
• ：not(selector) 去除所有与给定选择器匹配的元素
• :even :odd 匹配所有索引值为偶数/奇数的元素，从 0 开始计数
• :eq(index) 匹配一个给定索引值的元素 index从0开始
• ：lt() :gt() 匹配所有大于/小于给定索引值的元素
• ：header 匹配如 h1, h2, h3之类的标题元素
• :animated 匹配所有正在执行动画效果的元素
• :contains(text) 匹配包含给定文本的元素 中文也可以
• :empty 匹配所有不包含子元素或者文本的空元素
• :hidden 匹配所有不可见元素，或者type为hidden的元素
• :visible 匹配所有的可见元素
• :first-child 匹配所给选择器( :之前的选择器)的第一个子元素
• :first-of-type jquery v1.9 新增选择器。官方文档中解释也相对模糊。ele:first-of-type 其实就是获取当前元素(ele)的父元素的第一个(ele)类型的孩子
• :last-child / :last-of-type
• :nth-child 通俗的讲，为其父元素匹配第几个子元素，nth-child(1)是从1开始计数，和:eq(0)不同的是，eq从索引0开始。当然，:nth-child()中可以传一些特殊的值，如even、odd，或者是变量，如3n+1,2n等
• :nth-last-child 计数从最后一个元素开始到第一个

表单元素的伪类选择器

-:input 匹配所有 input, textarea, select 和 button 元素 不只是input标签 如<button>,<select>,<textarea>这种标签也是可以直接匹配出来的
-:text :password :reset :button :file 等等 就是直接查找type类型为这些的选择器

属性选择器

[attribute] 属性选择器有几种不同的筛选方式
- 例如$('div[id]'),$('div[id="sadas"]'),$('div[id!="sadas"]')
- $('div[id^="sadas"]'),$('div[id$="sadas"]'),$('div[id*="sadas"]')等等
- 以上包括查找包含某一属性，某艺术性为某一固定值的，或者取反，以…开头，结尾等等，与正则的常用标识一致