进阶选择器:

1. 群组选择器     $("span,em,#box")   获取多个选择器的DOM对象

    <div id="d1">div</div>
<div>div</div>
<div>div</div> <p class="c1">p</p>
<p class="c1">p</p>
<p>p</p> <strong>strong</strong>
<strong>strong</strong>
<strong>strong</strong>
div,p,strong{
color:red;
} #d1,.c1,strong{
color:red;
}
    $("div,p,strong").css("color", "red");
$("#d1,.c1,strong").css("color", "red");

2. 后代选择器      $("ul li a")     获取追溯的多个DOM对象

    <ul>
<li><a href="###">首页</a></li>
<li><a href="###">首页</a></li>
<li><em>首页</em></li>
<li><strong>首页</strong></li>
</ul> <a href="###">首页</a>
<a href="###">首页</a> <p>首页</p>
<p>首页</p> <span>首页</span>
<span>首页</span>
 ul li a{
color:green;
}
$("ul li a").css("color", "green");

3. 通配器选择器    $("*")    获取所有元素标签的DOM对象

 *{
color:orange;
} ul li *{
color:green;
}
    alert($("*").size()); //通配符选择器
alert($("*")[5].nodeName);
$("*").css("color", "blue"); //在全局范围使用*,会极大的消耗资源,所以不建议在全局使用
$("ul li *").css("color", "red"); //统配选择器应用在局部的环境内

4.限定选择器

5.多class选择器

    <div class="c1 c2">div</div>
<p class="c1">p</p>
<div class="c2">div</div>
<p class="c1">p</p>
    div.c1{
color:red; .c1.c2{
color:green;
    $("div.c2").css("color", "red"); //限定选择器
$(".c1.c2").css("color", "blue");//多class选择器

6. 在构造选择器时,有一个通用的优化原则:只主球必要的确定性

    $("div$box p ul li a#link") //可以,选择器越复杂,那么字符串解析就越慢
$("#link");//单个ID不需要字符串解析,就可以获取到
05-11 22:16
查看更多