jQuery的选择器与过滤器

笔记放在Github上，点击访问下载

---

jQuery是一个优秀的JavaScript库

---

jQuery选择器

---

基本选择器

1. 普遍选择器 $("*")
2. 标签选择器 $("div")
3. ID选择器 $("#one")
4. 类选择器 $(".one")
5. 组合选择器 多个选择器使用逗号分隔 $("div,.one")
6. 嵌套选择器 多个选择器共同使用 $("div.one")

---

层次选择器

1. 后代选择器 $(".outer .inner")
2. 子代选择器 $(".outer>.inner")或者$(".outer>代表选择的所有子代

---

兄弟选择器

1. 下一个兄弟选择器 $(".one+.two")或者$(".one+")
2. 之后所有兄弟选择器
   $(".one~.two")表示之后所有兄弟中类为two的元素
   $(".one~")表示之后所有的兄弟元素

---

jQuery过滤器

jQuery的过滤器必须用在jQuery选择器后，表示对通过前面的jQuery选择器选择到的内容的过滤。
是建立在前面选择器已经选择到元素的基础之上的。

---

基本过滤器

1. selector:first 获取所有已找到的元素中的第一个元素
2. selector:last 获取所有已找到的元素中最后一个元素
3. selector:even 获取所有已找到的元素中索引为偶数的元素(从0开始)
4. selector:odd 获取所有已找到的元素中索引为奇数的元素(从0开始)
5. selector:eq(index) 获取所有已找到的元素中索引等于index的元素
6. selector:lt(index) 获取所有已找到的元素中索引小于index的元素
7. selector:gt(index) 获取所有已找到的元素中索引大于index的元素
8. selector:not(selector2) 获取所有已找到的元素中除了selector2的元素
9. selector:header 获取所有已选择到的元素中的标题元素(h1~h6)

---

内容过滤器

1. selector:contains(text) 获取所有已选择到的元素中文本包含text的元素
2. selector:empty 获取所有已选择到的元素中的空元素（没有子节点）
3. selector:parent 获取所有已选择到的元素中非空元素（有子节点）
4. selector:has(selector2) 获取所有已选择到的元素中子元素为selector2的元素
   $(".outer>:has('span')")

---

可见性过滤器

• 不占据屏幕空间的

1. display:none
2. <input type="hidden" />

• 占据屏幕空间的

1. visibility:hidden;
2. opacity:0;

• 使用：

1. selector:hidden 选择所有不占据屏幕空间的元素
2. selector:visible 选择所有占据屏幕空间的元素

---

属性过滤器

1. selector[attr] 获取所有已选择到的元素中具有属性attr的元素
2. selector[attr=value] 获取所有已选择到的元素中具有属性attr，并且属性值为value的元素
3. selector[attr^=v] 获取所有已选择到的元素中具有属性attr，并且属性值以v开头的元素
4. selector[attr$=v] 获取所有已选择到的元素中具有属性attr，并且属性值以v结尾的元素
5. selector[attr*=v] 获取所有已选择到的元素中具有属性attr，并且属性值以v结尾的元素
6. selector[attr!=value] 获取所有已选择到的元素中不具有属性attr，并且属性值不为value的元素

---

后代选择器

选择器一定要先选择到后代元素，是对选择到的后代元素的过滤

1. selector:first-child
   获取每个selector元素中第一个子元素（每个父元素的第一个子元素）

与selector:first的区别，获取所有selector元素的子元素中的第一个（只有一个）

2. selector:last-child
   获取每个selector元素中最后一个子元素（每个父元素的最后一个子元素）
   注意与selector:last的区别

3. selector:nth-child(index)
   获取每个selector元素中索引为index的子元素**【注意】index从1开始**

4. selector:first-of-type
   获取每个selector元素中每种类型子元素中的第一个

5. selector:last-of-type
   获取每个selector元素中每种类型子元素中的最后一个

6. selector:only-child
   获取每个selector元素中独生子子元素

---

表单过滤器

主要是对选择的表单元素进行过滤HTML表单元素(<button>,<input>,<optgroup>,<option>,<select>,和<textarea>)

1. :enabled 选取所有可用元素
2. :disabled 选取所有不可用元素
3. :checked 选取所有被选中的元素，用于复选框和单选框
4. :selected 选取所有被选中的选项元素，该选择器只适用于<option>
5. :focus 选择当前获取焦点的元素
6. :input 选取所有的<input><textarea><select><button>元素。
   注意：$(":input")是选择可以让用户输入的标签元素,而$("input')是选择名字为input的标签元素
7. :text 选取所有的单行文本框
8. :password 选取所有的密码框
9. :radio 选取所有的单选框
10. :checkbox 选取所有的多选框
11. :submit 选取所有的提交按钮
12. :image 选取所有input类型为image的表单元素
13. :reset 选取所有input类型为reset的表单元素
14. :button 选取所有input类型为button的表单元素
15. :file 选取所有input类型为file的表单元素