<!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. Python模块学习filecmp文件比较

    Python模块学习filecmp文件比较 filecmp模块用于比较文件及文件夹的内容,它是一个轻量级的工具,使用非常简单.python标准库还提供了difflib模块用于比较文件的内容.关于dif ...

  2. [Arch] 域名解析常用两步设置

    主站   A 记录        (对应IPv4)   主机记录: @ (表示解析到不带 www 主域名)   值为 IP 主站 CNAME 记录 (表示别名) 主机记录: www   (表示解析到带 ...

  3. activiti学习6:启动流程后动态获取流程图

    目录 activiti学习6:启动流程后动态获取流程图 一.绘图原理 二.根据流程定义id绘图 三.根据流程实例id绘图 3.1 基本原理 3.2 当前节点的获取 3.3 走过的节点的获取 3.4 绘 ...

  4. 前端与算法 leetcode 27.移除元素

    目录 # 前端与算法 leetcode 27.移除元素 题目描述 概要 提示 解析 算法 @(目录) # 前端与算法 leetcode 27.移除元素 题目描述 27.移除元素 概要 题目本身其实挺简 ...

  5. python + selenium + unittest实现简单的UI自动化

    使用的版本是python 3,其中HTMLTestRunner是修改版本,参考以下博客并下载 https://blog.csdn.net/zhanin123/article/details/78950 ...

  6. 在 Java 中不使用多余变量交换两个字符串

    在 Java 中不使用多余变量交换两个字符串 public class Test { public static void main(String[] args) { String a = " ...

  7. MySQL8 全部数据类型

    数字类型 日期类型 字符串类型 CHAR和VARCHAR 表列数和行大小限制 MySQL每个表的硬限制为4096列,但对于给定的表,有效最大值可能更小.确切的列限制取决于几个因素: 表的最大行大小限制 ...

  8. asp.net中的html標籤runat=server時的映射

    asp.net中的html控制項runat=server時的映射 1.標準xhtml標籤:http://blog.csdn.net/TangZhongxin/archive/2009/07/31/43 ...

  9. LeetCode 5215. 黄金矿工（Java）DFS

    题目: 5215. 黄金矿工 你要开发一座金矿,地质勘测学家已经探明了这座金矿中的资源分布,并用大小为 m * n 的网格 grid 进行了标注.每个单元格中的整数就表示这一单元格中的黄金数量:如果该 ...

  10. golang（三）

    map(声明.初始化和 make) 1. 概念2.map 容量3. 用切片作为 map 的值 概念 map 是引用类型,可以使用如下声明: var map1 map[keytype]valuetype ...