jQuery_2_常规选择器-进阶选择器

进阶选择器：

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不需要字符串解析，就可以获取到

巴特西

jQuery_2_常规选择器-进阶选择器

最新文章

热门文章