JQuery 基本过滤选择器

HTML页面结构:

<a id="a1">first</a>  
<a id="a2">last</a> 
<a id="a3">not</a> 
<a id="a4">even</a> 
<a id="a5">odd</a> 
<a id="a6">eq(1)</a> 
<a id="a7">gt(1)</a> 
<a id="a8">lt(1)</a> 
<a id="a9">header(h1-h6)</a> 
<a id="a10">animated</a> 
<hr/>

:first选取第一个元素

	  $("#a1").click(function(){
		
		$("input:first").css("border","2px solid blue");
		  
	   });
	   

:last选取最后一个元素

 $("#a2").click(function(){
		
		$("input:last").css("border","2px solid blue");
		  
	   });

:not(selector)去除所有与给定选择器匹配的元素。

 $("#a3").click(function(){
		
		$("input:not(fieldset input)").css("border","2px solid blue");
		  
	   });

:even选取索引值为偶数的所有元素。其中索引值从0开始计算，也就是指0，2，4...

 $("#a4").click(function(){
		
		$("input:even").css("border","1px solid blue");
		  
	   });

:odd 选取索引值是奇数的所有元素，同样索引值从0开始计算，即1，3，5，7....

 $("#a5").click(function(){
		
		$("input:odd").css("border","1px solid blue");
		  
	   });

:eq(index)选取索引值等于index的元素，其中index从0开始计算

  $("#a6").click(function(){
		
		$("input:eq(1)").css("border","3px solid blue");
		  
	   });

:gt(index) 选取索引值大于index的元素，其中index从0开始计算

 $("#a7").click(function(){
		
		$("input:gt(1)").css("border","3px solid blue");
		  
	   });

:lt(index)选取索引值小于index的元素，其中index从0开始计算

 $("#a8").click(function(){
		
		$("input:lt(1)").css("border","3px solid blue");
		  
	   });

:header 选取页面所有的标题元素h1~h6

 $("#a9").click(function(){
		
		$(":header").css("border","3px solid blue");
		  
	   });

 //:animated 选取当前正在执行动画的所有元素

  $("#a10").click(function(){
		//改变页面中没有执行动画的所有input元素的边框属性
		$("input:not(:animated)").css("border","1px solid blue");
		  
	   });