一、Jquery的选择器：

层级选择器； 
1、空格                div    span              div中的包含的所有span后代元素 
2、 >                    div > span              紧密相连的直接子后代元素 
3、+                     div + span              下一个紧密相邻的元素如果紧跟着后面不是span则取不到，

可以用 nextAll("span:first") 取元素后面第一个出现的span,

当前位置开始，后面所有的同辈元素nextAll("div")。

4、~                      div ~ span             选取 div 后面的同辈元素 同 nextAll("span");

jquery的 siblings()方法与位置无关 只要是同一层级的元素就可以选取。

5、 prevAll                                          元素前面的所有同辈元素

效果：

源码：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>jquery 学习1</title>

<!--  导入jquery库 -->

<script type="text/javascript" src="jquery/jquery.js"></script>

<script type="text/javascript">

$(function(){

    $("#btn1").click(function(){//body元素下所有层级的div

        $("body div").css("background","#FFBBAA");

    });

    $("#btn2").click(function(){//body元素取第一层级的div

        $("body > div").css("background","#FFBBAA");

    });

    $("#btn3").click(function(){//id为d1的元素相邻的下一个span元素

        //如果不相邻此方法不管用。

        //$("#d1 + span").css("background","#FFBBAA");

        $("#d1").nextAll("div:first").css("background","#FFBBAA");

    });

    $("#btn4").click(function(){//id为d3的元素下所有同辈元素

        $("#d3 ~ div").css("background","#FFBBAA");

    });

    $("#btn5").click(function(){//id为d3的元素下所有同辈元素

        $("#d3").siblings("div").css("background","#FFBBAA");

    });

    $("#btn6").click(function(){//id为d3的元素下所有同辈元素

        $("#d3").prevAll("div").css("background","#FFBBAA");

    });

})

</script>

</head>

<body>

Jquery的选择器：

层级选择器；

<br>

1、空格          div  span  div下的所有后代元素

<br>

2、   >     div > span 后代元素

<br>

3、+            div + span  下一个相邻的元素   nextAll("span:first")    当前位置开始，后面所有的同辈元素nextAll("div")

<br/>

4、~            div  ~ span 选取 div <strong>后面</strong>的同辈元素   jquery的 siblings()方法与位置无关 只要是同一层级的元素就可以选取。

<br/>

5、 prevAll      元素前面的所有同辈元素

<hr>

<button id="btn1">获取body中所有的div元素</button>

<button id="btn2">获取body中直接子元素是div的{取所有的子集，孙子辈及后代不取}</button>

<button id="btn3">选择id为d1的下一个相邻元素</button>

<button id="btn4">获取id为d3的后面的所有兄弟元素</button>

<button id="btn5">获取id为d3的所有兄弟元素</button>

<button id="btn6">获取id为d3的前面的所有的元素</button>

<p>

子层

<div id="d1"> 孙子层d1  </div>

<span>  这是一个行信息</span>

<div>

div 孙子层

</div>

</p>

<hr>

<div  id="d3">

子层2

<div style="background:#FFFFFF"> 孙子层2   </div>

<br/>

<span> 这是一个行信息2</span>

<div id="d2">

div 孙子层2

</div>

</div>

<br/>

<div>

这是第三个div层

</div>

<br/>

<span>这是第四个span</span>

<p>

<div> 这是第5个层</div>

</p>

</body>

</html>

