详解jQuery的选择器

1.基本选择器

　　基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM对象。在网页中，每个id名称只能使用一次，class允许重复使用。

　　♠ #id　　

　　　　描述：根据给定的id匹配一个元素。

　　　　返回：单个元素。

　　　　示例：$("#test")选取id为test的元素。

　　♠ .class

　　　　描述：根据给定的类名匹配元素。

　　　　返回：集合元素。

　　　　示例：$(".test")选取class为test的元素。

　　♠ element

　　　　描述：根据给定的元素名匹配元素。

　　　　返回：集合元素。

　　　　示例：$("p")选取所有的<p>元素。

　　♠ *

　　　　描述：匹配所有元素。

　　　　返回：集合元素。

　　　　示例：$("*")选取所有的元素。

　　♠ selector1,selector2,......,selectorN

　　　　描述：将每一个选择器匹配到的元素合并后一起返回。

　　　　返回：集合元素。

　　　　示例：$("div,span,p.myClass")选取所有的<div>,<span>和拥有class为myClass的<p>标签的一组元素。

2.层次选择器

　　如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素，子元素，相邻元素合同辈元素等，那么层次是一个非常好的选择。

　　♠ $("ancestor descendant")

　　　　描述：选取ancestor元素里的所有descendant(后代)元素。

　　　　返回：集合元素。

　　　　示例：$("div span")选取<div>里的所有的<span>元素。

　　♠ $("parent>child")

　　　　描述：选取parent元素下的child（子）元素，与$("ancestor descendant") 的区别在于前者（$("parent>child")）仅选择符合的子元素（符合的孙元素不选定），后者选择所有符合的后代元素。

　　　　返回：集合元素。

　　　　示例：$("div>span")选取<div>元素下元素名是<span>的子元素。

　　♠ $("prev+next")

　　　　描述：选取紧接在prev元素后的next元素。

　　　　返回：集合元素。

　　　　示例：$(".one+div")选取class为one的下一个<div>同辈元素。

　　♠ $("prev~siblings")

　　　　描述：选取prev元素之后的所有siblings元素。

　　　　返回：集合元素。

　　　　示例：$("#two~div")选取id为two的元素后面的所有<div>同辈元素。

　　在层次选择器中，第1个和第2个选择器比较常用，而后面两个因为在jQuery里可以用更加简单的方法代替，所以试用的几率相对少些。

　　可以使用next()方法来代替$('prev+next')选择器。$(".one+div"); 等价于 $(".one").next("div");

