一、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. http错误代码提示

    1×× 保留 2×× 表示请求成功地接收 3×× 为完成请求客户需进一步细化请求 4×× 客户错误 5×× 服务器错误 200  正常:请求已完成.  201  正常:紧接 POST 命令.  202 ...

  2. VDD,VCC,VSS,VEE,VDDA,VSSA,

    VDD是主供电电源,也是IO口输出电平的输入电源.VDDA(A表示模拟)是模拟电源,当使用到模拟信号的时候,比如AD(模数)或者DA(数模)的时候,系统会使用VDDA的电压作为参考电压来.不要求精准使 ...

  3. Eclipse中一些真正常用的快捷键

    F2 文件重命名(要使用某个过长的文件名或者不好打的文件名时,直接F2再Ctrl+C非常好用,比如:Validform_v5.3.2_min.js) Ctrl+S 保存当前文件 Ctrl+Shift+ ...

  4. Codeforces791 C. Bear and Different Names

    C. Bear and Different Names time limit per test 1 second memory limit per test 256 megabytes input s ...

  5. MySQL DDL--ghost工具学习

    GHOST工作流程图: GHOST工作原理: .首先新建一张ghost表,结构与源表相同 .使用alter命令修改ghost表 3.1.模拟从库命令获取主库上该表的binlog(基于全镜像的行模式的b ...

  6. Associative Containers

    Notes from C++ Primer Associative containers differ in fundamental respect from the sequential conta ...

  7. rocketmq搭建趟坑记

    这个坑对小白来讲可能要趟很久才能过,我就是这样~~明明很简单的配置,搞了半天 我用的是rocketmq4.1.0,配置了jvm参数,都能正常启动,且能在线上运行demo,但是线下就是连不上 在conf ...

  8. ajax 请求被终止 chrome查询发现请求状态status为canceled

    检查页面的network执行中发现页面被刷新了url改变了导致请求在请求过程中被终止了. 检查代码发现在 submit方法中最后写了个  location.reload();方法 来重载页面 虽然是卸 ...

  9. hdu 5972---Regular Number(字符串匹配)

    题目链接 Problem Description Using regular expression to define a numeric string is a very common thing. ...

  10. CentOS7安装tyk（内部部署）

    CentOS7安装tyk(内部部署) 参考 官方文档 github 环境准备 #确保端口3000处于打开状态:Dashboard使用该端口来提供GUI和Developer Portal #Tyk需要P ...