<!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中的层级选择器（四、二）：后代元素、子元素、相邻元素、兄弟元素

    <!DOCTYPE html> <html> <head> <title>层次选择器</title> <meta http-equiv ...

  2. CSS选择器（通配符选择器、标签选择器、类选择器、id选择器、群组选择器、后代选择器、子元素选择器和相邻元素选择器）

    通配符选择器  *   与任何元素匹配 派生选择器: 后代选择器(包含选择器):后代选择器可以选择作为元素后代的元素 A B    对A元素中的B元素应用样式 后代选择器中两个元素间的层次间隔可以是无 ...

  3. css选择器 兄弟选择器 相邻兄弟选择器 子元素选择器

    1.兄弟选择器: ~ 该选择器会选择当前元素之后的所有相邻指定元素(具有相同父元素的兄弟元素): .p ~ li{ color: blue; } <div> <p class=&qu ...

  4. JS获取节点的兄弟,父级,子级元素的方法(js获取子级获取到换行与空格元素-FF)

    先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 < ...

  5. 第二十六篇 jQuery 学习8 遍历-父亲兄弟子孙元素

    jQuery 学习8 遍历-父亲兄弟子孙元素   jQuery遍历,可以理解为“移动”,使用“移动”还获取其他的元素.   什么意思呢?老师举一个例子: 班上30位同学,我是新来负责教这个班学生的老师 ...

  6. jQuery——子元素筛选器

    子元素筛选器 名称 :first-child JQ语法 jQuery( "selector:first-child" ) 说明 :first-child选择器用于匹配作为父元素的第 ...

  7. jquery中获取相邻元素相关的命令：next()、prev()和siblings()

    jquery里我们要获取某个元素的相邻元素时,可以用到的命令有三个: next():用来获取下一个同辈元素. prev():用来获取上一个同辈元素. siblings():用来获取所有的同辈元素. 下 ...

  8. jquery 子元素筛选选择器

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

  9. jquery子元素选择器

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

随机推荐

  1. LODOP打印图片水平居中

    其他居中,查看本博客相关博文:LODOP中打印项水平居中简短问答.图片也属于超文本打印项,因此如果想把图片居中,也需要图片本身内容相对于图片打印项宽度居中,然后再设置打印项居中.如图,同一张图片,都设 ...

  2. go 垃圾回收机制

    转载一篇仔细分析了golang的垃圾回收策略以及发展的一篇文章 地址是https://mp.weixin.qq.com/s?__biz=MzAxNzMwOTQ0NA%3D%3D&mid=265 ...

  3. 远程控制分析之VBS编码转换

    简介 分析这种VBS简单chr()函数编码的脚本技巧.只需要把vbs的execute()函数换成信息输出到控制台(dos窗口)函数就可以了. WSH.Echo "print your mes ...

  4. Spring Cloud 微服务技术整合

    微服务架构风格是一种使用一套小服务来开发单个应用的方式途径,每个服务运行在自己的进程中,并使用轻量级机制通信,通常是HTTP API,这些服务基于业务能力构建,并能够通过自动化部署机制来独立部署,这些 ...

  5. winform窗口关闭，进程没有关掉的解决办法

    /// <summary> /// 窗口关闭删除所有活动线程 /// </summary> /// <param name="sender">& ...

  6. MySQL [Err] 1055--1064 - Expression #1 of ORDER BY clause is not in GROUP BY clause

    1055错误: 方案1: 修改sql_mode的值 set sql_mode = '';set sql_mode = 'NO_ENGINE_SUBSTITUTION,STRICT_TRANS_TABL ...

  7. [转帖]记一次KUBERNETES/DOCKER网络排障

    记一次KUBERNETES/DOCKER网络排障 https://coolshell.cn/articles/18654.html 记得之前在一个公众号里面看过这个文章 讲的挺好的.. 物理机直接跑d ...

  8. PAT甲级1006水题飘过

    题目分析:由于不存在相同的两个时间(24:00:00和00:00:00不会同时存在),则我们假设两个全局变量存放到达的最早的时间和达到的最晚的时间,设置最早的初值为“23:59:59”,设置最晚的初值 ...

  9. hadoop功能与用途

    1.hadoop是什么? 开源的分布式存储和分布式计算平台. 2.hadoop组成? HDFS:分布式文件存储系统,存储海量数据. Mapreduce:并行处理框架,实现任务分配和调度. 3.hado ...

  10. 老司机的自信，让 CDN 加速再加速

    CDN 的存在,加快了用户的访问速度,使用户可以在不提升网速下,获得更好的访问体验.购物时,可以更快的显示商品图片:看电影时,可以随意的拖拽浏览.如果把数据资源比作是一件件包裹,那么用户的带宽就像是一 ...