一、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. 巧用 Jersey RESTful WebService框架解决文件上传乱码

    一.当我们使用jersey框架封装的restful进行文件上传时,会出现中文乱码,试用了过滤器设置编码都不管用.仔细想了很久解决办法,就用一个servelt来代替这个上传的restful接口实现上传的 ...

  2. turtle库实现汉诺塔

    import turtleturtle.screensize(800,800) class Stack: def __init__(self): self.items = [] def isEmpty ...

  3. 设置Acad2008默认启动 win10设置默认cad2008启动 调试设置.

    Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\AutoCAD.Drawing.17\shell\open\command]@=&quo ...

  4. WebRTC 学习之 概念总结

    在学习WebRTC的时候,接触到了好多新的概念,在这里做一下备忘吧 RTMP协议 Real Time Messaging Protocol(实时消息传输协议).该协议基于TCP,是一个协议族,包括RT ...

  5. Liferay7 BPM门户开发之21: 理解消息总线（Message Bus）体系

    Liferay Message Bus提供了松耦合的消息发送接收机制(生产和消费的设计模式),用于本地服务,不支持远程服务,支持集群. 主要用途: 两个或多个插件之间的通讯. 在事件中发送搜索索引,比 ...

  6. spring boot 集成freemarker

  7. ZooKeeper和Curator相关经验总结

    一.关于ZooKeeper的watch用法,需要注意 详细说明如下: ZooKeeper Watches All of the read operations in ZooKeeper - getDa ...

  8. docker容器中Postgresql 数据库备份

    查看运行的容器: docker ps 进入目标容器: docker exec -u root -it 容器名 /bin/bash docker 中,以root用户,创建备份目录,直接执行如下命令, p ...

  9. 如何在IDEA里给大数据项目导入该项目的相关源码（博主推荐）（类似eclipse里同一个workspace下单个子项目存在）（图文详解）

    不多说,直接上干货! 如果在一个界面里,可以是单个项目 注意:本文是以gradle项目的方式来做的! 如何在IDEA里正确导入从Github上下载的Gradle项目(含相关源码)(博主推荐)(图文详解 ...

  10. solr入门

    Solr采用Lucene搜索库为核心,提供全文索引和搜索开源企业平台,提供REST的HTTP/XML和JSON的API,如果你是Solr新手,那么就和我一起来入门吧!本教程以solr4.8作为测试环境 ...