选择器（三）：属性选择器、表单选择器、原生选择器

属性选择器

属性选择器主要是根据元素的属性及其属性值作为过滤的条件，来匹配对应的DOM元素。属性选择器都是以中括号作为起止分界符，如[attribute]
属性选择器：

[attribute]: 匹配给定属性的元素，例：$("div[id]")，查找含有id属性的div元素
[attribute=value]: 匹配属性等于特定值的元素。例：$("input[name='text']")，查找name属性值是'text'的input元素
[attribute!=value]: 匹配不含有值得属性或者属性不等于特定值的元素
[attribute^=value]: 匹配给定的属性是以某些值开始的元素，例：$("input[name^='text']")，匹配name属性值是以'text'开始的input元素
[attribute$=value]: 匹配给定的属性是以某些值结尾的元素
[attribute*=value]: 匹配给定的属性是包含某些值的元素，例$("input[name*='text']")，匹配name属性值是包含'text'字符串的input元素
[selector1][selector2][selectorN]: 复合选择器，需要同时满足多个条件时使用，例如：$("input[name*='text'][id]"),匹配name属性值是包含'text'字符串，并且包含id属性的input元素

例：根据超链接文件的类型，分别为不同类型的文件添加类型文件的图标

<a href="1.pdf">参考手册.pdf</a><br />
<a href="2.rar">压缩包.rar</a><br />
<a href="http://www.baidu.com">百度</a><br />
<script type="text/javascript">
	$(function(){
		var a1=$("a[href$='.pdf']");
		a1.html(function(){
			"<img src='image/pdf.png' />"+$(this).attr("hred")
		});
		var a2=$("a[href$='.rar']");
		a2.html(function(){
			"<img src='image/rar.png' />"+$(this).attr("hred")
		});
		var a3=$("a[href^='http:']");
		a3.html(function(){
			"<img src='image/html.png' />"+$(this).attr("hred")
		});
	})
</script>

表单选择器

基本表单选择器
用于获取页面中的表单类型元素

:input       匹配所有input、textarea、select和button元素
:text        匹配所有单行文本
:password    匹配所有密码框
:radio       匹配所有单选按钮
:checkbox    匹配所有复选按钮
:submit      匹配所有提交按钮
:image       匹配所有的图像域
:reset       匹配所有的重置按钮
:button      匹配所有按钮
:file        匹配所有文件域
:hidden      匹配所有不可见元素，或者type为hidden的元素

例：使用表单选择器控制实现交互操作，快速选择这些表单域，并修改它们的value值

<form action="" method="post" id="test">
	<input type="text" value="文本域" /><br />
	<input type="password" value="密码域" />
	<input type="submit" value="提交"/><br />
</form>
<script type="text/javascript">
	$(function(){
		$("#test :text").val("修改后的文本域");
		$("#test :password").val("修改后的密码域");
	})
</script>

高级表单选择器
jQuery根据表单域特有的属性定义了4个表单属性选择器，这些选择器与基本表单选择器不同，它们可以选择任何类型的表单域，因为它主要是根据表单属性来进行选则

:enabled    匹配所有可用元素   
:disabled   匹配所有不可用元素
:checked    匹配所有被选中的元素（复选框、单选框等，不包括select中的option）
:selected   匹配所有选中的option元素

例：

<form action="" method="post" id="test">
	<input type="text" value="文本域" disabled="disabled"/><br />
	<input type="checkbox" value="复选框" checked="checked"/>
	<input type="submit" value="提交"/><br />
</form>
<script type="text/javascript">
	$(function(){
		$("#test :disabled").val("不可用");
		$("#test :checked").removeAttr("checked");
	})
</script>

原生选择器

DOM API模块的核心方法是querySelector和querySelectorAll，这两个方法能够根据CSS选择器规范，便捷的定位文档中的指定元素。其支持的浏览器包括IE8+、Firefox、Chrome、Safari和Opera
两个方法的参数必须是符合CSS选择器规范的字符串，前者返回第一个匹配的元素对象，后者返回匹配的元素集合

例：

<div class="content">
	<ul>
		<li>首页</li>
		<li class="blue">娱乐</li>
		<li class="red">财经</li>
		<li class="blue">时尚</li>
		<li class="red">互联网</li>
	</ul>
</div>

获取第一个li元素

document.querySelector("content ul li")
或
document.querySelectorAll("content ul li")[0]

获取所有的li元素

document.querySelectorAll("content ul li")

获取class为red的li元素

document.querySelector("li.red")

除此之外DOM API模块中也包括getElementsByClassName方法，用于获取指定类名的元素。参数为字符串，且为类名，而且不需要加点号前缀，如果没有匹配到任何元素则返回空数组