进阶选择器:

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_常规选择器-进阶选择器的更多相关文章

  1. jQuery_2_常规选择器-高级选择器

    高级选择器 层次选择器 1. 后代选择器    $("#d1 p")   获取追溯到的多个DOM对象  (无论儿子还是孙子都是后代) 2. 子选择器       $("# ...

  2. CSS3 选择器——属性选择器

    上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...

  3. CSS3选择器——基本选择器

    CSS是一种用于屏幕上渲染html,xml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应的元素,此时就需要我们所说的选择器.选 ...

  4. CSS选择器--普通选择器

    普通选择器: 1.标签选择器:使用标签选择器,所有的相同的标签都会被选中.(如:选择div所有的div都被选中.) 2.类选择器:如果一个元素设置了多个类选择器样式,那么这些类选择器都会被设置.但是如 ...

  5. CSS3 选择器——基本选择器

    CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...

  6. CSS_03_01_CSS选择器中单选择器:关联选择器档

    选择器中单选择器:关联选择器档 第01步:编写select.css @charset "utf-8"; /* span标签中的b标签的exam类 */ span b.exam{ b ...

  7. 【CSS3】---only-child选择器+only-of-type选择器

    only-child选择器 “:only-child”选择器选择的是父元素中只有一个子元素,而且只有唯一的一个子元素.也就是说,匹配的元素的父元素中仅有一个子元素,而且是一个唯一的子元素. 示例演示 ...

  8. CSS 选择器之基本选择器 属性选择器 伪类选择器

    CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className)    所有浏览器都支持类选择器,但多类选择器(.classNa ...

  9. CSS系列------选择器和选择器的优先级

    1.1.基本选择器 通配符选择器(*)      通配符选择器的使用方法如下 *{margin:0px; padding:0px;} //*代表所有的 ID选择器(#) ID选择器的使用方式如下: * ...

随机推荐

  1. SQL查询 若为空显示默认值

    COALESCE(a.end_,now()) SELECT COALESCE(NULL,NULL,3,4,5) FROM

  2. Flask 入门(第三篇)

    1. 安装虚拟环境 安装虚拟环境: $ sudo pip install virtualenv $ sudo pip install virtualenvwrapper virtualenv --ve ...

  3. 【IDEA下使用tomcat部署web项目】

    1.IDEA下的WEB项目新建就不说了. 2.配置tomcat:file-->settings-->Build,Execution,Deployment-->Application ...

  4. .Net Core中依赖注入服务使用总结

    一.依赖注入 引入依赖注入的目的是为了解耦和.说白了就是面向接口编程,通过调用接口的方法,而不直接实例化对象去调用.这样做的好处就是如果添加了另一个种实现类,不需要修改之前代码,只需要修改注入的地方将 ...

  5. Sharding-JDBC 使用入门和基本配置

    一.什么是Sharding-JDBC Sharding-JDBC定位为轻量级Java框架,在Java的JDBC层提供的额外服务.它使用客户端直连数据库,以jar包形式提供服务,无需额外部署和依赖,可理 ...

  6. 2019前端面试之html5

    html5新增特性 语义化标签 表单新特性 视频和音频canva画布 svg画图 地理位置 为鼠标提供的拖放api webwroker storage websocker 常见块级标签 div,p,h ...

  7. Codeforces 92C【二分】

    意: 求最少需要几个s1串拼接存在子串s2 (1≤|s1|≤1e4,1≤|s2|≤1e6). 思路(感谢ZQC): 每个字母的出现位置存个vector. 假设你当前已经用了A串的前x个字符,现在想要匹 ...

  8. HDU2066-一个人的旅行

    题目链接:点击打开链接 Problem Description 虽然草儿是个路痴(就是在杭电待了一年多,居然还会在校园里迷路的人,汗~),但是草儿仍然很喜欢旅行,因为在旅途中 会遇见很多人(白马王子, ...

  9. MacOS下,Python2和Python3完美兼容使用(转)

    问题阐述: MacOS默认Python版本是2.7.10,随着Python3的进一步占有市场,Python2.7也将在2020年结束维护,所以在同一台电脑上安装多个Python版本势在必行. 一.py ...

  10. jmeter beanshell Typed variable declaration : Object constructor错误

    从数据库取值和响应值做比较,使用beanshell如下: import org.json.JSONArray; import org.json.JSONObject; res_str = prev.g ...