首页 > 代码库 > 二、jquery选择器
二、jquery选择器
在jquery库中,可以通过选择器实现DOM元素快捷选择这一重要的核心功能。
1.选择器的优势
(1)代码更简单
由于在jquery库中,封装了大量可以通过选择器直接调用的方法或函数,使编写代码更加简单轻松,简单几行代码就可以实现较为复杂的功能。
(2)完善的检测机制
在传统的javascript代码中,给页面中某元素设置事务时必须先找到元素,然后赋予相应的属性或时间;如果该元素在页面中不存在或被前面代码所删除,那么浏览器将提示运行出出错信息,影响后续代码的执行。因此,在javascript代码中,为了避免显示这样的出错信息,先要检测钙元素是否存在,然后在运行其属性货时间代码,从而导致代码冗余,影响执行效率。
在jquery选择器定位页面元素时,无需考虑所定位页面元素是否存在,即使该页面不存在也元素,浏览器也不会提示出错信息,极大地方便了代码的执行效率。
2.jquery选择器的类型
根据所获取页面中元素的不同,可以将jquery选择器分为四大类型:基本选择器、层次选择器、过滤选择器、表单选择器。其中在过滤选择器中又可以分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、子元素过滤选择器、表单对象属性过滤选择器。
其分类结构如图所示:
(1)基本选择器
选择器 | 功能描述 | 返回值 |
#id | 根据给定的ID 匹配一个元素 | 单个元素 |
element | 根据给定元素名匹配所有元素 | 元素集合 |
.class | 根据给定类型匹配元素 | 元素集合 |
* | 匹配所有元素 | 元素集合 |
selsctor1,selectorN | 将每一个选择器匹配到的元素合并后一起返回 | 元素集合 |
(2)层次选择器
选择器 | 功能描述 | 返回值 |
ancestors descendant | 根据祖先元素匹配所有的后代元素 | 元素集合 |
parent>child | 根据父元素匹配所有的子元素 | 元素集合 |
prev + next | 匹配所有进阶在prev元素后的响铃元素 | 元素集合 |
prev ~ silings | 匹配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 | 获取正在执行动画效果的元素 | 元素集合 |
内容过滤选择器
可见性过滤选择器
属性过滤选择器
子元素过滤选择器
子元素过滤选择器
表单对象属性过滤选择器
(4)表单选择器
二、jquery选择器
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。