jQuery 选择器

jQuery 选择器种类

1. 基本选择器
2. 层次选择器
3. 过滤选择器『简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器』
4. 表单选择器

1. 基本选择器

选择器	功能	返回值	举例
#id	id匹配元素	单个元素	$("#divOne").css(“display”,“block”)
.class	类匹配元素	元素集合	$(".clsFrame").css(“display”,“block”)
element	元素名匹配元素	元素集合	$(“div span”).css(“display”,“block”)
*	匹配所有元素	元素集合	$("*").css(“display”,“block”)
select1,selectN	合并匹配元素	元素集合	$("#divOne,clsFrame").css(“display”,“block”)

2. 层次选择器

选择器	功能	返回值	举例	相当于
ancestor descendant	根据祖先元素匹配所有的后代元素	元素集合	$(“div span”).css(“display”,“block”)
parent>child	根据父元素匹配所有的子元素	元素集合	$(“div>span”).css(“display”,“block”)
prev+next	匹配紧跟在prev后的的相邻元素	元素集合	$(“div+span”).css(“display”,“block”)	.next()
prev~siblings	匹配prev之后的所有兄弟元素	元素集合	$(“div~span”).css(“display”,“block”)	.nextAll()

注：ancestor descendant与parent>child所选择的元素是不相同的，前者的层次关系是祖先与所有的后代，后者的层次关系是父子关系

3. 过滤选择器

3.1 简单过滤选择器

