jQuery选择器

学习jQuery的时候,首选需要准确无误的选择想要操作的元素,然后对元素进行操作,选取过程就少不了jQuery中的选择器了.学习选择器,首选需要对JavaScript的DOM树形结构理解清楚,这样才可以如同正则表达式一样去通过选择器匹配自己需要的元素.

• #id

使用任何的元字符（如 !”#$%&’()*+,./:;<=>?@[\]^`{|}~）作为名称的文本部分， 它必须被两个反斜杠转义：\\

#foo\\[bar\\];

• element

根据dom节点的标签名匹配

$("div");

• .class

一个元素可以有多个类,中间用空格分开,只要有一个符合就能被匹配

$(".myClass");

• *

匹配所有元素,结合上下文来搜索,找到每一个元素

$("*");

• selector1,selector2,selectorN

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

$("div,span,p.myClass");   //返回所有的div,span,p元素class为myClass的元素

• ancestor descendant

在给定的祖先元素下匹配所有的后代元素

$("form input"); //匹配form节点下的所有input元素

• parent > child

在给定的父元素下匹配所有的子元素

$("form > input"); //匹配表单中所有的子级input元素。

注意: 与其那边不同的是这个是获取子级,前边的是获取所有的后代.

• prev + next

匹配所有紧接在 prev 元素后的 next 元素

prev和next都是有效的选择器,且next是紧跟在prev后边的

$("label + input"); //获取label后紧跟的input元素

• prev ~ siblings

匹配 prev 元素之后的所有 siblings 元素

prev和siblings都是有效选择器,siblings作为prev的同辈

$("form ~ input"); //获取form表单后同辈的input元素

注意: 和前边ancestor descendant的不同之处是这个是选择同辈的元素,前边的那个是选择后代中的元素

• :first

获取第一个元素

$('li:first');

• :last

获取最后一个元素,用法与上边一致

• :not(selector)

去除所有与给定选择器匹配的元素,在jQuery 1.3中，已经支持复杂选择器了（例如:not(div a) 和 :not(div,a)）.

selector:用于筛选的选择器

$("input:not(:checked)");  //获取input没被选中的元素

• :even

匹配所有索引值为偶数的元素，从 0 开始计数

$("tr:even");  //查找表格的1、3、5...行（即索引值0、2、4...）

注意: 匹配的是索引为偶数的,索引都是从0开始记得.

• : odd

与前边 :even用法一致.匹配所有索引值为奇数的.

• :eq(index)

匹配一个给定索引值的元素

注意: 索引值都是从0开始的.

$("tr:eq(1)");  //匹配索引值为1的行,也就是第二行.

• :gt(index)

匹配所有大于给定索引值的元素,用法与上边一致.

• :lt(index)

匹配所有小于给定索引值的元素,用法与上边一致.

• :header

匹配如 h1, h2, h3之类的标题元素

$(":header").css("background", "#EEE");  //给页面内所有标题加上背景色

• :animated

匹配正在执行动画效果的元素

/*
*对不执行动画效果的元素执行动画效果
*/
$("#run").click(function(){
  $("div:not(:animated)").animate({ left: "+=20" }, 1000);
});

• :contains(text)

获取包含指定文本的元素

<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>

$("div:contains('John')");

结果

[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

• :empty

匹配所有不包含子元素或者文本的空元素.

$("td:empty");

• :has(selector)

匹配含有选择器匹配的元素的元素

<div><p>Hello</p></div>
<div>Hello again!</div>

/*
* 匹配所有div中含有P元素的div元素,增加一个test类
*/
$("div:has(p)").addClass("test");

结果

[ <div class="test"><p>Hello</p></div> ]

• :parent

匹配含有子元素或者文本的元素

$("td:parent");  //匹配td中含有子元素或者td中有内容的td元素

• :hidden

匹配所有不可见元素或者type=”hidden”的元素或者display:none的元素

$("tr:hidden");

• :visible

匹配所有可见元素.

• [attribute]

匹配含有指定属性的元素

$("div[id]");  //匹配div中含有id属性的元素

• [attribute=value]

匹配指定属性为某个具体值的元素

$("input[name='newsletter']").attr("checked", true);  //匹配input的name属性值为newsletter的元素,并增加属性checked=true

• [attribute!=value]

匹配所有不含有指定的属性或者含有指定属性属性值不等值特定值的元素,等价于 not([attr=value]),如果要匹配含有特定属性但是属性值不为特定值的元素用[attr]:not([attr:value])

• [attribute^=value]

匹配给定的属性是以某些值开始的元素

• [attribute$=value]

匹配给定的属性是以某些值结束的元素

• [attribute*=value]

匹配给定的属性包含某些值的元素

• [selector1][selector2][selectorN]

复合属性选择器,需要同时满足多个条件时使用

$("input[id][name$='man']");  //匹配input元素含有id属性,并且name值以man结尾的元素,是两个选择器同时满足筛选后的结果.

• :first-child

匹配第一个子元素

$("ul li:first-child");  //匹配ul中的第一个子元素

• :last-child

匹配最后一个子元素

• :nth-child

匹配其父元素下的第(表达式)个元素,和:eq(index)的区别是有个父元素的约束

:nth-child序列是从1开始,而:eq()是从0开始.可以使用
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)

$("ul li:nth-child(2)");  //匹配ul下的第二个子元素

• : only-child

父元素中如果只含有一个子元素,那么这个子元素将会被匹配

$("ul li:only-child");  //[匹配ul中只含有一个li的li元素

• :input

匹配所有的input,textarea,button,select元素

• :text

匹配所有的单行文本框

<input type="text" /> 

• :password\

匹配所有的密码框

<input type="password" />

• :radio

匹配所有的单选按钮

<input type="radio" />

• :checkbox

匹配所有的复选框

<input type="checkbox" />

• : submit

• :image :reset :button :file

• :enabled :disabled 可见不可见元素

• :checked 所有复选框选中的元素

• :selected 所有选中的option元素

总结:理清楚dom层次结构,如同正则表达式一样匹配就可以获取元素并且进行相应的操作.