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 | 获取所有文件域 | 元素集合 |