话不多说，请看效果：

<!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. thinkphp volist标签中加if判断的写法

    <if condition="$vo['devstatus'] eq 1">在线<else /> 离线</if> IF标签用法 <if c ...

  2. hdu 1028 Sample Ignatius and the Princess III (母函数)

    Ignatius and the Princess III Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K ...

  3. hdu 1817 Necklace of Beads (polya)

    Necklace of Beads Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  4. SpringBoot 源码解析 （七）----- Spring Boot的核心能力 - 自定义Servlet、Filter、Listener是如何注册到Tomcat容器中的？（SpringBoot实现SpringMvc的原理）

    上一篇我们讲了SpringBoot中Tomcat的启动过程,本篇我们接着讲在SpringBoot中如何向Tomcat中添加Servlet.Filter.Listener 自定义Servlet.Filt ...

  5. 搭建Nginx七层反向代理

    基于https://www.cnblogs.com/Dfengshuo/p/11911406.html这个基础上,在来补充下七层代理的配置方式.简单理解下四层和七层协议负载的区别吧,四层是网络层,负载 ...

  6. C语言|博客作业03

    这个作业属于哪个课程 C程序语言设计 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-1/homework/8654 我在这个课程的目标是 ...

  7. vim的查找功能

    vim是一款强大的编辑器. 在vim下要查找字符串: 一,全匹配: 1,从上往下查找,比如“string” :   /string 2,从下往上查找,比如“string” : ?string 二,模糊 ...

  8. code migrate

    1. 从Git上clone 仓库到本地. git clone --mirror http://gittest:gittest@192.168.1.x/x.git 2. push 到codecommit ...

  9. ArcGIS 用QueryTask查询上限1000的问题

    1.打开ArcGIS Server找到自己发布的服务,右键Service Properties,左侧点击Parameters,右侧有一个Maximum number of records return ...

  10. python3 之 趣味数学题（爱因斯坦）

    爱因斯坦曾出过这样一道有趣的数学题: 有一个长阶梯,若每步上 2 阶,最 后剩 1 阶; 若每步上 3 阶,最后剩 2 阶; 若每步上 5 阶,最后剩 4 阶; 若每步上 6 阶,最后剩 5 阶; 只 ...