(5)Jquery1.8.3快速入门_层次选择器的更多相关文章

  1. (8)Jquery1.8.3快速入门_可见性选择器

    一.Jquery的可见性选择器: 可见性选择器: 1.:visable 筛选可以见的元素 2. :hidden 筛选不可见的元素 效果: 源码: <!DOCTYPE html> <h ...

  2. (6)Jquery1.8.3快速入门_过滤选择器

    一.Jquery的基本过滤选择器: 基本过滤选择器: 1. :first 选取第一个元素 2. :last 选取最后一个元素 3.:not(selector) 去除所有与给定的选择器匹配的元素 4.: ...

  3. (4)Jquery1.8.3快速入门_基本选择器

    一.Jquery选择器: 基本选择器: 1.id                           #id      根据元素的id获取的唯一元素. 2.class                  ...

  4. (7)Jquery1.8.3快速入门_内容过滤选择器

    一.Jquery的内容过滤选择器: 内容过滤选择器: 1.:contains(text) 选取含有文本内容为text的元素 2. :empty 选取不包含子元素或者文本为空的元素 3.:has(sel ...

  5. Spring_MVC_教程_快速入门_深入分析

    Spring MVC 教程,快速入门,深入分析 博客分类: SPRING Spring MVC 教程快速入门  资源下载: Spring_MVC_教程_快速入门_深入分析V1.1.pdf Spring ...

  6. 【笔记目录2】【jessetalk 】ASP.NET Core快速入门_学习笔记汇总

    当前标签: ASP.NET Core快速入门 共2页: 上一页 1 2  任务27:Middleware管道介绍 GASA 2019-02-12 20:07 阅读:15 评论:0 任务26:dotne ...

  7. (1)Jquery1.8.3快速入门_helloworld

    jquery 快速入门 学习记录 1.第一个jquery程序 helloworld: 需要导入Jquery1.8.3的库 ,下载地址: jQuery1.8.3   代码令另存到本地 保存为jquery ...

  8. Robot Framework 快速入门_中文版

    目录 介绍 概述 安装 运行demo 介绍样例应用程序 测试用例 第一个测试用例 高级别测试用例 数据驱动测试用例 关键词keywords 内置关键词 库关键词 用户定义关键词 变量 定义变量 使用变 ...

  9. 【笔记目录1】【jessetalk 】ASP.NET Core快速入门_学习笔记汇总

    当前标签: ASP.NET Core快速入门 共2页: 1 2 下一页  任务50:Identity MVC:DbContextSeed初始化 GASA 2019-03-02 14:09 阅读:16 ...

随机推荐

  1. django创建上下文

    在app中创建context_processes.py(可以是别的名字),然后加载到settings里,这样所有的网页都可以传入变量 from .models import User def app0 ...

  2. 使用root用户登录到AWS EC2服务器

    首先是在putty中使用ec2-user登录服务器后,创建root账户的密码,使用如下命令: sudo passwd root 然后会提示你输入new password,输入之后回车,会让你retyp ...

  3. 使用netstat命令查看端口的使用情况

    Windows如何查看端口占用情况操作步骤如下: 开始--运行--cmd 进入命令提示符,输入netstat -ano 即可看到所有连接的PID 之后在任务管理器中找到这个PID所对应的程序如果任务管 ...

  4. 分布式系统中 Unique ID 的生成方法

    http://darktea.github.io/notes/2013/12/08/Unique-ID Snowflake 生成的 unique ID 的组成 (由高位到低位): 41 bits: T ...

  5. Swift5 语言指南(八) 控制流

    Swift提供了各种控制流程语句.这些包括while多次执行任务的循环; if,guard和switch基于特定条件执行不同代码分支的语句; 和语句,如break和continue对执行流在你的代码转 ...

  6. Docker - 配置DaoCloud的Docker加速器

    由于众所周知的原因,从Docker Hub难以高效地下载镜像. 除了使用VPN或代理之外,最为有效的方式就是使用Docker国内镜像. DaoCloud是首个提供国内免费Docker Hub镜像的团体 ...

  7. iOS开发笔记－一种任意字体、颜色混排UILabel的实现

    最近开发新App,射妓狮给的图上出现一种不同大小字体混排的Label,就像下面这种: 想了想,最简单的方法是使用多个UILabel排列显示,但是这样不仅麻烦而且效果也不好,索性自定义UILabel来尽 ...

  8. 递归查询区域信息及子区域到advTree

    效果: DataTable dtArea = new DataTable(); private void Form1_Load(object sender, EventArgs e) { Node n ...

  9. 深入浅出分析MySQL MyISAM与INNODB索引原理、优缺点分析

    本文浅显的分析了MySQL索引的原理及针对主程面试的一些问题,对各种资料进行了分析总结,分享给大家,希望祝大家早上走上属于自己的"成金之路". 学习知识最好的方式是带着问题去研究所 ...

  10. 全网最详细的Eclipse里如何正确新建普通的Java web项目并发布到Tomcat上运行成功【博主强烈推荐】（图文详解）

    不多说,直接上干货! 首先,大家要明确,IDEA.Eclipse和MyEclipse等编辑器之间的新建和运行手法是不一样的. 如果是在Myeclipse里,则是File -> new -> ...