一、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. 关于HttpClient，HttpURLConnection，OkHttp的用法

    1 HttpClient入门实例 1.1发送get请求 /** * HttpClient发送get请求 * @param url 请求地址 * @return * @throws IOExceptio ...

  2. Dynamic Programming | Set 1 (Overlapping Subproblems Property)

    动态规划是这样一种算法范式:将复杂问题划分为子问题来求解,并且将子问题的结果保存下来以避免重复计算.如果一个问题拥有以下两种性质,则建议使用动态规划来求解. 1 重叠子问题(Overlapping S ...

  3. vscode调试angular

    之前在Asp.net MVC + Angular1 的项目中,要调试前台代码都是用浏览器的开发者工具,使用正常,也没有感觉太大的不方便. 后来接触Angular2项目,因为它是要经过编译的,所以在浏览 ...

  4. MyBatis 源码分析系列文章导读

    1.本文速览 本篇文章是我为接下来的 MyBatis 源码分析系列文章写的一个导读文章.本篇文章从 MyBatis 是什么(what),为什么要使用(why),以及如何使用(how)等三个角度进行了说 ...

  5. 【LOJ6036】 「雅礼集训 2017 Day4」编码

    传送门 LOJ Solution 因为?只有两种可能为0,1,所以就把这两个串搞出来. 那么现在?取0和?取1不能并存,前缀不能并存,所以就是一个\(2-SAT\),现在问题在于这个东西可能会有很多条 ...

  6. fscanf_s与scanf_s的宽度参数与缓冲区参数分析

    fscanf_s函数 在文件操作中经常会用到fscanf这个函数,但是在VC和VS中会有警告 意思是编译器觉得fscanf不安全,叫你考虑用一下fscanf_s这个函数来代替fscanf,fscanf ...

  7. 五花八门的CSS

    一.颜色 rgba(0, 0, 0, 0.5) rgba括号中前3个数字代表着 red green blue三种颜色的rgb值,0-255,最后一个是设定这个颜色的透明度即alpha值.范围从0到1, ...

  8. HTTP 总结

    一.概念 特性 1. HTTP协议用于客户端和服务端之间的通信 2. 通过请求和响应的交互达成通信 : HTTP协议规定,请求从客户端发出,最后服务器端响应请求并返回,也就是说,肯定是从客户端开始建立 ...

  9. Javascript高级编程学习笔记（12）—— 引用类型（1）Object类型

    前面的文章中我们知道JS中的值分为两种类型 基础类型的值和引用类型的值 基础类型的值我已经大概介绍了一下,今天开始后面几天我会为大家介绍一下引用类型的值 Object类型 对象是引用类型的值的实例,在 ...

  10. Servlet案例4：用户注册

    数据库准备: CREATE DATABASE web; USE web; CREATE TABLE `user` ( `uid` ) NOT NULL, `username` ) DEFAULT NU ...