JQ选择器

1、基本选择器

<script>
    $(function(){
				
	  $ ("#btn1").click(function(){
		$("#one").css("background-color","pink");
	 			});
          $ ("#btn2").click(function(){
		$(".mini").css("background-color","pink");
				});
	  $("#btn3").click(function(){
		$("div").css("background-color","pink");
				});
				
	  $("#btn4").click(function(){
		$("*").css("background-color","pink");
				});
				
	  $("#btn5").click(function(){
		$("#two,.mini").css("background-color","pink");
				});
			});
</script>

2、层级选择器

<script type="text/javascript">
  $(function(){
   $("#btn1").click(function(){//选择body中所有的div元素
	$("body div").css("background-color","gold");
				});
				
   $("#btn2").click(function(){//选择body中的第一级的孩子
	$("body>div").css("background-color","gold");
				});
				
   $("#btn3").click(function(){//选择id为two的元素的下一个元素
	$("#two+div").css("background-color","gold");
				});
				
   $("#btn4").click(function(){//选择id为one的所有兄弟元素
	$("#one~div").css("background-color","gold");
				});
			});
</script>

3、基本过滤选择器

<script>
 $(function(){
  $("#btn1").click(function(){//body中第一个div元素
	$("body div:first").css("background-color","red");
				});
				
  $("#btn2").click(function(){//body中的最后一个div元素
	$("body div:last").css("background-color","red");
				});
				
  $("#btn3").click(function(){//选择body中的奇数的div
	$("body div:odd").css("background-color","red");
				});
				
  $("#btn4").click(function(){//选择body中的偶数的div
	$("body div:even").css("background-color","red");
				});
			});
</script>

4、属性选择器

<script>
  $(function(){
   $("#btn1").click(function(){//选择有id属性的div
    $("div[id]").css("background-color","red");
				});
				
   $("#btn2").click(function(){选择有id属性的值为two的div
    $("div[id='two']").css("background-color","red");
				});
				
			});
</script>