　　可以使用nextAll()方法来代替$('prev~siblings')选择器。$("#prev~div");等价于$(“”#prev“”).nextAll("div");

　　siblings()方法与$("#prev~div")选择器的比较：$("#prev~div")只选择"prev"后面的<div>元素。siblings()方法与前后位置无关，只要是同辈节点就都能匹配。

3.过滤选择器

　　基本过滤选择器

　　过滤选择器主要是通过特定的过滤规则来筛选选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，都以一个冒号（:）开头。按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

　　♠ :first

　　　　描述：选取第一个元素。

　　　　返回：单个元素。

　　　　示例：$("div:first")选取所有<div>元素中第一个<div>元素。

　　♠ :last

　　　　描述：选取最后一个元素。

　　　　返回：单个元素。

　　　　示例：$("div:last")选取所有<div>元素中最后一个<div>元素。

　　♠ :not(selector)

　　　　描述：去除所有与给定选择器匹配的元素。

　　　　返回：集合元素。

　　　　示例：$("input:not(.myClass)")选取class不是myClass的<input>元素。

　　♠ :even

　　　　描述：选取索引是偶数的所有元素，索引从0开始。

　　　　返回：集合元素。

　　　　示例：$("input:even")选取索引是偶数的<input>元素。

　　♠ :odd

　　　　描述：选取索引是奇数的所有元素，索引从0开始。

　　　　返回：集合元素。

　　　　示例：$("input:odd")选取索引是奇数的<input>元素。

　　♠ :eq(index)

　　　　描述：选取索引等于index的元素（index从0开始）。

　　　　返回：单个元素。

　　　　示例：$("input:eq(1)")选取索引等于1的<input>元素。

　　♠ :gt(index)

　　　　描述：选取索引大于index的元素（index从0开始）。

　　　　返回：集合元素。

　　　　示例：$("input:gt(1)")选取索引大于1的<input>元素（注：大于1，而不包括1）。

　　♠ :lt(index)

　　　　描述：选取索引小于index的元素（index从0开始）。

　　　　返回：集合元素。

　　　　示例：$("input:lt(1)")选取索引小于1的<input>元素（注：小于1，而不包括1）。

　　♠ :header

　　　　描述：选取所有的标题元素，如h1,h2,h3等。

　　　　返回：集合元素。

　　　　示例：$(":header")选取网页中所有的<h1>、<h2>、<h3>...

　　♠ :animated

　　　　描述：选取当前正在执行动画的所有元素。

　　　　返回：集合元素。

　　　　示例：$("div:animated")选取正在执行动画的<div>元素。

　　♠ :focus

　　　　描述：选取当前获取焦点的元素。

　　　　返回：集合元素。

　　　　示例：$(":focus")选取当前获取焦点的元素。

　　内容过滤选择器

　　内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。

　　♠ :contains(text)

　　　　描述：选取含有文本内容为"text"的元素。

　　　　返回：集合元素。

　　　　示例：$("div:contains('我')")选取含有文本“我”的<div>元素。

　　♠ :empty

　　　　描述：选取不包含子元素或者文本的空元素。

　　　　返回：集合元素。

　　　　示例：$("div:empty")选取不包含子元素（包含文本元素）的<div>空元素。

　　♠ :has(selector)

　　　　描述：选取含有选择器所匹配元素的元素。

　　　　返回：集合元素。

　　　　示例：$("div:has(p)")选取含有<p>元素的<div>元素。

　　♠ :parent

　　　　描述：选取含有子元素或者文本的元素。

　　　　返回：集合元素。

　　　　示例：$("div:parent")选取拥有子元素（包括文本元素）的<div>元素。

　　可见性过滤选择器

　　可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。

　　♠ :hidden

　　　　描述：选取所有不可见的元素。

　　　　返回：集合元素。

　　　　示例：$(":hidden")选取所有不可见的元素。包括<input type="hidden"/>，<div style="display:none;">和<div style="visibility:hidden;">等元素。如果只想选取<input>元素，可以使用$("input:hidden")。

　　♠ :visible

　　　　描述：选取所有可见的元素。

　　　　返回：集合元素。

　　　　示例：$("div:visible")选取所有可见的<div>元素。

　　属性过滤选择器

　　属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。

　　♠ [attribute]

　　　　描述：选取拥有此属性的元素。

　　　　返回：集合元素。

　　　　示例：$("div[id]")选取拥有属性id的元素。

　　♠ [attribute=value]

　　　　描述：选取属性的值为value的元素。

　　　　返回：集合元素。

　　　　示例：$("div[title=test]")选取属性title为"test"的<div>元素。

　　♠ [attribute!=value]

　　　　描述：选取属性的值不等于value的元素。

　　　　返回：集合元素。

　　　　示例：$("div[title!=test]")选取属性title不等于"test"的<div>元素。（注：没有属性title的<div>元素也会被选取）

　　♠ [attribute^=value]

　　　　描述：选取属性的值以value开始的元素。

　　　　返回：集合元素。

　　　　示例：$("div[title^=test]")选取属性title以"test"开始的<div>元素。

　　♠ [attribute$=value]

　　　　描述：选取属性的值以value结束的元素。

　　　　返回：集合元素。

　　　　示例：$("div[title$=test]")选取属性title以"test"结束的<div>元素。

　　♠ [attribute*=value]

　　　　描述：选取属性的值含有value的元素。

　　　　返回：集合元素。

　　　　示例：$("div[title*=test]")选取属性title含有"test"的<div>元素。

　　♠ [attribute|=value]

　　　　描述：选取属性等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-”）的元素。

　　　　返回：集合元素。

　　　　示例：$("div[title|='en']")选取属性title等于en或以en为前缀（该字符串后跟一个连字符‘-’）的元素。

　　♠ [attribute~=value]

　　　　描述：选取属性用空格分隔的值中包含一个给定的值的元素。

　　　　返回：集合元素。

　　　　示例：$("div[title~='uk']")选取属性title用空格分隔的值中包含字符uk的元素。

　　♠ [attribute1][attribute2][attributeN]

　　　　描述：用属性选择器合并成一个复古属性选择器，满足多个条件。每选择一次，缩小一次范围。

　　　　返回：集合元素。

　　　　示例：$("div[id][title$='test']")选取拥有属性id，并且属性title以"test"结束的<div>元素。

　　子元素过滤选择器

　　♠ :nth-child(index/even/odd/equation)

　　　　描述：选取每个父元素下的第index个子元素或者奇偶元素。（index从1算起）

　　　　返回：集合元素。

　　　　示例：:eq(index)只匹配到一个元素，而:nth-child将为每一个父元素匹配子元素，并且:nth-child(index)的index是从1开始的，而:eq(index)是从0开始的。

　　♠ :first-child

　　　　描述：选取每个父元素的第1个子元素

　　　　返回：集合元素。

　　　　示例：:first只返回单个元素，而:first-child选择符将为每个父元素匹配第1个子元素。例如$("ul li:first-child");选取每个<ul>中第1个<li>元素。

　　♠ :last-child

　　　　描述：选取每个父元素的最后1个子元素

　　　　返回：集合元素。

　　　　示例：:last只返回单个元素，而:last-child选择符将为每个父元素匹配最后1个子元素。例如$("ul li:last-child");选取每个<ul>中最后1个<li>元素。

　　♠ :only-child

　　　　描述：如果某个元素是它父元素中唯一的子元素，那么将会被匹配。如果父元素中含有其他元素，则不会匹配。

　　　　返回：集合元素。

　　　　示例：$("ul li:only-child")在<ul>中选取是唯一子元素的<li>元素。

　　表单对象属性过滤选择器

　　主要是对所选择的表单元素进行过滤，例如选择被选中的下拉框，多选框等元素。

　　♠ :enable

　　　　描述：选取所有可用元素。

　　　　返回：集合元素。

　　　　示例：$("#form1 :enable");选取id为"form1"的表单内的所有可用元素。

　　♠ :disabled

　　　　描述：选取所有不可用元素。

　　　　返回：集合元素。

　　　　示例：$("#form2 :disabled")选取id为“form2”的表单内的所有不可用元素。

　　♠ :checked

　　　　描述：选取所有被选中的元素(单选框，复选框)。

　　　　返回：集合元素。

　　　　示例：$("input:checked");选取所有被选中的<input>元素。

　　♠ :selected

　　　　描述：选取所有被选中的选项元素（下拉列表）。

　　　　返回：集合元素。

　　　　示例：$("select :selected");选取所有被选中的选项元素。

4.表单选择器

　　为了使用户能够更加灵活的操作表单，jQuery中专门加入了表单选择器。利用这个选择器，能极其方便的获取到表单的某个或某类型的元素。

　　♠ :input

　　　　描述：选取所有<input>、<textarea>、<select>和<button>元素。

　　　　返回：集合元素。

　　　　示例：$(":input")选取所有<input>、<textarea>、<select>和<button>元素。

　　♠ :text

　　　　描述：选取所有的单行文本框。

　　　　返回：集合元素。

　　　　示例：$(":text")选取所有的单行文本框。

　　♠ :password

　　　　描述：选取所有的密码框。

　　　　返回：集合元素。

　　　　示例：$(":password")选中所有的密码框。

　　♠ :radio

　　　　描述：选取所有的单选框。

　　　　返回：集合元素。

　　　　示例：$(":radio")选取所有的单选框。

　　♠ :checkbox

　　　　描述：选取所有的多选框。

　　　　返回：集合元素。

　　　　示例：$(":checkbox")选取所有的复选框。

　　♠ :submit

　　　　描述：选取所有的提交按钮。

　　　　返回：集合元素。

　　　　示例：$(":submit")选取所有的提交按钮。

　　♠ :image

　　　　描述：选取所有的图像按钮。

　　　　返回：集合元素。

　　　　示例：$(:image)选取所有的图像按钮。

　　♠ :reset

　　　　描述：选取所有的重置按钮。

　　　　返回：集合元素。

　　　　示例：$(":reset")选取所有的重置按钮。

　　♠ :button

　　　　描述：选取所有的按钮。

　　　　返回：集合元素。

　　　　示例：$(":button")选取所有的按钮。

　　♠ :file

　　　　描述：选取所有的上传域。

　　　　返回：集合元素。

　　　　示例：$(":file")选取所有的上传域。

　　♠ :hidden

　　　　描述：选取所有不可见元素。

　　　　返回：集合元素。

　　　　示例：$(":hidden")选取所有不可见元素（已经在不可见性过滤选择器中提过）。