一、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. 搭建repo服务器和上传源码

    https://blog.csdn.net/qq_28449863/article/details/79992191 https://blog.csdn.net/qq_28449863/article ...

  2. Docker 启动不了容器的问题

    今天在运行 docker 的时候,就是执行 docker exec 命令的时候,发现一直报错.具体的报错信息如下: Error response from daemon: Container XXX ...

  3. git 命令(补充篇)的本质理解

    1 标签, git tag tag_name SHA 本质: 在某次commit 上打上标签tag_name ,标签在代码库中起着"锚点"的作用. 注意: commit 由 SHA ...

  4. Java 实现网络图片的读取与下载

    //网络图片的下载,读取与删除 public static void fileDowAndDel(String httpurl){ try { URL url = new URL(httpurl); ...

  5. 从Redis生成数据表主键标识

    对于MySql的全局ID(主键),我们一般采用自增整数列.程序生成GUID.单独的表作为ID生成器,这几种方案各有优劣,最终效率都不能说十分理想(尤其海量数据下),其实通过Redis的INCR可以很方 ...

  6. Datatable数据转换成excel导出时 数值类型在EXCEL中为文本形式 无法进行统计

    功能背景 有地税上以及各企业的一个缴费情况的比对,基于两表进行匹配查看数据是否在合理范围内,对比对完成表进行数值导出. 2.问题描述 匹配和生成匹配结果导出已成功完成,但是在数值列导出后变成了文本形式 ...

  7. [EXP]Microsoft Windows MSHTML Engine - "Edit" Remote Code Execution

    # Exploit Title: Microsoft Windows (CVE-2019-0541) MSHTML Engine "Edit" Remote Code Execut ...

  8. 调用 Https WebService 使用程序自动生成代理类

    1 商家提供的WebService接口:  https://ws.nciic.org.cn/nciic_ws/services/NciicServices?wsdl 2 在浏览器里打开这个地址,会显示 ...

  9. CSS实现table固定宽度，超过单元格部分内容省略

    <table>单元格的宽度是根据内容的大小自适应的,没有内容的地方就挤到了一起.需要固定表格宽度和每一列的宽度. table-layout:fixed 在固定表格布局中,水平布局仅取决于表 ...

  10. Java之基础学习（数据类型、运算符、分支语句和循环语句）

    在工作用得比较多的是shell和python编程,对于java以前也学习过,使用很少,这次借朋友推荐的java视频教程来温习下. 也是因为现在很多开源测试工具使用java编写的,学习一下更有助于测试工 ...