jQuery选择器的学习

jQuery的核心在于它的选择器，通过观看视频和阅读，发现jQuery选择器大体上的分类可分为这么几种（不同人方式不同，这里选择一个自认为比较好的）：

1、基础选择器（对应api文档中的基本选择器和层次选择器）

2、过滤选择器（对应api文档中的过滤选择器和表单选择器）

3、筛选选择器（对应api里“筛选”的分类里，不在“选择器”的分类中）

1、基础选择器（对应api文档中的基本选择器和层次选择器）

1.1 基础选择器之基本选择器

基本选择器是jQuery中使用最频繁的，也是大多数人会用经常用的。

基本选择器语法

选择器	功能描述	返回值
#ID	根据给定的ID匹配一个元素	单个集合
element	根据给定的元素名匹配所有的元素	元素集合
. class	根据给定的类匹配元素	元素集合
*	匹配所有元素	元素集合
selector1,...,selectorN	将每一个选择器匹配到的元素合并后一起返回	元素集合

基本选择器由于经常使用，难点不大，需要注意的是 “selector1,...,selectorN”与selector1 ... selectorN”的区别，逗号加不加有很大的区别，前者返回所有在列的     　　　  selector元素集合，而不加逗号表示依次寻找满足祖先关系的selector，并返回最后一个selector元素的集合。

1.2 基础选择器之层次选择器

层次选择器通过DOM元素间的层次关系获取元素，器主要的层次关系包括后代、父子、相邻、兄弟关系。

层次选择器语法

选择器	功能描述	返回值
ancestor descendant	根据祖先元素匹配所有的后代元素	元素集合
parent > child	根据父元素匹配所有的子元素	元素集合
prev + next	匹配所有紧接在prev元素后的相邻元素	元素集合
prev ~ siblings	匹配prev元素之后的所有兄弟元素	元素集合

ancestor descendant 与 parent > child 所选择的元素集合石不同的，前者的层次关系是祖先与后代（向下多级），而后者是父子关系（向下一级）；另外，prev +next 可以使用.next()代替，而prev ~ siblings可以用nextAll()代替。另，siblings()方法与选择器prev~siblings区别在于，前者获取全部的相邻兄弟元素，不分前后，而后者仅获取标记后面全部相邻元素，不能获取前面全部。这里的ancestor、descendant、parent、child、prev、next、siblings等在实际使用中用基本选择器中的元素 代替，如#ID、.class、element等。

  2、过滤选择器（对应api文档中的过滤选择器和表单选择器）

       在jquery中所有的过滤选择器大都有一个特点，都以冒号开头（属性过滤选择器除外），且写在括号内；

2.1过滤选择器

根据《jQuery权威指南》 过滤选择器分为以下几大类：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器，分别以表格的形式呈现出来。

简单过滤选择器语法

选择器	功能描述	返回值
first() 或 :first	获取第一个元素	单个元素
last() 或 :last	获取最后一个元素	单个元素
:not(selector)	获取除给定选择器外的所有元素	元素集合
:even	获取所有索引值为偶数的元素，索引号从0开始	元素集合
:odd	获取所有索引值为奇数的元素，索引号从0开始	元素集合
:eq(index)	获取指定索引值的元素，索引号从0开始	单个元素
:gt(index)	获取所有大于给定索引值的元素，索引号从0开始	元素集合
:lt(index)	获取所有小于给定索引值的元素，索引号从0开始	元素集合
:header	获取所有标题类型的元素，如h1、h2.......	元素集合
:animated	获取正在执行动画效果的元素（可给正在执行动画的元素添加效果）	元素集合

:header 与 :animated 平时用的不过，给出事例：

内容过滤选择器

选择器	功能描述	返回值
:contains(text)	获取包含给定文本的元素	元素集合
:empty	获取所有不包含子元素或者文本元素的空元素	元素集合
:has(selector)	获取含有选择器所匹配的元素	元素集合
:parent	获取含有子元素或者文本的元素（与:empty对应）	元素集合

在:contains(text)内容过滤选择器中，如果是查找字母，则有大小写的区别。

可见性过滤选择器语法

选择器	功能描述	返回值
:hidden	获取所有不可见元素，或者type为hidden的元素	元素集合
:visible	获取所有可见元素	元素集合

“:hidden”选择器所选择的不仅包括样式为display:none所有元素，而且还包括属性type=“hidden”和样式为visibility:hidden的所有元素。

属性过滤选择器

选择器	功能描述	返回值
[attribute]	获取包含给定属性的元素，下面是在此基础上的约束	元素集合
[attribute=value]	获取等于给定的属性值是某个特定值的元素	元素集合
[attribute!=value]	获取不等于给定的属性是某个特定值的元素	元素集合
[attribute^=value]	获取给定的属性是以某些值开始的元素	元素集合
[attribute$=value]	获取给定的属性是以某些值结尾的元素	元素集合
[attribute*=value]	获取给定的属性中包含某些值得元素	元素集合
[selector1]...[selectorN]	获取同时满足多个条件的符合属性的元素	元素集合

书写格式一般为$('#div[attribute^=value]')；常用的attribute有id、name、value、style、title、class等；注意区别attribute和property的区别

子元素过滤选择器语法

选择器	功能描述	返回值
:nth-child(eq|even|odd|index)	获取每个父元素下的特定位置元素，索引号从1开始	元素集合
:first-child	获取每个父元素下的第一个子元素	元素集合
:last-child	获取每个父元素下的最后一个子元素	元素集合
:only-child	获取每个父元素下的仅有的一个子元素	元素集合

表单对象属性过滤选择器语法

选择器	功能描述	返回值
:enabled	获取表单中所有属性为可用的元素	元素集合
:disabled	获取表单中所有属性为不可用的元素	元素集合
:checked	获取表单中所有被选中的元素	元素集合
:selected	获取表单中所有被被选中option的元素	元素集合

常用格式$('#form1 input:enabled')、$('#form1 input:checked')、$('select option:selected')。

2.2表单选择器

表单选择器语法

选择器	功能描述	返回值
:input	获取所有input、textarea、select	元素集合
:text	获取所有单行文本框	元素集合
:password	索取所有密码框	元素集合
:radio	获取所有单选按钮	元素集合
:checkbox	获取所有复选框	元素集合
:submit	获取所有提交按钮	元素集合
:image	获取所有图像域	元素集合
:reset	获取所有重置按钮	元素集合
:button	获取所有按钮	元素集合
:file	获取所有文件域	元素集合