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

转载于:https://www.cnblogs.com/xiao9426926/p/6639517.html

jQuery_2_常规选择器-进阶选择器相关推荐

css-选择器-进阶-属性选择器-组选择器-nth选择器
考点属性选择器,选取具有name属性的元素 [name] 选取具有某个属性的元素: [属性名] 属性选择器,选取属性target值为_blank的元素 [target=_blank] [属性名=属性 ...
基本CSS选择器,复合选择器,后代选择器
基本CSS选择器有标记选择器.类别选择器.ID选择器3种 1.标记选择器每一种HTML标记的名称都可以作为相应的标记选择器的名称,如h1,p,等等 2.类别选择器类别选择器的名称可 ...
CSS3选择器 :read-only选择器 CSS3选择器 :read-write选择器
CSS3选择器 :read-only选择器 ":read-only"伪类选择器用来指定处于只读状态元素的样式.简单点理解就是,元素中设置了"readonly='reado ...
03-高级选择器,属性选择器,伪类选择器
高级选择器分为: 后代选择器子代选择器并集选择器交集选择器后代选择器使用空格表示后代选择器.顾名思义,父元素的后代(包括儿子,孙子,重孙子) .container p{color: red; ...
jq选择器||基本选择器层级选择器属性选择器过滤选择器表单过滤选择器
基本选择器层级选择器属性选择器过滤选择器表单过滤选择器 1. 基本选择器 1. 标签选择器(元素选择器) * 语法: $("html标签 ...
学习总结：CSS(一)定义方式、选择器、选择器权重
一.CSS的定义方式 1.内部样式:<style></style> 2.行间样式:<div style="width:100px;height:100px;&q ...
CSS3 选择器——属性选择器
上一节在<CSS3选择器--基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分--属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...
CSS中的选择器之类选择器和id选择器
1.css中的选择器: 1.类选择器,又叫class选择器 2.id选择器 3.html元素选择器(又叫标签选择器) 4.通配符选择器 5.伪类选择器 6.组合选择器(多元素选择器,子元素选择器,后代 ...
同级选择器_10-CSS3选择器详解
CSS3在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷. CSS3的现状浏览器支持程度不够好,有些需要添加私有前缀移动端支持优于PC端不 ...

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

jQuery_2_常规选择器-进阶选择器相关推荐

最新文章

热门文章