1、基本选择器
其中选择器类别可分为以下类别：
标签选择器：p{CSS rules}
id选择器：#ID{CSS rules}
类选择器：.Class{
CSS rules}群组选择器：h1,h2,h3,h4,h5,h6{
CSS rules}后代选择器：div p{
CSS rules}通配选择器：*{
CSS rules}伪类选择器：a:link,a:visited{
CSS rules}另还有不常使用的多类选择器、属性选择器、部分属性选择器、相邻兄弟选择器、子选择器等。
相对应，理解jQuery中$("#ID")就不是难事了。
jQuery中基本选择器包括*,class,element,id及这种群组方式selector1,selector2,…使用这种$的优势在于：一是写法简洁，二是支持CSS1到CSS3选择器
再就是防止document.getElementById("#id")对象不存在，造成浏览器左下角的黄色感叹号，例网页开始存在id为t1的对象，某一天突然移除而js没有做相应的处理这样就会出现js错误；使用jQuery的$你无需考虑这种问题；当然，还要注意$()选择器返回的是对象数组，因此要判断网页中是否存在某个元素，不能使用1 | if($("#t1")){ |
2 | // |
3 | } |
而要使用
1 | if($("#t1").length>0){ //或者if($("#t1")[0]){ |
2 | // |
3 | } |
还是看下综合实例
01 | <style type="text/css"> |
02 | .normalStyle{ |
03 | background:#C3D9FF; |
04 | } |
05 | .alterStyle{ |
06 | background:#DDF8CC; |
07 | } |
08 | .h{ |
09 | background:#fcc; |
10 | border:solid 1px #d00; |
11 | } |
12 | .button{ |
13 | background:#FAFAA0; |
14 | border:solid 1px #996699; |
15 | padding:4px; |
16 | } |
17 | </style> |
18 | <script type="text/javascript" src="jQuery-1.3.2.min.js"></script> |
19 | <script type="text/javascript"> |
20 | $(function(){ |
21 | $("li").addClass("normalStyle") |
22 | $(".alter").addClass("alterStyle"); |
23 | $("h1,h2,h3").addClass("h"); |
24 | $("#btn").addClass("button"); |
25 | }); |
26 | </script> |
27 | </head> |
28 | <body> |
29 | <ul> |
30 | <li>选项一</li> |
31 | <li class="alter">选项二</li> |
32 | <li>选项三</li> |
33 | <li class="alter">选项四</li> |
34 | </ul> |
35 | <h1>标题一</h1> |
36 | <h2>标题二</h2> |
37 | <h3>标题三</h3> |
38 | <button id="btn">按钮</button> |
2、层次选择器
不用说，层次选择器的思想来自CSS；实际上稍微拓展了
$("div span")//选择<div>里所有<span>元素
$("div>span")//选择<div>元素下元素名为<span>的元素$('prev+next')//选择紧接在prev元素后的next元素$('prev~siblings')//选择prev元素之后的所有sibling元素例：
01 | <script type="text/javascript"> |
02 | $(function(){ |
03 | $("ul li").css("color","#f00"); |
04 | $("div>span").css("color","#008000"); |
05 | $("div+span").css("color","#d00"); |
06 | $("div~span").css("background","#ffc"); |
07 | }); |
08 | <script> |
09 | <body> |
10 | <div> |
11 | <span>文字一</span> |
12 | </div> |
13 | <span>文字二</span> |
14 | <span>文字三</span> |
15 | <ul> |
16 | <li>选项一</li> |
17 | <li>选项二</li> |
18 | <li>选择三</li> |
19 | </ul> |
20 | </body> |