集团站切换校区

验证码已发送,请查收短信

图标

学习文章

当前位置:首页 > >学习文章 > >

{HTML5}进阶选择器-第二节

发布时间: 2018-10-12 09:01:12

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


//群组选择器

span,em, .box {                   //多种选择器添加红色字体

color:red;  

}

$('span,em, .box').css('color', 'red');   //群组选择器 jQuery 方式


//后代选择器

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

$('.box.pox').css('color','red');       //群组选择器 jQuery 方式


//通配选择器

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

$('*').css('color','red');            //通配选择器

$('p').css('color','red');            //通配选择器


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

$('#box p, ul li *').css('color', 'red'); //组合了多种选择器


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


还有一种选择器,可以在 ID 和类(class)中指明元素前缀,比如:

$('div.box');                      //限定必须是.box

元素获取必须是

$('p#box div.side');                   //同上


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


.box.pox{                       //双 class 选择器,IE6 出现异常 

color:red;

}

$('.box.pox').css('color','red');   //兼容IE6,解决了异常 

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

$('.box,.pox').css('color', 'red');                //加了逗号,体会区别  


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

$('div#boxul li a#link');               //让jQuery 内部处理了不必要的字符串

$('#link');                               //ID 是唯一性的,准确度不变,性能提升


上一篇: {Docker}CentOS6安装docker

下一篇: {HCNA-AI 数学知识}之概率论内容介绍

十年老品牌
QQ咨询:450959328 微信咨询:togogozhong 咨询电话:020-38289118 咨询网站客服:在线客服

相关课程推荐

在线咨询 ×

您好,请问有什么可以帮您?我们将竭诚提供最优质服务!