【jQuery】jQuery选择器

jQuery选择器

jQuery选择器继承了CSS 与 Path 语言的部分语法，允许通过标签名，属性名或内容对DOM元素进行快速，准确的选择。

• 代码更简单

• 完善的检测机制

在jQuery选择器定位页面元素时，无需考虑所定位的元素在页面中是否存在，即使该元素不存在，浏览器也不会提示出错信息。

jQuery选择器详解

基本选择器

基本选择器是jQuery中使用最频繁的选择器。

它由元素ID，Class，元素名，多个选择符组成。

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

层次选择器

通过DOM元素之间的关系获取元素，其主要的层次关系包括后代，父子，相邻，兄弟关系：

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

ancestor descendant 与parent > child 所选择的元素集合是不同的，前者的层次关系是祖先与后代（祖先中包含的所有后代，父子，爷孙，...），而后者是父子关系；

另外， prev + next 可以使用.next() 代替， prev - siblings 可以使用nextAll() 代替。

siblings()与 prev - siblings的区别在于：前者获取全部的相邻元素，部分前后；而后者仅获取标记后面全部相邻元素，不能获取前面部分。

简单过滤选择器

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

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

例如：

$("li:first")
$("li:eq(1)")
$(":header")

内容过滤选择器

根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位：

选择器	功能	返回值
:contains(text)	获取包含给定文本的元素	元素集合
:empty	获取所有不包含子元素或者文本的空元素	元素集合
:has(selector)	获取含有选择器所匹配的元素的元素	元素集合
:parent	获取含有子元素或者文本的元素	元素集合

例如：

$("div:contains('A')")
$("div:empty")
$("div:has(span)")
$("div:parent")

可见性过滤选择器

根据元素是否可见的特征获取元素：

选择器	功能	返回值
:hidden	获取所有不可见元素，或者type为hidden的元素	元素集合
:visible	获取所有的可见元素	元素集合

属性过滤选择器

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

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

例如：

$("div[id]")
$("div[title='A']")
$("div[id='divAB'][title*='B']")

子元素过滤选择器

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

例如：

$("li:nth-child(2)")
$("li:first-child")
$("li:last-child")

表单对象属性过滤选择器

通过表单中的某对象属性特征获取该类元素，如enabled,disabled,checked,selected属性：

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

例如：

$("#form1 input:enabled")
$("#form1 input:checked")
$("selector option:selected")

表单选择器

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

例如：

$("#form1 :text")
$("#form1 :password")
#("#form1 :radio")