话不多说，请看效果：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>04jquer中的层级选择器B</title>

		<script type="text/javascript" src="js/jquery-1.9.1.js" charset="UTF-8"></script>

		<script>

			$(function(){

				//$("div span").css("color","blue");将div下面 所有 的sapn标签字体都改了颜色

				//$("div>span").css("color","blue");将div下面的直系子标签字体都改了颜色

				//$("#sp1 + span").css("color","blue");将id为sp1的标签紧挨着的标签字体都改了颜色(注意：换行也算)

				//$("#sp1~span").css("color","blue");将和id为sp1标签处于同一层级的标签字体都改了颜色

			})

		</script>

		<style>

			div{

				width: 300px;

				height: 300px;

				border: 2px solid red;

			}

		</style>

	</head>

	<body>

		<div>

			<span id="sp1">富强民主，文明和谐</span><br />

			<span>富强民主，文明和谐</span><br />

			<span>富强民主，文明和谐</span><br />

			<p>

				<span>诚信友善，爱国敬业</span><br />

				<span>诚信友善，爱国敬业</span><br />

				<span>诚信友善，爱国敬业</span><br />

			</p>

		</div>

	</body>

</html>

无操作时：

$("div span").css("color","blue");

$("div>span").css("color","blue");

$("#sp1 + span").css("color","blue");

无效果是因为 ：

$("#sp1 + span").css("color","blue");//将id为sp1的标签紧挨着的标签字体都改了颜色(注意：换行也算) ，此时他是对换行进行的操作，我们将换行除去后：

$("#sp1~span").css("color","blue");

jQuery中的层级选择器的更多相关文章

  1. js进阶 10-5 jquery中的层级选择器有哪些

    js进阶 10-5 jquery中的层级选择器有哪些 一.总结 一句话总结: 1.jquery中的层级选择器有哪些? 四种,后代,子代,兄弟,相邻兄弟 2.如何区别jquery中的层级选择器? 记住这 ...

  2. jQuery中的层级选择器（四、二）：后代元素、子元素、相邻元素、兄弟元素

    <!DOCTYPE html> <html> <head> <title>层次选择器</title> <meta http-equiv ...

  3. JQuery学习笔记——层级选择器

    JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...

  4. jQuery入门（1）jQuery中万能的选择器

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  5. jQuery中的:input选择器

    jQuery中的:input选择器 jQuery中的:input选择器包含input, textarea, select 和 button这些标签. <!DOCTYPE html> < ...

  6. js进阶 10-6 jquery中的属性选择器有哪些

    js进阶 10-6 jquery中的属性选择器有哪些 一.总结 一句话总结: 1.第一遍能学会么? 一遍是肯定学不会的,要多学几遍,所以想着怎么加快速度,减少学习的遍数 2.属性选择器是干嘛的? 选择 ...

  7. jquery 中多条件选择器,相对选择器,层次选择器的区别

    一.Jquery常用的过滤选择器如下所示: 1.:first,选取第一个元素,比如$("div:first")选取第一个div元素 2.:last,选取最后一个元素,比如$(&qu ...

  8. JQuery中的id选择器含有特殊字符时，不能选中dom元素

    1.jquery类库在我们实际项目中用的很多,大家经常需要根据控件的id,获取对应的html元素.但是:当id含有特殊字符的时候,是不能选中的 2.jquery的id选择器只支持,单词.阿拉伯数字.下 ...

  9. JQuery中常用的选择器

    属性选择器 1>  [attribute] 概述:匹配包含给定属性的元素. 示例 jQuery 代码:$("div[id]") 描述:查找所有含有 id 属性的 div 元素 ...

随机推荐

  1. sublime3中运行python文件

    sublime3中运行python文件 tools->build system->new build stystem 粘贴下面代码{"cmd":["pytho ...

  2. 对于 TCP 三次握手的理解

    假设名叫 A 和 B 的两个人要进行通信,那么他们两人之间,首先要确保通信顺畅. 而确保通信顺畅,就要从 3 个维度,确定 8 个能力 3 个维度分别是: 1.人知道(A 知道.B 知道) 2.人(A ...

  3. 用正则表达式获取URL中的查询参数

    总结获取url中查询参数的两种方式 通过正则表达式获取单个参数 url中的所有查询参数可以通过 window.location.search 字段获取,以字符串的形式返回.并有固定的格式 ?param ...

  4. Python常用模块之os.path

    os.path.abspath(path) 输入相对路径,返回绝对路径 Python 3.7.0 (v3.7.0:1bf9cc5093, Jun 27 2018, 04:59:51) [MSC v.1 ...

  5. 领扣（LeetCode）二叉树的中序遍历 个人题解

    给定一个二叉树,返回它的中序 遍历. 示例: 输入: [1,null,2,3] 1 \ 2 / 3 输出: [1,3,2] 进阶: 递归算法很简单,你可以通过迭代算法完成吗? 递归的思路很简单,不再累 ...

  6. ASP.NET Core gRPC 使用 Consul 服务注册发现

    一. 前言 gRPC 在当前最常见的应用就是在微服务场景中,所以不可避免的会有服务注册与发现问题,我们使用gRPC实现的服务可以使用 Consul 或者 etcd 作为服务注册与发现中心,本文主要介绍 ...

  7. HBase 基本入门

    目录 一.简介 有什么特性 与RDBMS的区别 二.数据模型 三.安装HBase 四.基本使用 表操作 五.FAQ 参考文档 无论是 NoSQL,还是大数据领域,HBase 都是非常"炙热& ...

  8. djanao请求生命周期

    djanao请求生命周期 浏览器发送请求到服务端 服务端的wsgi服务器接收到来自浏览器的请求, 对request做一些预处理, 把浏览器的请求信息(请求方式, 请求头, socket信息等)都封装在 ...

  9. kube-apiserver 集群服务安装

    目录 创建 kube-apiserver 证书 生成证书和私钥 创建加密配置文件 创建审计策略文件 分发 kube-apiserver 二进制文件 创建后续访问 metrics-server 使用的证 ...

  10. mysql 插入string类型变量时候，需要注意的问题，妈的，害我想了好几个小时！！

    很多人在用php+MySQL做网站往数据库插入数据时发现如下错误: 注册失败!Unknown column '1a' in 'field list' 结果发现用数字提交是没有问题的,其他如char型就 ...