jQuery学习笔记（二）--jQuery选择器

在页面中为某个元素添加属性或者事件时，必须先准确地找到该元素——在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元素之后的所有兄弟元素	元素集合

prev + next可以使用.next()代替，而prev ~ slibings可以使用nextAll()代替。

3）简单过滤选择器

过滤选择器根据某类过滤规则进行元素的匹配，书写时都以冒号(:)开头，其详细说明如表所示：

选择器	功能	返回值
first()或：first	获取第一个元素	单个元素
last()或：last	获取最后一个元素	单个元素
：not(selector)	获取除给定选择器外的所有元素	元素集合
：even	获取所有索引值为偶数的元素，索引号从0开始	元素集合
：odd	获取所有索引值为奇数的元素，索引号从0开始	元素集合
：eq(index)	获取指定索引值的元素，索引号从0开始	单个元素
：gt(index)	获取所有大于给定索引值的元素，索引号从0开始	元素集合
：lt(index)	获取所有小于给定索引值的元素，索引号从0开始	元素集合
：header	获取所有标题类型的元素，如h1、h2……	元素集合
：animated	获取正字啊执行动画效果的元素	元素集合