常规选择器——进阶选择器

最新推荐文章于 2022-10-10 00:09:30 发布

weixin_34390996

最新推荐文章于 2022-10-10 00:09:30 发布

阅读量121

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yerenyuan/p/5410121.html

版权

进阶选择器

在简单选择器中，我们了解了最基本的三种选择器：元素标签名、ID和类(class)。那么在基础选择器外，还有一些进阶和高级的选择器方便我们更精准的选择元素。

选择器	CSS模式	jQuery模式	描述
群组选择器	span,em,.box {}	$("span,em,.box")	获取多个选择器的DOM对象
后代选择器	ul li a {}	$("ul li a")	获取追溯到的多个DOM对象
通配选择器	* {}	$("*")	获取所有元素标签的DOM对象

如，html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>常规选择器</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="demo.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="box">div</div>
    <div>div</div>
    <div>div</div>

    <p class="pox">p</p>
    <p class="pox">p</p>
    <p>p</p>

    <strong>strong</strong>
    <strong>strong</strong>
    <strong>strong</strong>
</body>
</html>

CSS规则：

div, p, strong {
    color: red; //多种选择器添加红色字体
}

$("div, p, strong").css("color", "red"); //群组选择器jQuery方式

又或者：

$("#box, .pox, strong").css("color", "blue");

如，html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>常规选择器</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="demo.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <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>
</body>
</html>

CSS规则：

ul a {
    color: green;
}

相当于：

ul li a { //层层追溯到的元素添加红色字体
    color: red;
}

jQuery代码如下：

$("ul li a").css("color", "orange"); //后代选择器jQuery方式

修改CSS规则如下：

* { //页面所有元素都添加红色字体
    color: red;
}

jQuery代码如下：

$("*").css("color", "blue"); //通配选择器

目前介绍的六种选择器，在实际应用中，我们可以灵活的搭配，使得选择器更加的精准和快速。

警告：在实际使用上，通配选择器一般用的并不多，尤其是在大通配上，比如：$('*')，这种使用方法效率很低，影响性能，建议竟可能少用。

用以上html代码来说，

alert($("*").size()); //23
alert($("*")[0].nodeName);//得到第一个DOM对象的标签名——html

综上所述，在全局范围使用*号，会极大的消耗资源，所以不建议在全局使用。

再看以下jQuery代码：

$("ul li a,ul li em,ul li strong").css("color", "red");

等价于

$("ul li,ul li a").css("color", "red");

又等价于

$("ul li *").css("color", "pink");

alert($("ul li *").size()); //4 不是3

所以，通配选择器一般用在局部的环境内。

还有一种选择器，可以在ID和类(class)中指明元素前缀。

如，html代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>常规选择器</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="demo.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="box pox">div</div>
    <p class="box">p</p>

    <div class="pox">div</div>
    <p class="box">p</p>
</body>
</html>

jQuery代码如下：

$("div.box").css("color", "red"); //限定必须是.box，元素获取必须是div

类(class)有一个特殊的模式，就是同一个DOM节点可以声明多个类(class)。那么对于这种格式，我们有多class选择器可以使用，但要注意和class群组选择器的区别。

对以上html代码有如下CSS规则：

.box.pox { //双class选择器，IE6出现异常
    color: red;
}

jQuery代码：

$(".box.pox").css("color", "blue"); //兼容IE6，解决了异常

多class选择器是必须一个DOM节点同时有多个class，用这多个class进行精确限定。而群组class选择器，只不过是多个class进行选择而已。

$(".box,.pox").css("color", "blue"); //加了逗号，体会区别

警告：在构造选择器时，有一个通用的优化原则：只追求必要的确定性。当选择器筛选越复杂，jQuery内部的选择器引擎处理字符串的时间就越长。比如：

$("div#box p ul li a#link");//可以，选择器越复杂，那么字符串解析就越慢，让jQuery内部处理了不必要的字符串
$("#link"); //单个ID不需要字符串解析，ID是唯一性的，准确度不变，性能提升

转载于:https://www.cnblogs.com/yerenyuan/p/5410121.html

weixin_34390996

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