话不多说，请看效果：

<!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. 003.Kubernetes二进制部署准备

    一 前置准备 1.1 前置条件 相应的充足资源的Linux服务器: 设置相应的主机名,参考命令: hostnamectl set-hostname k8smaster Mac及UUID唯一: 若未关闭 ...

  2. Linux下mysql的主从复制配置

    1.准备两台数据库环境,或者单台多实例环境,能正常启动和登录. 数据库的安装和多实例配置请参考https://www.cnblogs.com/qiuhom-1874/p/9757061.html. 2 ...

  3. Idea集成SpringBoot实现两种热部署方式（亲测有效）

    即将介绍的两种热部署方式: 1.SpringLoaded 2.DevTools 区别: SpringLoader:SpringLoader 在部署项目时使用的是热部署的方式. DevTools:Dev ...

  4. nyoj 274-正三角形的外接圆面积 (R = PI * a * a / 3)

    274-正三角形的外接圆面积 内存限制:64MB 时间限制:1000ms 特判: No 通过数:14 提交数:22 难度:0 题目描述: 给你正三角形的边长,pi=3.1415926 ,求正三角形的外 ...

  5. Centos内核参数优化

    关于内核参数优化 net.ipv4.tcp_max_tw_buckets = 6000 net.ipv4.ip_local_port_range = 1024 65000  net.ipv4.tcp_ ...

  6. H5 - css3（学习c3的第一天）

    css3 中的转换:可以对元素进行移动.缩放.装懂.拉长或拉伸. 属性值:transform 每个浏览器的内核都不同,所以对应的前缀也不同,谷歌的是:  -webkit-  :  ie的是  -ms- ...

  7. dbstructsync 多套mysql环境表、字段、索引的差异sql产出（原创）

    最近写了一个工具(比较两套测试环境数据库表.表字段.索引的差异) 功能:可以比较两套环境中mysql指定库中表.表字段及索引的差异,返回具体需要同步的执行sql A环境的数据库db 作为sourced ...

  8. C#音频截取与原文匹配

    1.需求 上传一个音频文件(例如英语听力的音频)与音频对应的原文word文档.大概估算音频中一段对话到另一端对话的时间间隔,将音频截取为不同对话的小音频文件,通过百度语音识别转换成英文,然后与原文对比 ...

  9. webpack4打包的一些坑

    1.安装webPack看官方文档就可以了,主要是打包,我安装的是4+以上的 官网中文教程:https://www.webpackjs.com/guides/installation/ 2.我是在php ...

  10. Oracle 分区表管理之组合分区（分区索引失效与性能比较）

    整体结构如下: Oracle  分区表管理之组合分区(分区索引失效与性能比较) 虽然老早就使用了分区表,终于有时间写有关分区表的内容:不是所有的场景数据量变大需要用到分区表,一般单表数据超过2g可以考 ...