选择器	功能	返回值	举例	相当于	better的用法
:first	获取第一个元素	单个元素	$( “tr:first” ).css( “font-style”, “italic” ); 或者 $(“li”).first().css( “background-color”, “red” )	.first()	$( “li” ).filter( “:first” ).css( “background-color”, “red” );
:last	获取最后一个元素	单个元素	$( “tr:last” ).css({ backgroundColor: “yellow”, fontWeight: “bolder” }); 或者 $(“li”).last().css( “background-color”, “red” )	.last()	$( “li” ).filter( “:last” ).css( “background-color”, “red” );
:odd	获取索引值为奇数的元素，索引值从0开始	元素集合	$( “tr:odd” ).css( “background-color”, “#bbbbff” );		参考:first
:even	获取索引值为偶数的元素，索引值从0开始	元素集合	$( “tr:even” ).css( “background-color”, “#bbbbff” );		参考:first
:header	获取所有标题类的元素，如h1,h2,h3…	元素集合	$( “:header” ).css({ background: “#ccc”, color: “blue” });		参考:first
:animated	根据父元素匹配所有的子元素	元素集合	$( “div:animated” ).toggleClass( “colored” );		参考:first
:lt(index)	获取所有小于给定索引值的元素（不包括当前索引值）	元素集合	$( “td:lt(-2)” ).css( “color”, “red” );		$(“selector”).slice(0, index)
:gt(index)	获取所有大于给定索引值的元素（不包括当前索引值）	元素集合	$( “td:gt(4)” ).css( “color”, “red” );		$(“selector”).slice(index+1)
:eq(index)	获取指定索引值的元素	单个元素	$( “td:eq( 2 )” ).css( “color”, “red” );	.eq(index)
:not(selector)	获取除给定选择器外的元素	元素集合	$( “div” ).not( “.green, #blueone” ).css( “border-color”, “red” );	.not()

注：jQuery 1.8 以前的版本不接受 -index

3.2 内容过滤选择器

选择器	功能	返回值	举例	相当于	结果	better的用法
:contains(text)	获取包含指定文本的元素	元素集合	$( “div:contains(‘John’)” ).css( “text-decoration”, “underline” );		John Resig
:empty	获取所有不包含子元素或者文本的空元素	元素集合	$( “td:empty” ).text( “Was empty!” ) .css( “background”,“rgb(255,220,200)” );
:parent	获取含有子元素或者文本的元素	元素集合	$( “td:parent” ).fadeTo( 1500, 0.3 );			参考:first
:has(selector)	获取含有选择器所匹配的元素的元素	元素集合	$(“div:has§”).addClass(“test”)	.has(selector)		$(“li”).has(“ul”).css(“background-color”,“red”)

注：1. ‘:contains(text)’中的text是大小写敏感的; 2. :empty 与 .empty()功能不一样，:parent 与.parent()功能不一样

3.3 可见性过滤选择器

选择器	功能	返回值	举例	相当于	结果	better的用法
:hidden	获取所有不可见元素或者type为hidden的元素	元素集合	$(“div:hidden”).show(3000)			参考:first
:visible	获取所有可见元素	元素集合	$(“div:visible”).css(“background”, “yellow” )			参考:first

注：有几种elements可以被认为是hidden，1.css 属性 display:none;2.type=“hidden”;3.元素的宽高都被设置为0；
visibility:hidden, opacity:0被认为是visible的，因为它们在layout中仍然占有space

3.4 属性过滤选择器

属性选择器根据元素的某个属性获取元素，如ID号或者匹配属性值的内容，并以 "[ ]"形式表示。

选择器	功能	返回值	举例	相当于	better的用法
[attribute]	获取包含给定属性元素	元素集合	$(“div[id]”).css( “font-style”, “italic” )
[attribute=‘value’]	获取等于给定属性是某个特定值的元素	元素集合	$(“div[id=‘hey’]”).next().text( “Hot Fuzz” );
[attribute!=‘value’]	获取不等于给定属性是某个特定值的元素	元素集合	$( “input[name!=‘newsletter’]” ).next().append( “<b>; not newsletter</b>” );	:not([attr=‘value’])	$( “input” ).not("[name=‘newsletter’]").next().append( “<b>; not newsletter</b>” );
[attribute^=‘value’]	获取给定的属性是以某些值开头的元素	元素集合	$(“input[name^=‘new’]”).val( “news here!” );
[attribute$=‘value’]	获取给定的属性是以某些值结尾的元素	元素集合	$( “input[name$=‘letter’]” ).val( “a letter” );
[attribute*=‘value’]	获取给定的属性是以包含某些值的元素	元素集合	$( “input[name*=‘man’]” ).val( “has man in it!” );
[attributeFilter1][attributeFilter2][attributeFilterN]	获取满足多个复合属性的元素	元素集合	$( “input[id][name$=‘man’]” ).val( “only this one” );

3.5 子元素过滤选择器

用于突出指定某行的需求

选择器	功能	返回值	举例	相当于	better的用法
:nth-child(index/even/odd/equation)	获取某个父元素下的特定位置的元素，索引号从1开始	元素集合	$( “ul li:nth-child(2)” ).append( “<span> - 2nd!</span>” );
:first-child	获取每个父元素下的第一个元素	元素集合	$( “div span:first-child” ) .css( “text-decoration”, “underline” )
:last-child	获取每个父元素下的最后一个元素	元素集合	$( “div span:last-child” ) .css( “text-decoration”, “underline” )
:only-child	获取每个父元素只有一个子元素的元素	元素集合	$( “div button:only-child” ).text( “Alone” ).css( “border”, “2px blue solid” );

注：:nth-child(4n)，其中n的值是0，1，2…自然数

3.6 表单对象属性过滤选择器

表单对象属性过滤器通过表单中的某对象属性特征去获取该类元素，如enabled、disabled等属性

选择器	功能	返回值	举例	相当于	better的用法
:enabled	获取表单中所有属性为enabled的元素	元素集合	$( “input:enabled” ).val( “this is it” );
:disabled	获取表单中所有属性为disabled的元素	元素集合	$( “input:disabled” ).val( “this is it” );
:checked	获取表单中所有属性为checked的元素	元素集合	var n = $( “input:checked” ).length;
:selected	获取表单中所有属性为checked的元素	元素集合	var n = $( “input:checked” ).length;		参考:first

注：

1. The :enabled selector should only be used for selecting HTML elements that support the disabled attribute<button>, <input>, <optgroup>, <option>,<select>, and <textarea>).;
2. The :disabled selector should only be used for selecting HTML elements that support the disabled attribute (<button>, <input>, <optgroup>, <option>, <select>, <textarea>, <menuitem>, and<fieldset>).
3. The:selectedselector works for <option> elements,It does not work for checkboxes or radio inputs; use :checked for them.

4. 表单选择器

该选择器专为表单量身打造，通过它可以在页面中快速定位到某表单对象

选择器	功能	返回值	举例	相当于	better的用法
:input	获取表单中所有input、textarea、select和button元素	元素集合	$( “:input” ).length;		$("#myForm").filter(":input")
:text	获取type类型为text的input元素	元素集合	$( “input:text” ).val( “this is it” );		[type=“text”]
:password	获取type类型为password的所有元素	元素集合	$(“input:password”).css({background: “yellow”,border: “3px red solid”})		[type=“password”]
:radio	获取type类型为radio的所有元素	元素集合	$(“input[name=gender]:radio”)		[type=“radio”]
:checkbox	获取type类型为checkbox的所有元素	元素集合	$( “form input:checkbox” ).wrap( “<span></span>” ).parent().css({ background: “yellow”,border: “3px red solid”});		[type=“checkbox”]
:submit	获取type类型为submit的所有元素	元素集合	$( “td :submit” ).parent(“td”).css({background: “yellow”,border: “3px red solid”})		input[type=“submit”], button[type=“submit”]
:image	获取type类型为image的所有元素	元素集合	$( “input:image” ).css({background: “yellow”,border: “3px red solid”})		[type=“image”]
:reset	获取type类型为text的reset所有元素	元素集合	$( “input:reset” ).css({background: “yellow”,border: “3px red solid”})		[type=“reset”]
:button	获取type类型为button的所有元素以及button类型的所有元素	$( “:button” ).addClass( “marked” );		$("#myForm").filter(":button")
:file	获取type类型为file的元素	元素集合	$( “input:file” ).css(“background”: “yellow”)		[type=“file”]

注:

1. 在使用:text的时候，最好使用$(input:text),要不然默认的是$( "*:text" )
2. $( "<input>" ).is( "[type=text]" ); // false; $( "<input>" ).is( ":text" ); // true
3. 一些浏览器默认<button>元素的type="submit",为了保持所有浏览器解析的一致性，在写<button>的时候，明确type的属性，如<button type="submit">Button type="submit"</button>
   未完待续……