1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title></title>
  7.     <link rel="stylesheet" href="imooc.css" type="text/css">
  8.     <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  9. </head>
  10.  
  11. <body>
  12.     <h2>子选择器与后代选择器</h2>
  13.     <div class="left">
  14.         <div class="aaron">
  15.             <p>div下的第一个p元素</p>
  16.         </div>
  17.         <div class="aaron">
  18.             <p>div下的第一个p元素</p>
  19.         </div>
  20.     </div>
  21.     <div class="right">
  22.         <div class="imooc">
  23.             <article>
  24.                 <p>div下的article下的p元素</p>
  25.             </article>
  26.         </div>
  27.         <div class="imooc">
  28.             <article>
  29.                 <p>div下的article下的p元素</p>
  30.             </article>
  31.         </div>
  32.     </div>
  33.  
  34.     <script type="text/javascript">
  35.         //子选择器
  36.         //$('div > p') 选择所有div元素里面的子元素P
  37.         $('div > p').css("border", "1px groove red");
  38.     </script>
  39.  
  40.     <script type="text/javascript">
  41.         //后代选择器
  42.         //$('div  p') 选择所有div元素里面的p元素
  43.         $('div p').css("border", "1px groove red");
  44.     </script>
  45.  
  46.     <h2>相邻兄弟选择器与一般兄弟选择器</h2>
  47.     <div class="bottom">
  48.         <div>兄弟节点div, +~选择器不能向前选择</div>
  49.         <span class="prev">选择器span元素</span>
  50.         <div>span后第一个兄弟节点div</div>
  51.         <div>兄弟节点div
  52.             <div class="small">子元素div</div>
  53.         </div>
  54.         <span>兄弟节点span,不可选</span>
  55.         <div>兄弟节点div</div>
  56.     </div>
  57.  
  58.     <script type="text/javascript">
  59.         //相邻兄弟选择器
  60.         //选取prev后面的第一个的div兄弟节点
  61.         $('.prev + div').css("border", "3px groove blue");
  62.     </script>
  63.  
  64.     <script type="text/javascript">
  65.         //一般相邻选择器
  66.         //选取prev后面的所有的div兄弟节点
  67.         $('.prev ~ div').css("border", "3px groove blue");
  68.     </script>
  69.  
  70. </body>
  71.  
  72. </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. netty-websocket-spring-boot-starter不同url端口复用

    netty-websocket-spring-boot-starter是一个基于netty的websocket服务端,目前笔者使用的版本依托于Springboot.官方网址https://github ...

  2. 【loj6538】烷基计数 加强版 加强版 Burnside引理+多项式牛顿迭代

    别问我为啥突然刷了道OI题,也别问我为啥花括号不换行了... 题目描述 求含 $n$ 个碳原子的本质不同的烷基数目模 $998244353$ 的结果.$1\le n\le 10^5$ . 题解 Bur ...

  3. 部署TiDB集群

    架构图 节点规划 120.52.146.213 Control Machine 120.52.146.214 PD1_TiDB1 120.52.146.215 PD2_TiDB2 120.52.146 ...

  4. Java对象在内存的结构

    一.内存布局 对象在内存中存储的结构由三部分组成:对象头.实例数据.对齐填充. 对象头 MarkWord(标记字段):哈希码.分代年龄.锁标志位.偏向线程ID.偏向时间戳等信息.Mark Word被设 ...

  5. git删除本地分支，远端分支

    br为远端分支名字. 删除local分支 git branch -d 分支名

  6. Java IO 与 NIO 服务器&客户端通信小栗子

    本篇包含了入门小栗子以及一些问题的思考 BIO package com.demo.bio; import java.io.*; import java.net.ServerSocket; import ...

  7. MATLAB 安装 cvx 工具箱

    步骤: matlab本身是没有cvx的工具箱,需要到[cvx主页],「http://cvxr.com/cvx/」上下载,菜单上有个「download」,进入后选择适合你的版本下载: 将cvx压缩包解压 ...

  8. Django-12-auth认证组件

    1. 介绍 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册.用户登录.用户认证.注销.修改密码等功能. Django作为一个完美主义者的终极框架,当然也会 ...

  9. Python yield与实现（源码分析 转）

    转自:https://www.cnblogs.com/coder2012/p/4990834.html

  10. springboot IDEA新建Maven项目的Plugins出现红线的解决方法

    将pom.xml文件copy到桌面,删除项目中的pom.xml.发现项目maven中没有任何东西后,然后将桌面的pom.xml粘贴到项目目录下,刷新maven就ok了