jQuery(2)
基础选择器
基础选择器是jQuery中使用最频繁的选择器,它由元素id、class、多个选择符组成,通过基本选择器可以实现大多数页面元素的查找,如下表格:
选择器 | 功能 | 返回值 |
---|---|---|
#id | 根据给定的id匹配一个元素 | 单个元素 |
element | 根据给定的元素名匹配所有元素 | 元素集合 |
.class | 根据给定的类匹配元素 | 元素集合 |
* | 匹配所有元素 | 元素集合 |
selector1,selectorN | 将每一个选择器匹配到的元素合并后一起返回 | 元素集合 |
jQuery层次选择器
层次选择器通过DOM元素间的层次关系获取元素,其主要的层次关系包括后代、父子、相邻、兄弟关系,通过其中某类关系可以方便快捷地定位元素,详细说明如下表:
选择器 | 功能 | 返回值 |
---|---|---|
ancestor descendant | 根据祖先元素匹配所有的后代元素 | 元素集合 |
parent > child | 根据父元素匹配所有的子元素 | 元素集合 |
prev + next | 匹配所有紧接在prev元素后的相邻元素 | 元素集合 |
prev ~ siblings | 匹配prev元素之后的所有兄弟元素 | 元素集合 |
提示:ancestor descendant 与 parent > child 所选择的元素集合是不同的,前者的层次关系是祖先与后代,而后者是父子关系;另外 prev + next 可以使用 .next() 代替,而prev ~ siblings可以使用nextAll()代替。
jQuery 简单过滤选择器
过滤选择器根据某类g过滤规则进行元素的匹配,书写时都以冒号(:)开头;简单过滤选择器是过滤选择器中使用最广泛的一种,详细如下表:
选择器 | 功能 | 返回值 |
---|---|---|
first()或 :first | 获取第一个元素 | 单个元素 |
parent >last() 或 :last | 获取最后一个元素 | 单个元素 |
:not(selector) | 获取除给定选择器外的所有元素 | 元素集合 |
:even | 获取所有索引值为偶数的元素,索引号从0开始 | 元素集合 |
:odd | 获取所有索引值为奇数的元素,索引号从0开始 | 元素集合 |
:eq(index) | 获取指定索引值得元素,索引号从0开始 | 单个元素 |
:gt(index) | 获取所有大于给定索引值的元素,索引号从0开始 | 元素集合 |
:lt(index) | 获取所有小于给定索引值的元素,索引号从0开始 | 元素集合 |
:header | 获取所有标题类型的元素,如h1、h2...... | 元素集合 |
:animated | 获取正在执行动画效果的元素 | 元素集合 |
内容过滤选择器
内容过滤选择器根据元素中的文字内容或所包含的子元素特征获取元素,其文字内容可以模糊或者绝对匹配进行元素定位,详细如下:
选择器 | 功能 | 返回值 |
---|---|---|
:contains(text) | 获取包含给定文本的元素 | 元素集合 |
:empty | 获取所有不包含子元素或者文本的空元素 | 元素集合 |
:has(selector) | 获取含有选择器所匹配的元素的元素 | 元素集合 |
:parent | 获取获取含有子元素或者文本的元素 | 元素集合 |
可见性过滤选择器
可见性过滤选择器根据元素是否可见的特征获取元素,详细如下:
选择器 | 功能 | 返回值 |
---|---|---|
:hidden | 获取所有不可见元素,或者type为hidden的元素 | 元素集合 |
:visible | 获取所有的可见元素 | 元素集合 |
子元素过滤选择器
在页面开发中,总是遇到突出指定某行的需求。如果实现单个表格的显示,用基本过滤选择器:eq(index)就能实现;但如果是大量数据的选择需求可以通过子元素过滤选择器轻松获取所有父元素中指定的某个元素。详细如下:
选择器 | 功能 | 返回值 |
---|---|---|
:nth-child(eq|even|odd|index) | 获取每个元素下的特定元素,索引号从1开始 | 元素集合 |
:first-child | 获取每个父元素下的第一个子元素 | 元素集合 |
:last-child | 获取每个父元素下的最后一个子元素 | 元素集合 |
:only-child | 获取每个父元素下的仅有一个子元素 | 元素集合 |
表单对象属性过滤选择器
表单对象属性过滤选择器通过表单中的某对象属性特征获取该类元素,如enabled、disabled、checked、selected属性。详细如下:
选择器 | 功能 | 返回值 |
---|---|---|
:enabled | 获取表单中所有属性为可用的元素 | 元素集合 |
:disabled | 获取表单中所有属性为不可用的元素 | 元素集合 |
:checked | 获取表单中所有被选中的元素 | 元素集合 |
:selected | 获取表单中素有被选中option的元素 | 元素集合 |