jquery选择器
时间：2010-08-16 来源：ActionBi
jquery选择器
基本选择器最简单的也是最常用的。
基本选择器 $("#test") 选取id为test的元素。 返回单个元素$(".test") 选取类名为test的元素。 返回集合元素$("*") 选取所有元素 返回集合元素 $("div,span,.myclass") 选择所有的<div>,<span>,和拥有类名为myclass的标签的一组元素 返回集合元素
示例：
$("#one").css("backround","red"); 选择id为one的元素，改变他的背景为red$(".one").css("ackround","red"); 选择类名为one的多有元素，改变他们的背景为rded$("*").css("ackround","red"); 选择所有的元素，改变他们的背景为red$("div,span") 选择所有的div和span ，改变他们的背景为red
层次选择器
通过层次选择器可以通过dom元素之间的层次关系获取特定的元素，例如后代元素，子元素，相邻元素和兄弟元素
$("ancestor descendant(后代)") 集合元素 选取父代ancestor中所有的子代descendant元素 $("div span") 选择所有的div中span元素
$("parent>child") 集合元素 选取parent元素下的child元素
，$(‘prev + next‘) 集合元素 选取紧跟在prev元素后满地next元素 $('.one + div') 选取class为one的下一个的兄弟元素。
$(’prev~sibiling‘)集合元素 选取prev之后所有的sibiling元素$('#two~div')选取id为two的元素后面的所有的div的兄弟元素。
$("prev").siblings("div"),选取prev的同辈的所有的div元素，无论前后位置。
$('.one + div’) 把class为one的元素下的第一个元素后面的div改变颜色 可以使用next的方法来代替$('prev + next ')的。
$('.one + div’)等效于$(".one").next("div") 可以使用nextAll的方法来代替$('prev ~ next ')的。
$('.one ~ div’)等效于$(".one").nextAll("div")
过滤选择器
分为基本过滤器，内容过滤器，可见性过滤。属性过滤，子元素过滤，和表单过滤。
基本过滤：
：first 选取第一个元素。 单个元素。 $("div:first") 选取所有的div中的第一个div元素。
: last 选取最后一个元素。 单个元素 $ ("div:last") 选取所有的div中的最后一个div元素。
:not(selector)选取所有与非idngde选择器不匹配的元素。 集合元素。 $("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元素。
:gt(index)选取索引大于index的元素，索引从0开始。 集合元素。 $("input:gt(1)")选取索引大于1 的input元素。
:lt(index)选取索引小于index的元素，索引从0开始。 集合元素。 $("input:lt（1）")选取索引小于1的input元素。
:header 选取多有的标题元素。h1 ， h2 ，h3等等。 集合元素。 $(":header")可以选择网页中所有的标题元素。
:animated 选取当前正在执行的动画的所有的元素。
内容过滤选择器
主要体现在它包含的子元素活着文本内容上。
:contains(text) 选取含有文本内容为"text"的元素。 集合元素。 $("div:contain('我')") 选择div中的内容中包含“我“的div
:empty 选取不包含子元素活着文本的空元素。 集合元素。 $("div:empty") 选择空的div元素，进行操作。
:has(selector) 选取含有选择器所匹配的元素的元素。 集合元素。 $("div:has(p)")
:parent 选取所有含有子元素活着文本的元素。 集合元素. $("div:parent") 选择所有的不为空 的div的元素。
可见性选择器
：hidden 选取所有的不可见元素。。 集合元素。$(":hidden")选取所有的不可见元素。$("input:hidden")选取所有的隐藏的input元素
:visible 选取所有的可见元素。 集合元素。 $(":visible")选取所有的可见元素。$("input:visible")选取所有的可见的input元素
属性选择器
过滤规则是通过元素的属性来获取相应的元素。
[attribute] 选择拥有这个属性的元素 $("div[id]")选取拥有id属性的元素[attribute=value]选择属性值为value的元素 集合元素 $("div[title=test]") 选取title属性值为test的id元素
[attribute！=value]选择属性值不为value的元素 集合元素 $("div[title！=test]") 选取title属性值不为test的id元素[attribute^=value]选取属性值一value开始的元素。 集合元素 $("div[title^=test]")选取属性以title开始的div元素。
[attribute$=value]选取属性值以value结束的元素。 集合元素 $("div[title$=test]")选取属性值title以test结束的元素[attribu*=value]选取属性值含有value的元素 集合元素 $("div[title*=test]") 选取所有属性title值为test的div
[selector1][selector2][selectorN] 复合选择器，集合元素。$("div[title=test][id]")拥有属性id的值，并且属性title的值是test的div元素
子元素过滤选择器
:nth-child(index/even/odd/equation)选取每个傅元素下的第index个子元素或奇偶元素（index从1开始） 集合元素
:first-child 选取父元素的第一个元素 集合元素 :first只返回一个元素 $("ul:first-child")选取所有的ul的第一个里元素
:last-child 选取父元素的最后一个元素，集合元素 ：last只返回一个元素 $("ul:last-child")选取所有ul的最后一个元素
:only-child 如果某个元素是父元素中唯一的子元素，那么将会被匹配。如果含有其他子元素，则不匹配。 集合元素。:nth-child()是最常用的子元素的过滤器。:nth-child(even)选取每个父元素下的索引值是偶数的元素。索引从1开始。
:nth-child(odd)能选取每个父元素下的索引值的奇数的元素。:nth-child(2)选取每个父元素下索引值是2的元素。
表单对象属性过滤选择器
:enabled 选取所有可用元素 集合元素 $("#form1:enabled")选取id为form的表单内所有的可用元素。
:disabled 选取所有的不可用的元素 集合元素 $("#form:disabled") 选择id为form的表单内的所有的不可用元素。
:checked 选取所有的被选中的元素单选框复选框 $("input:checked")选择所有的被选中的<input>元素
:selected 选取被选中的选项元素（下拉列表） $("select:selected")选取所有的被选中的选项元素
$("#form input:enabled").val("这里变化了") 选取可用的input的值，改变他的默认$("#form input:disabled").val("改变了不可用的input的值。")$("input:checked").length;选取多选框里选中的个数$("select:selected").text(); 获取下拉选中的内容
表单选择器
:input 选择所有的input textarea select button 元素 集合元素
:text 选取所有的单行文本框
:password 选取所有的密码框
:radio 选取所有的单选框
:checkbox 选取所有的复选框
:submit 选取所有的提交按钮
:reset 选取所有的的重置按钮
:image 选取所有的图像按钮
:button 选取所有的按钮
:file 选取所有的上传域
:hidden 选取所有的不可见元素
附学习实验网页：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>test</title> <script src="../jquery/jquery-1.4.2.js" type="text/javascript"></script></head><style>.one{ width:100px; position:relative; float:left; background:red; margin-left:20px; margin-top:10px; } .two{ width:100px; position:relative; float:left; background:red; margin-left:20px; margin-top:10px; } #main { border:1px soild black; }</style><script> function down1() { $("div:first").css("background", "black"); } function down2() { $('div:last').css("background", "black"); } function down3() { $('div:not(#one)').css("background", "black"); } function down4() { $("div:nth-child(even)").css("background", "black"); } function down19() { $("div:even").css("background", "green"); } function down5() { $('div:odd').css("background", "black"); } function down6() { $('div:eq(4)').css("background", "black"); } function down7() { $('div:gt(4)').css("background", "black"); } function down8() { $('div:lt(4)').css("background", "black"); } function down9() { $("div:contains('one')").css("background", "black"); } function down10() { $("div:empty").css("background", "black"); } function down11() { $("div:parent").css("background", "black"); } function down12() { $(":visible").css("background", "black"); } function down13() { $("div:hidden").css("background", "green"); $("div:hidden").css("display", "block");
} function down14() { $("input:hidden").css("display","block"); } function down15() { $("div:hidden").show(3000); } function down16() { $("div[id]").css("background","green"); } function down17() { $("div[id][class=one]").css("background", "green"); } function down18() { $("div[class^=two]").css("background", "green"); }</script><body><div id="one" class="one">id等于one class为one</div><div id="two" class="one">id等two class为one</div><div id="three" class="two">class为two</div><div class="one">class为one</div><div class="one">class为one</div><div class="one">class为one</div><div class="two">class为two</div><div id="one" class="one">id等于one class为two</div><div id="two" class="one">id等于two class为two</div><div class="one">class=one</div><div class="one">class=one</div><div class="one">class=one</div><div class="one" style="display:none;">这是隐藏的div</div><div class="one" style="display:none;">这是隐藏的div</div><div id="main" style="width:900px; position:relative; float:left;"><input type="button" style="display:none;"value="这是隐藏的按钮" onclick="alert('我出来了!自由了！')" />
<input type="button" onmousedown="down1();" value="第一个div变黑色"/><input type="button" onmousedown="down2();" value="最后的div变黑色"/><input type="button" onmousedown="down3();" value="id不是one的div变黑色"/><input type="button" onmousedown="down4();" value=":nthchild(even)让索引是偶数的div变黑色，index从1开始"/><input type="button" onmousedown="down19();" value=":even让索引是偶数的div变黑色，index从0开始"/><input type="button" onmousedown="down5();" value="索引是奇数div变黑色"/><input type="button" onmousedown="down6();" value="索引为4的第五个div变黑色换" /><input type="button" onmousedown="down7();" value="索引大于4的前四个div变黑色"/><input type="button" onmousedown="down8();" value="索引小于4的div变黑色"/><input type="button" onmousedown="down9();" value="选择所有的含有one的元素"/><input type="button" onmousedown="down10();" value="选择所有的空的div"/><input type="button" onmousedown="down11();" value="选择所有的非空的div"/><input type="button" onmousedown="down12();" value="所有显示的div变色"/><input type="button" onmousedown="down13();" value="隐藏的div显示并且变色"/><input type="button" onmousedown="down14();" value="显示隐藏的input"/><input type="button" onmousedown="down15();" value="隐藏的div在3秒内显示出来"/><input type="button" onmousedown="down16();" value="选择含有id属性的div并且变色"/><input type="button" onmousedown="down17();" value="选择拥有id并且class值为two的div"/><input type="button" onmousedown="down18();" value="div"/></div></body></html>
相关阅读 更多 +
