选择器中的层级选择器处理关系类型：

子元素 后代元素 兄弟元素 相邻元素

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <link rel="stylesheet" href="imooc.css" type="text/css">

    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>

</head>

<body>

    <h2>子选择器与后代选择器</h2>

    <div class="left">

        <div class="aaron">

            <p>div下的第一个p元素</p>

        </div>

        <div class="aaron">

            <p>div下的第一个p元素</p>

        </div>

    </div>

    <div class="right">

        <div class="imooc">

            <article>

                <p>div下的article下的p元素</p>

            </article>

        </div>

        <div class="imooc">

            <article>

                <p>div下的article下的p元素</p>

            </article>

        </div>

    </div>

    <script type="text/javascript">

        //子选择器

        //$('div > p') 选择所有div元素里面的子元素P

        $('div > p').css("border", "1px groove red");

    </script>

    <script type="text/javascript">

        //后代选择器

        //$('div  p') 选择所有div元素里面的p元素

        $('div p').css("border", "1px groove red");

    </script>

    <h2>相邻兄弟选择器与一般兄弟选择器</h2>

    <div class="bottom">

        <div>兄弟节点div, +~选择器不能向前选择</div>

        <span class="prev">选择器span元素</span>

        <div>span后第一个兄弟节点div</div>

        <div>兄弟节点div

            <div class="small">子元素div</div>

        </div>

        <span>兄弟节点span,不可选</span>

        <div>兄弟节点div</div>

    </div>

    <script type="text/javascript">

        //相邻兄弟选择器

        //选取prev后面的第一个的div兄弟节点

        $(".prev + div").css("border", "3px groove blue");

    </script>

    <script type="text/javascript">

        //一般相邻选择器

        //选取prev后面的所有的div兄弟节点

        $(".prev ~ div").css("border", "3px groove blue");

    </script>

</body>

</html>

　　

Jquery | 基础 | 慕课网 | 层级选择器的更多相关文章

  1. Jquery | 基础 | 慕课网 | 类选择器

    原生getElementsByClassName()函数的实现代码与jQuery实现代码的比较: <!DOCTYPE html> <html> <head> < ...

  2. Jquery | 基础 | 慕课网 | （*选择器）

    原生JS var elements1 = document.getElementsByTagName('*'); JQ var elements2 = $("*"); <!D ...

  3. Jquery | 基础 | 慕课网 | 元素选择器

    getElementsByTagName方法得到页面所有的<div>元素 var divs = document.getElementsByTagName('div'); 与 同样的效果, ...

  4. Jquery | 基础 | 慕课网 | 基本筛选选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  5. jQuery基础学习7——层次选择器find()方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jQuery基础学习6——基本选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jQuery基础学习8——层次选择器next()和prev()方法

    $('.one + div').css("background","#bbffaa"); //和next()方法是等价的,前后关系,和prev()方法是对立的 ...

  8. jQuery基础学习8——层次选择器children()方法

    $('body > div').css("background","#bbffaa"); //和children()方法是等价的,父子关系,和parent ...

  9. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

随机推荐

  1. （转）C系程序员面试必知必会之大端小端

      C程序员经常被问及的一道面试题是:什么是大端/小端,怎么样判断是大端/小端?大端小端问题对于嵌入式程序员绝对不会陌生(否则,别告诉我你是搞嵌入式的),它与CPU体系结构有关.比如常见的X86处理器 ...

  2. SpringBoot项目 部署到服务器的tomcat下

    把spring-boot项目按照平常的web项目一样发布到tomcat容器下 一.修改pom文件 修改打包方式 修改或增加maven插件 注意: 二.移除嵌入式tomcat插件 三.添加servlet ...

  3. spring MVC （学习笔记）

    web.xml 相关配置 <?xml version="1.0" encoding="UTF-8"?><web-app xmlns=" ...

  4. Spark高级

    Spark源码分析: https://yq.aliyun.com/articles/28400?utm_campaign=wenzhang&utm_medium=article&utm ...

  5. springboot使用thymeleaf 解析异常

    在使用springboot的过程中,如果使用thymeleaf作为模板文件,则要求HTML格式必须为严格的html5格式,必须有结束标签,否则会报错!解决办法如下: 1.你可以使用严格的标签,也就是每 ...

  6. window.name应用于浏览器端数据存储

    本代码简单地分享利用window.name实现浏览器端数据存储: 1.在同一个页面一个地方设置window.name = "abc",另外一个地方读取window.name,自然能 ...

  7. WPF之Binding深入探讨 转载：http://blog.csdn.net/fwj380891124/article/details/8107646

    1,Data Binding在WPF中的地位 程序的本质是数据+算法.数据会在存储.逻辑和界面三层之间流通,所以站在数据的角度上来看,这三层都很重要.但算法在3层中的分布是不均匀的,对于一个3层结构的 ...

  8. 【HDU 4722】 Good Numbers

    [题目链接] 点击打开链接 [算法] f[i][j]表示第i位,数位和对10取模余j的数的个数 状态转移,计算答案都比较简单,笔者不再赘述 [代码] #include<bits/stdc++.h ...

  9. 使用Pycharm官方统计代码行插件统计代码总行数

    最近有需求,需要统计项目代码的总行数,首先想到了使用Pycharm官方的统计行数插件,发现效果还不错. 官方代码统计插件指导:https://plugins.jetbrains.com/plugin/ ...

  10. 当你触摸并按住触摸目标时候，禁止系统默认菜单-webkit-touch-call

    当你触摸并按住触摸目标时候,禁止或显示系统默认菜单. -webkit-touch-callout 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS ...