在页面中为某个元素添加属性或者事件时,必须先准确地找到该元素——在jQuery库中,可以通过选择器实现这一重要的核心功能。
jQuery选择器继承了CSS与Path语言的部分语法,允许通过标签名、属性名或内容对DOM元素进行快速、准确的选择,而不必担心浏览器的兼容性,通过jQuery选择器对页面元素的精准定位,才能完成元素属性和行为的处理。
在传统的JavaScript代码中,给页面中元素设置事务时必须先找到该元素,然后赋予相应的属性或事件;如果该元素在页面中不存在或被前面代码所删除,那么浏览器将提示运行出错信息,影响后续代码的执行。因此,在Javascript代码中,为了避免显示这样的出错信息,先要检测该元素是否存在,然后再运行其属性或事件代码,从而导致代码冗余,影响执行效率。
在jQuery选择器定位页面元素时,无需考虑所定位的元素在页面中是否存在,即使该元素不存在,浏览器也不提示出错信息,极大地方便了代码的执行效率。
根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中过滤选择器中可分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种。
1)基本选择器
基本选择器是jQuery中使用最频繁的选择器,它由元素Id、Class、元素名、多个选择符组成,通过基本选择器可以实现大多数页面元素的查找。
选择器 | 功能 | 返回值 |
#id | 根据给定的ID匹配一个元素 | 单个元素 |
element | 根据给定的元素名匹配所有元素 | 元素集合 |
.class | 根据给定的类匹配元素 | 元素集合 |
* | 匹配所有元素 | 元素集合 |
selector1, selectorN | 将每一个选择器匹配到元素合并后一起返回 | 元素集合 |
2)层次选择器
层次选择器通过DOM元素间的层次关系获取元素,其主要的层次关系包括后代、父子、相邻、兄弟关系,通过其中某类关系可以方便快捷地定位元素。其详细说明表如下:
选择器 | 功能 | 返回值 |
ancestor descendant | 根据祖先元素匹配所有的后代元素 | 元素集合 |
parent > child | 根据父元素匹配所有的子元素 | 元素集合 |
prev + next | 匹配所有紧接在prev元素后的相邻元素 | 元素集合 |
prev ~ siblings | 匹配prev元素之后的所有兄弟元素 | 元素集合 |
3)简单过滤选择器
过滤选择器根据某类过滤规则进行元素的匹配,书写时都以冒号(:)开头,其详细说明如表所示:
选择器 | 功能 | 返回值 |
first()或:first | 获取第一个元素 | 单个元素 |
last()或:last | 获取最后一个元素 | 单个元素 |
:not(selector) | 获取除给定选择器外的所有元素 | 元素集合 |
:even | 获取所有索引值为偶数的元素,索引号从0开始 | 元素集合 |
:odd | 获取所有索引值为奇数的元素,索引号从0开始 | 元素集合 |
:eq(index) | 获取指定索引值的元素,索引号从0开始 | 单个元素 |
:gt(index) | 获取所有大于给定索引值的元素,索引号从0开始 | 元素集合 |
:lt(index) | 获取所有小于给定索引值的元素,索引号从0开始 | 元素集合 |
:header | 获取所有标题类型的元素,如h1、h2…… | 元素集合 |
:animated | 获取正字啊执行动画效果的元素 | 元素集合 |