话不多说，请看效果：

<!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. [LINQ2Dapper]最完整Dapper To Linq框架(一)---基础查询

    此例子是使用LINQ2Dapper封装,效率优于EntityFramwork,并且支持.NetFramework和.NetCore框架,只依赖于Dapper 支持.net framework4.5.1 ...

  2. Linux\CentOS Tomcat 配置

    需要注意的是:安装 Tomcat 之前需要把 jdk 安装好. 一.下载安装包 - 安装可以在官网自行下载,下载 tar.gz 包便可. 二.解压缩: tar -zxvf apache-tomcat- ...

  3. centos6官网镜像dvd1和dvd2的解释

  4. 过滤条件的时候用between和<>的区别

    无论是sqlsever还是oracle都支持between函数, 2个函数的基本语法是 WHERE A BETWEEN 1 AND 2/ WHERE A >=1 AND A <=2 ,be ...

  5. volatile变量能保证线程安全性吗？为什么？

    在谈及线程安全时,常会说到一个变量——volatile.在<Java并发编程实战>一书中是这么定义volatile的——Java语言提供了一种稍弱的同步机制,即volatile变量,用来确 ...

  6. python-语言元素

    变量命令 对于每个变量我们需要给它取一个名字.在python中,变量命名需要遵循一下这些必须遵守硬性规则和强烈建议遵守的非硬性规则. 硬性规则 变量名由字母(广义的Unicode字符,不包括特殊字符) ...

  7. thinking in JAVA 编译记录

    编辑/编译<thinking in JAVA>源代码 一.下载源代码 首先,我阅读的是<thinking in JAVA>第四版,因此按照书中提供的链接找到了mindview主 ...

  8. Java数组深入

    Java数组深入 内存中的数组 前边提到:数组是一种引用类型,数组引用变量只是一个引用,当它指向有效内存的时候才可以通过数组变量来访问数组元素,也就是说数组变量和数组元素在内存中是分开放的. 可以这么 ...

  9. 学习Python第一天：找了4本专属小白的书籍（前期入门打基础）

    我们提供一个初学者最好的Python书籍列表.Python是一个初级程序员可以学习编程的最友好语言之一.为了帮助您开始使用Python编程,我们分享此列表.泡一杯茶,选一本书阅读,开始使用Python ...

  10. SQL SERVER中SELECT和SET赋值相同点与不同点

    SELECT和SET在SQL SERVER中都可以用来对变量进行赋值,但其用法和效果在一些细节上有些不同. 1. 在对变量赋值方面,SET是ANSI标准的赋值方式,SELECT则不是.这也是SET方式 ...