jQuery选择器总结介绍

在Dom 编程中我们只能使用有限的函数根据id 或者TagName 获取Dom 对象. 然而在jQuery 中则完全不同,jQuery 提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象以jQuery 包装集的形式返回。本章主要对常用的jQuery 选择器进行一个介绍及归类。

jQuery 选择器大体上可分为 4 类：基本选择器、层次选择器、过滤选择器、表单选择器。其中过滤选择器可以分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器。具体示例图可见如下：

选择器

｜－基本选择器

｜－层次选择器

｜－表单选择器

｜－过滤选择器

          ｜—简单过滤选择器

          ｜－内容过滤选择器

          ｜－可见性过滤选择器

          ｜－属性过滤选择器

          ｜－子元素过滤选择器

          ｜－表单对象属性过滤选择器

下面就分别就每种选择器进行一个简要的介绍：

基本选择器

它是 jQuery 中使用最频繁的选择器，它由元素 Id 、 Class 、元素名、多个选择符组成，通过基本选择器可以实现大多数页面元素的查找。

选择器	功能	返回值
#id	根据给定的 ID 匹配一个元素	单个元素
element	根据给定的元素名匹配所有元素	元素集合
.class	根据给定的类匹配元素	元素集合
*	匹配所有元素	元素集合
Selector1, selector N	将每一个选择器匹配到的元素合并后一起返回	元素集合

层次选择器

         它是通过 DOM 元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过某些关系可以方便快捷地定位元素。

选择器	功能	返回值
Ancestor  descendant	根据祖先元素匹配所有的后代元素	元素集合
Parent > child	根据父元素匹配所有的子元素	元素集合
Prev + next	匹配所有紧接在 prev 元素后的相邻元素	元素集合
Prev ~sibling	匹配 prev 元素之后的所有兄弟元素	元素集合

注： ancestor descent 与 parent > child 所选择的元素集合是不同的，前者的层次关系是祖先与后代，而后者是父子关系；另外， prev + next 可以使用 .next() 代替，而 prev ~siblings 可以使用 .nextAll() 代替。

表单选择器

表单选择器专为表单量身打造，通过它可以在页面中快速定位某表单对象，直接获取表单对象的方法。

选择器	功能	返回值
:input	获取所有 input 、 textarea 、 select	元素集合
:text	获取所有单行文本框	元素集合
:password	获取所有密码框	元素集合
:radio	获取所有单选按钮	元素集合
:checkbox	获取所有复选框	元素集合
:submit	获取所有提交按钮	元素集合
:image	获取所有图像域	元素集合
:reset	获取所有重置按钮	元素集合
:button	获取所有按钮	元素集合
:file	获取所有文件域	元素集合

简单过滤选择器

过滤选择器根据某类过滤规则进行元素的匹配，书写时都以冒号（：）开头；简单过滤选择器是某中使用最广泛的一种。

选择器	功能	返回值
:first 或 first()	获取第一个元素	单个集合
: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	获取所有可见的元素	元素集合

属性过滤选择器

根据元素的某个属性获取元素，如 ID 号或匹配属性值的内容，并以“ [ ”开始，以“ ] ”结束。

选择器	功能	返回值
[attribute]	获取包含给定属性的元素	元素集合
[attribute=value]	获取等于给定的属性是某个特定值的元素	元素集合
[attribute!=value]	获取不等于给定的属性是某个特定值的元素	元素集合
[attribute^=value]	获取给定的属性是以某些值开始的元素	元素集合
[attribute$=value]	获取给定的属性是以某些值结尾的元素	元素集合
[attribute*=value]	获取给定的属性是以包含某些值的元素	元素集合
[selector1] [selectorN]	获取满足多个条件的复合属性的元素	元素集合

子元素过滤选择器

子元素过滤选择器能够满足指定到某行的需求，通过它可以轻松的获取所有父元素中指定的某个元素。

选择器	功能	返回值
:nth-child(eq|even|odd)	获取每个父元素下的特定位置元素，索引从 1 开始	元素集合
:first-child	获取每个父元素下的第一个子元素	元素集合
:last-child	获取每个父元素下的最后一个子元素	元素集合
:only-child	获取每个父元素下的仅有的一个元素	元素集合

表单对象属性过滤选择器

表单对象属性过滤选择器通过表单中的某些对象属性特征获取该类元素，如 enabled 、 disabled 、 checked 、 selected 属性。

选择器	功能	返回值
:enabled	获取表单中所有属性为可用的元素	元素集合
:disabled	获取表单中所有属性为不可用的元素	元素集合
:checked	获取表单中所有被选中的元素	元素集合
:selected	获取表单中所有被选中 option 的元素	元素集合

 

上述只是简单的对 jQuery 中的选择器进行了归纳及汇总。下面将结合一个具体的实例（图书类目）来介绍选择器的使用。

1 ）、在页面中创建一个导航条，单击标题上的“展开”链接，可以将图书类目显示出来，并将其上的方案变为“隐藏”，同时在右下角显示简化字样。反之亦然。

2 ）、单击“简化”链接，隐藏指定的内容，并将“简化”字样变为“更多”。反之亦然。

功能实现：

        

         /*

           *     用于将 jquery 所需要的类库添加进来

         */

        

        

        

                  

                           

图书分类

                            隐藏

                  

                  

                           

                                    

• 小说 (1100)

                                    

• 文艺 (900)

                                    

• 青春 (600)

                                    

• 少儿 (3000)

                                    

• 生活 (400)

                                    

• 社科 (6000)

                                    

• 伦理 (5000)

                                    

• 计算机 (2000)

                                    

• 教育 (9000)

                                    

• 工具书 (666)

                                    

• 引进版 (3333)

                                    

• 其它书 (55555)

                           

                  

                  

                            简化

                  

        

实现效果－初次打开效果如下：

点击“隐藏”链接时如下：

点击“展开”链接时如下：

点击“简化”链接时如下：