jQuery九类选择器

终极目的:通过选择器，能定位web页面中的任何标签

1.基本选择器

<div id="div1ID">div1</div>
<div id="div2ID">div2</div>
<span class="myClass">span</span>
<p>p</p>

<script type="text/javascript">
	//1)查找ID为"div1ID"的元素
	$("#div1ID")
//2)查找标签为DIV的元素
$("div")
//3)查找所有样式是"myClass"的元素
$(".myClass")
//4)查找所有标签为DIV,SPAN,P元素
$("div,span,p")
//5)查找所有ID为div1ID,CLASS为myClass,标签为P元素
$("#div1ID,.myClass,p")

2.层次选择器

<form>
	<input type="text" value="a"/>		
	<table>
		<tr>
			<td>
				<input type="checkbox" value="b"/>
			</td>
		</tr>			
	</table>
</form>
<label></label>
<input type="radio" value="c"/>
<input type="radio" value="d"/>
<input type="radio" value="e"/>

<script type="text/javascript">
	//1)匹配表单form下所有的input元素
	$("form input")
	//在给定的祖先元素下匹配所有的后代元素。在这里form是祖先，input是后代。

 	//2)匹配表单form下所有的子级input元素
 	$("form>input")
 	//在给定的父元素下匹配所有的子元素
 	
 	//3)匹配跟在标签label后面的第一个input元素
 	$("label + input")
 	
 	//4)匹配所有与标签label后面的input元素个数
$("label ~ input")
</script>

3.增强基本选择器

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<input type="checkbox" checked/>
<input type="checkbox" />
<input type="checkbox"/>
<table border="1">
  <tr><td>line1</td></tr>
  <tr><td>line2</td></tr>
  <tr><td>line3</td></tr>
</table>	
<h1>h1</h1>
<h2>h2</h2> 
<h3>h3</h3>
<p>p</p>

<script type="text/javascript">
//1)匹配所有li标签中第一个li标签
$('li').first()

 	//2)匹配所有li标签中最后一个li标签
 	$('li').last()
 	
 	//3)匹配所有未选中的input元素
 	$("input:not(:checked)")
 	
 	//4)匹配表格的奇数行
 	$("tr:even")
 	
 	//5)匹配表格的偶数行
 	$("tr:odd")
 	
 	//6)匹配表格中第二行，从索引号0开始
 	$("tr:eq(1)")
 	
 	//7)匹配所有大于给定索引值的元素
 	$("tr:gt(0)")
 	
 	//8)匹配所有小于给定索引值的元素
 	$("tr:lt(2)")
 	
 	//9)匹配如 h1, h2, h3之类的标题元素
 	$(":header")
</script>

4.内容选择器

<style type="text/css">
   .myClass{
   	font-size:44px;
   	color:blue
   }
</style>
<div><p>John Resig</p></div>
<div><p>George Martin</p></div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
<p></p>
<p></p>
<div></div>

<script type="text/javascript">
	//1)匹配包含给定文本的元素
	$("div:contains('John')")

 	//2)匹配所有不包含子元素或者文本的空元素
 	$("p:empty")
 	
 	//3)给所有包含p元素的div元素添加一个myClass样式
 	$("div:has(p)").addClass("myClass");
 	
 	//4)匹配所有含有子元素或者文本的p元素个数(就是匹配有子元素或者文本的p元素),即p为父元素
 	$("p:parent")
</script>

5.可见性选择器

<table border="1" align="center">
	<tr style="display:none">
		<td>Value 1</td>
	</tr>
	<tr>
		<td>Value 2</td>
	</tr>
	<tr>
		<td>Value 3</td>
	</tr>
</table>

<script type="text/javascript">
	//1)匹配隐藏的tr元素
	$("tr:hidden")

	//2)匹配所有可见的tr元素
	$("tr:visible")
</script>

6.属性选择器

<div>
	<p>Hello!</p>
</div>
<div id="test2"></div>
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input id="myID" type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="newsaccept" value="Evil Plans" />
	
<script type="text/javascript">
	//1)匹配所有含有 id 属性的 div 元素
	$("div[id]")
	
 	//2)匹配所有name属性是newsletter的input元素，并将其选中
 	$("input[name='newsletter']")
 	
  	//3)匹配所有name属性不是newsletter的input元素
  	$("input[name!='newsletter']")
	  	
  	//4)匹配所有name属性以'news'开始的input元素
  	$("input[name^='news']")
	  	
  	//5)匹配所有name属性以'letter'结尾的input元素
  	$("input[name$='letter']")
	  	
  	//6)匹配所有name属性包含'news'的input元素
  	$("input[name*='man']")
	  	
  	//7)匹配所有含有id属性，并且它的name属性是以"letter"结尾的input元素
  	$("input[id][name$='man']")
</script>

7.子元素选择器

<ul>
	<li>John</li>
	<li>Karl</li>
	<li>Brandon</li>
</ul>
<ul>
	<li>Glen</li>
	<li>Tane</li>
	<li>Ralph</li>
</ul>
<ul>
	<li>Jack</li>
</ul>

<script type="text/javascript">
	//1)匹配和迭代 每个ul中第1个li元素,索引从1开始
	$("ul li:first-child")

	//2)匹配和迭代 每个ul中最后1个li元素中的内容,索引从1开始
	$("ul li:last-child")

	//3)在ul中查找是唯一子元素的li元素的内容
	$("ul li:only-child")

	//4)迭代每个ul中第2个li元素中的内容,索引从1开始
	$("ul li:nth-child(2)")
	//参数为2代表迭代第2个
</script>

8.表单选择器

<form>
	<input type="button" value="Input Button"/><br/>
	<input type="checkbox" /><br/>
	<input type="file" /><br/>
	<input type="hidden" /><br/>
	<input type="image" /><br/>
	<input type="password" /><br/>
	<input type="radio" /><br/>
	<input type="reset" /><br/>
	<input type="submit" /><br/>
	<input type="text" /><br/>
	<select><option>Option</option></select><br/>
	<textarea></textarea><br/>
	<button>Button</button><br/>
</form>
	
<script type="text/javascript">
	//1)匹配所有的input元素
	$(":input")
  	//2)匹配所有文本框
  	$(":text")
  	//3)匹配所有密码框
  	$(":password")
  	//4)匹配所有单选按钮
  	$(":radio")
  	//5)匹配所有复选框
  	$(":radio")
  	//6)匹配所有提交按钮
  	$(":submit")
  	//7)匹配所有图像域
  	$(":image")
  	//8)匹配所有重置按钮
  	$(":reset")
  	//9)匹配所有普通按钮
  	$(":button")
 	//10)匹配所有文件域
 	$(":file")
 	//11)匹配所有input元素为隐藏域
 	$("tr:hidden")
</script>

9.表达对象属性选择器

<form>
	<input type="text" name="email" disabled="disabled" />
	<input type="text" name="password" disabled="disabled" />
	<input type="text" name="id" />
	<input type="checkbox" name="newsletter" checked="checked" value="Daily" />
	<input type="checkbox" name="newsletter" value="Weekly" />
	<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
	<select>
		<option value="1">广东</option>
		<option value="2" selected="selected">湖南</option>
		<option value="3">湖北</option>
	</select>
</form>
	
<script type="text/javascript">
	//1)匹配所有可用的input元素
	$("input:enabled")
 	//2)匹配所有不可用的input元素
 	$("input:disabled")
 	//3)匹配所有选中的复选框元素
 	$("input:checked")
 	//4)匹配所有选中的选项元素
 	$("select option:selected")
</script>