jQuery----选择器1

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的$你无需考虑这种问题；
当然，还要注意$()选择器返回的是对象数组，因此要判断网页中是否存在某个元素，不能使用

view sourceprint?
1 if($("#t1")){
2     //
3     }

而要使用

view sourceprint?
1 if($("#t1").length>0){//或者if($("#t1")[0]){
2     //
3     }

还是看下综合实例

view sourceprint?
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元素

例：

view sourceprint?
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>
posted @ 2011-11-08 11:52  Laborc_L  阅读(254)  评论(0)  编辑  收藏  举报