选择器——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{300px;height:100px}
11     .clsFrame div,span{display:none;float:left;
12                        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>

Demo