jQuery选择器
根据所获取页面中元素的不同，可以将jQuery选择器分为：
－基本选择器
－层次选择器
－过滤选择器
－表单选择器
其中，过滤选择器中又可分为：
－简单过滤选择器
－内容过滤选择器
－可见性过滤选择器
－属性过滤选择器
－子元素过滤选择器
－表单对象过滤选择器
1. 基本选择器
#id: 根据给定的ID一个元素，返回单个元素
例子：
$(function(){
$("#divOne").css("display","block");
})
element: 根据给定的元素名匹配所有元素，返回元素集合
例子：
$(function()){
$("div span").css("dispaly","block");
})
.class: 根据给定的类匹配元素，返回元素集合
例子：
$(function()){
$(".clsFrame .clsOne").css("dispaly","block");
})
*: 匹配所有元素，返回元素集合
例子：
$(function()){
$("*").css("dispaly","block");
})
select1,selectN: 将每一个选择器匹配到的元素合并后一起返回
例子：
$(function()){
$("#divOne, span").css("dispaly","block");
})
综合例子（根据输入的编号显示内容）
<html>
<head>
<title>练习jQuery基本选择器</title>
<script language="javascript" type="text/javascript"
src="jquery/jquery-1.7.1.js"></script>
<style type="text/css">
.mainDiv{width:500px;height:10px}
.mainDiv div,span{display:none;float:left;
width:500px;height:50px;border:solid 1px #ccc;margin:8px}
.subDiv{background-color:#eee}
</style>
<script type="text/javascript">
window.onload=function(){
var abc=window.prompt("请输入编号：","");
abc=abc*1;
switch(abc)
{
case 1:
$(function(){ //ID匹配元素
$("#subDiv1").css("display","block");
});
break;
case 2:
$(function(){ //元素名匹配元素
$("div span").css("display","block");
})
break;
case 3:
$(function(){ //类匹配元素
$(".mainDiv .subDiv").css("display","block");
})
break;
case 4:
$(function(){ //合并匹配元素
$("#subDiv1,span").css("display","block");
})
break;
default:
$(function(){ //匹配所有元素
$("*").css("display","block");
})
break;
}
};
</script>
</head>
<body>
<div class="mainDiv">
<div id="subDiv1">ID</div>
<div class="subDiv">CLASS</div>
<span>SPAN</span>
</div>
</body>
</html>
2. 层次选择器
ancestor descendant: 根据祖先元素匹配所有的后代元素，返回元素集合
parent>child: 根据父元素匹配所有的子元素，返回元素集合
prev+next: 匹配所有紧接在prev元素后的相邻元素，返回元素集合
prev~siblings: 匹配prev元素之后的所有兄弟元素，返回元素集合
siblings()方法可以获取全部的相邻元素
注意：ancestor descendant与parent>child所选择的元素集合不同，前者的层次关系是祖先与后代，而后者是父子关系；
另外，prev+next可以使用.next()代替，而prev~siblings可以使用nextAll()代堆替。
综合实例：
<html>
<head>
<title>练习jQuery层次选择器</title>
<script language="javascript" type="text/javascript"
src="jquery/jquery-1.7.1.js"></script>
<style type="text/css">
body{font-size:12px;text-align:center}
div,span{float:left;border:solid 1px #ccc;margin:8px;display:none}
.clsFraA{width:100px;height:100px}
.clsFraP{width:80px;height:80px;background-color:#eee}
.clsFraC{width:60px;height:60px;background-color:#ddd}
</style>
<script type="text/javascript">
window.onload=function(){
var abc=window.prompt("请输入编号：","");
abc=abc*1;
switch(abc)
{
case 1:
$(function(){ //匹配后代元素
$("#divMid").css("display","block");
$("div span").css("display","block");
})
break;
case 2:
$(function(){ //匹配子元素
$("#divMid").css("display","block");
$("div>span").css("display","block");
})
break;
case 3:
$(function(){ //匹配后面元素
$("#divMid + div").css("display","block");
$("#divMid").next().css("display","block");
})
break;
case 4:
$(function(){ //匹配所有后面元素
$("#divMid ~ div").css("display","block");
$("#divMid").nextAll().css("display","block");
})
break;
default:
$(function(){ //匹配所有相邻元素
$("#divMid").siblings().css("display","block");
})
break;
}
}
</script>
</head>
<body>
<div class="clsFraA">First</div>
<div class="clsFraA" id="divMid">
Second
<span class="clsFraP" id="Span1">
SpanA
<span class="clsFraC" id="Span2">SpanB</span>
</span>
</div>
<div class="clsFraA">Third</div>
<div class="clsFraA">Four</div>
</body>
</html>
