【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")