jquery选择器

Posted 2020-08-21

在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）表单选择器