选择器——2——基本选择器
根据所获取页面中元素的不同，可以将jQuery选择器分为:基本选择器、层次选择器、过滤选择器、表单选择器四大类。
其中，在过滤选择器中又可分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种。其分类结构如图所示：
基本选择器是jQuery中使用最频繁的选择器，它由元素Id、Class、元素名、多个选择符组成，
通过基本选择器可以实现大多数页面元素的查找，其详细说明如下表所示。
| 选择器 | 功能 | 返回值 |
| #id | 根据给定的ID匹配一个元素 | 单个元素 |
| element | 根据给定的元素名匹配所有元素 | 元素集合 |
| .class | 根据给定的类匹配元素 | 元素集合 |
| * | 匹配所有元素 | 元素集合 |
| selector1,selectorN | 将每一个选择器匹配到的元素合并后一起返回 | 元素集合 |
Demo如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XMTML 1.0 2 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head> 6 <title>使用jQuery基本选择器</title> 7 <script type="text/javascript" src="../../software/jquerys/jquery-1.7.2.js"></script> 8 <style type="text/css"> 9 body{font-size:12px;text-align:center} 10 .clsFrame{width:300px;height:100px} 11 .clsFrame div,span{display:none;float:left; 12 width:65px;height:65px;border:solid 1px #ccc; 13 margin:8px} 14 .clsOne{background-color:#eee} 15 </style> 16 <script type="text/javascript"> 17 $(function(){ // ID 匹配元素 18 //$("#divOne").css("display","block"); 19 }); 20 $(function(){ // 元素名匹配 21 //$("div span").css("display","block"); 22 }); 23 $(function(){ // 类匹配元素 24 //$(".clsFrame .clsOne").css("display","block"); 25 }); 26 $(function(){ // 匹配所有元素 27 //$("*").css("display","block"); 28 }); 29 $(function(){ // 合并匹配元素 30 $("#divOne,span").css("display","block"); 31 }); 32 </script> 33 </head> 34 <body> 35 <div class="clsFrame"> 36 <div id="divOne">ID</div> 37 <div class="clsOne">CLASS</div> 38 <span>SPAN</span> 39 </div> 40 </body> 41 </html>
