话不多说，请看效果：

<!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. CSS3解决字母不换行的方法

    CSS3解决字母不换行的方法 <pre>word-wrap: break-word;</pre>

  2. php imagick设置图片圆角的方法

    php imagick设置图片圆角的方法 <pre>header('Content-Type: image/png'); $image = new Imagick('http://stat ...

  3. day5-基本数据类型总结

    一.数字int(..)二.字符串replace/find/join/strip/startswith/split/upper/lower/format tempalte = "i am {n ...

  4. 深入理解计算机系统 第三章 程序的机器级表示 Part2 第二遍

    第一遍对应笔记链接 https://www.cnblogs.com/stone94/p/9943779.html 本章汇编代码中常出现的几个指令及其含义 1.push 操作数的个数:1 将操作数(一般 ...

  5. 打包上传被拒 Guideline 2.5.1 - Performance - Software Requirements

    打包上传被拒 Guideline 2.5.1 - Performance - Software Requirements 在项目中全部搜索:prefs:root 找到后,把这个私有的 NSURL *u ...

  6. Centos 7环境下修改主机名

    步骤如下: 一.首先把虚拟机打开,用root账户进行登录后打开终端 二.我们看到我们虚拟机名称是默认的主机名. 三.用vi编辑器编辑etc目录下的hostname文件,输入“vi /etc/hostn ...

  7. PHP 提交复选框数据

    PHP 提交复选框数据 前台,name要加 []: <input type="checkbox" name="cate[]" value="ca ...

  8. nyoj 168-房间安排 (贪心)

    168-房间安排 内存限制:64MB 时间限制:3000ms 特判: No 通过数:33 提交数:71 难度:2 题目描述: 2010年上海世界博览会(Expo2010),是第41届世界博览会.于20 ...

  9. ZeroC ICE中的对象

    在ZeroC Ice中定义了三种基本对象类型. 它们分别是IceProxy::Ice::Object(于Ice/Proxy.h),Ice::Object(于Ice/Object.h)和Ice::Loc ...

  10. Javascript ----函数表达和形参实参

    1.函数是对象,函数名实际上是函数对象的指针 1.函数声明方式 (函数声明提前) function sum(num1,num2){return num1+num2;} 2.函数表达式 var sums ...