jquery使用选择器获得要操作的元素

1. 基本选择器

jQuery的基本选择器分如下：
$(“#cssid”)

选择id值等于”cssid”的元素，注意:在一个html文档中id是唯一的，也即id为“cssid”不能出现两次（虽然即使出现了两次浏览器也可以解释，但是这是不规范的）。这个ID选择器获取jQuery对象也是个元素集合，但是只有一个元素。将这个jQuery对象转化为DOM对象也可以这样$(“#cssid”)[0]
$(“标签名”)

例如$(“div”)获取的就是HTML文档中的所有的div元素的jQuery对象集合
$(“.myClass”)

获取的是HTML文档中所有的class为“myClass”的元素集合
$(“*”)

这个获取的是HTML文档中的所有的元素
$(“selector1,selector2,selector3…selectorN “)

这种选择器叫做组选择器。例如：$(“span,#two”)选取所有的span标签元素和id=two的元素。

2. 层次选择器

jQuery层次选择器只有4种用法：

$(“ancestor descendant”)：选取parent元素后所有的child元素

ancestor的中文意思是“祖先”，descendant的中文意思是“后代”

$(“body div”)

选取body元素下所有的div元素。

$(“ul li”)

选取ul元素下所有的li元素。

$(“#test div”)

选取id为“test”的元素所包含的所有的div子元素

$(“div#test div”)

选取id为“test”的div所包含的所有的div子元素

$(“.test div”)

选取class为“test”的元素所包含的所有的div子元素

$(“div.test span”)

选取class为“test”的div所包含的所有的span子元素

$(“span.test .demo”)

选取class为“test”的span所包含的所有的class为demo的元素

$(“.test .demo”)

选取class为“test”的元素所包含的所有的class为demo的元素

$(“parent > child”)：选取parent元素后所有的直属child元素，何谓“直属”，也就是第一级的意思了

$(“body > div”)

选取body元素下所有的第一级div元素。

$(“ul > li”)

选取ul元素下所有的第一级li元素。

$(“#test > div”)

选取id为“test”的元素所包含的所有的第一级div子元素

$(“div#test > div”)

选取id为“test”的div所包含的所有的第一级div子元素

$(“.test > div”)

选取class为“test”的元素所包含的所有的第一级div子元素

$(“div.test > span”)

选取class为“test”的div所包含的所有的第一级span子元素

$(“span.test > .demo”)

选取class为“test”的span所包含的所有的第一级class为demo的元素

$(“.test > .demo”)

选取class为“test”的元素所包含的所有的第一级class为demo的元素

$(“prev + next”)：prev和next是两个同级别的元素. 选中在prev元素后面的next元素.

$(“#demo+img”)选在id为demo元素后面的img对象.如果id为demo元素后面没有同级的img对象，那么这个$(“#demo+img”).length=0
$(“prev ~ siblings”):选择prev后面的根据siblings过滤的元素。注:siblings是过滤器

$(“#demo~[title]“)选择id为demo的元素后面所有带有title属性的元素，同样如果id为demo的元素后面没有一个带有title属性的元素，那么$(“#demo~[title]“).length = 0

3. 基本过滤选择器

:first选取第一个元素

$(“div:first”)选取所有div元素中的第一个div元素

:last选取最后一个元素

$(“input:not:(.myclass)”)选取class不是myclass的input元素

:even选取索引是偶数的所有元素，注意：索引是从0开始的

$(“input:even”)选取索引是偶数的input元素。

:odd选取索引是奇数的所有元素，注意：索引是从0开始的

$(“input:odd”)选取索引是奇数的input元素。

:eq(index)选取索引等于index的元素，注意：索引是从0开始的

$(“input:eq(1)”)选取索引等于1的input元素。实际上选择的是第二个input元素

:gt(index)选取索引大于index的元素，注意：索引是从0开始的

$(“input:gt(1)”)选取索引大于1的input元素。

:lt(index)选取索引小于index的元素，注意：索引是从0开始的

$(“input:lt(1)”)选取索引小于于1的input元素。这个就等同于$(“input:eq(0)”)

:header选取所有的标题元素，例如h1,h2,h3…..

$(“:header”)选取网页中所有的h1,h2,h3….

:animated选取当前正在执行动画的所有元素

$(“div:animated”)选取正在执行动画的div元素

4. 内容过滤选择器

:contains(text)选取含有文本内容为“text”元素

$(“div:contains(‘我’)”)选取含有文本“我”的div元素

:empty选取不包含子元素和文本的空元素

$(“div:empty”)选取不包含子元素（包括文本元素）的div空元素

:has(selector)选取含有选择器所匹配的元素的元素

$(“div:has(.mini)”)选取含有class为mini元素的div元素。

:parent选取含有子元素或者文本的元素

$(“div:parent”)选取拥有子元素（包括文本元素）的div元素

5. 可见性过滤选择器

:hidden选取所有不可见的元素

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

:visible选取所有可见元素

$(“div:visible”)选取所有可见的div元素

6.属性过滤选择器

[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元素

[selector1][selector2][selectorN]用属性选择器合并成一个复合属性选择器，满足多个条件。每选择一次，检索范围就缩小一次

$(“div[id][title*=test]“)选取拥有属性id，且属性title的值含有“test”的div元素

7.子元素过滤选择器

:nth-child(index/even/odd/equation)选取每个父元素下的第index个子元素或者奇偶元素

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

:first-child选取每个父元素的第一个子元素

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

:last-child选取每个父元素的最后一个子元素

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

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

$(“ul li:only-child”)在<ul>中选取是唯一子元素的<li>元素

8.表单过滤选择器

:enabled选取所有可用的表单元素

$(“#form1 :enabled”)选取id为“form1”的表单内的所有可用元素

:disabled选取所有不可用的表单元素

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

:checked选取所有被选中的元素（单选框-radio、复选框-checkbox）

$(“input:checked”)选取所有被选中的<input>元素

:selected选取所有被选中的选项元素（下拉列表）

$(“select :selected”)选取所有被选中的选项元素（option）

9.表单选择器

: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”)匹配<input type=”button”><button>

:file 选取所有的上传域

$(“:file”)选取所有的上传域

:hidden 选取所有不可见元素

$(“:hidden”)选取所有不可见元素（已经在不可见性过滤选择器中讲解过