<!DOCTYPE html>

<html>

<head>

<title>层次选择器</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>

    <style type="text/css">

    	body{

    		font-family: "Microsoft YaHei"

    	}

    	.divCls {

    		width:180px;

    		height:180px;

    		color: white;

    		border: solid 1px white;

    		margin-left: 10px;

    		float: left;

    	}

    	.subDivCls {

    		width:60px;

    		height:60px;

    		color:white;

    		border: solid 1px white;

    		font-size: 12px;

    		margin: 5px;

    		float: right;

    	}

    	.spanCls{

    		color:white;

    		border: solid 1px white;

    		margin: 5px;

    		float: left;

    		height: 50px;

    	}

    	div span{

    		border: solid 1px white;

    		font-size: 12px;

    		margin:5;

    	}

    	.cGreen{background-color: #4CA902}

    	.cPink{background-color: #ED4A9F}

    	.cBlue{background-color: #0092E7}

    	.cCyan{background-color: #01A6A2}

    	.cYellow{background-color: #DCA112}

    	.cRed{background-color: #B7103B}

    	.cPurple{background-color: #792F7C}

    	.cBlack{background-color: #110F10}

    	.hide{display: none;}

    </style>

    <script type="text/javascript">

    	/* 层级选择器：

				通过DOM元素之间的层次关系来获取特定的元素，

			例如后代元素，子元素，相邻元素和兄弟元素。

			1.后代元素选择器：

				选取这个div中所有的span(不论其中嵌了多少层)

				#div2 span、#div2 .span1、#div2 #span2

			2.子元素选择器：

				选中当前div下的第一层元素。->元素集合

				#div2 > span、#div2 > .span1

			3.相邻元素：

				当前元素同层级的相邻的兄弟元素。->元素集合

				#div2 + 、#div2 + div

			4.兄弟元素：

				当前元素同层级的所有兄弟元素。->元素集合

    	*/

    	$(document).ready(function() {

			/* <input type="button" id="btn1" value="选取id为div2的所有span后代元素"> */

			// 后代选择器

			$("#btn1").click(function() {

				/*

				$("#div2 ")：单一个空格，表示取所有的子元素；

				如果要取特定标签的元素、特定id的元素或特定class的元素

				要加上对应的名称。

				注意：可以无限往后嵌套。

				*/

				// $("#div2 ").addClass("cBlack");

				// $("#div2 #span1").addClass("cBlack");

				// $("#div2 .subDivCls").addClass("cBlack");

				$("#div2 span").addClass("cBlack");

			});

			/* <input type="button" id="btn2" value="选取id为div2的所有span子元素"> */

			// 子元素选择器

			$("#btn2").click(function() {

				$("#div2 > span").addClass("cBlack");

			});

			/* <input type="button" id="btn3" value="选取id为div2的下一个div兄弟元素"> */

			/*

			下一个兄弟元素

			相邻元素选择器，只能下一个

			*/

			$("#btn3").click(function() {

				// $("#div2 + div").addClass("cBlack");

				/* 在下觉得用上面的写法较好，因为是下一个兄弟元素

				    并不一定就是div，因为只能取next位置的元素节点，所以不如省略标签名称

				    正确率更高，也不容易引起歧义。*/

				// 注意：只有next：+；没有$("#div2 -").addClass("cBlack");这种写法！  :(

				$("#div2 +").addClass("cBlack");

				// 但是其实 #div2 + div 也有一个好处，先确认next元素为div元素才会选中，不然不会选中！

			});

			/* <input type="button" id="btn4" value="选取id为div2之后的所有div兄弟元素"> */

			// 兄弟选择器，只能从当前开始，同级往后。

			$("#btn4").click(function() {

				/*

				此方法获取了当前div2之后的所有的兄弟节点元素(注意是之后的！)

				什么都不写的话，就获取了所有，如果想要获取特定类型的标签节点。

				就要加上对应的节点名称，例如题上的div2之后的所有的div

				*/

				// $("#div2 ~").addClass("cBlack");

				$("#div2 ~ div").addClass("cBlack");

			});

			/* <input type="button" id="btn5" value="选取id为div2的所有div兄弟元素"> */

			/*

			此方法不是层级选择器中有的，是拓展的，

			为了补充上面的只能选择之后的兄弟标签，

			那么现在通过这个补充的方法就可以选择

			到所有的兄弟标签了。

			sbilings()：获取所有的兄弟标签的方法

			*/

			$("#btn5").click(function() {

				// 选择所有的兄弟标签

				// $("#div2").siblings().addClass("cBlack");

				// 只要兄弟标签中的div标签

				$("#div2").siblings("div").addClass("cBlack");

			});

		});

    </script>

</head>

  <body>

    <div id="div1" class="divCls cGreen">id 为div1 的div<br><br>

    	<div class="subDivCls">class为subDivCls的div</div>

   	</div>

    <div id="div2" class="divCls cPink">id 为div2 的div

    	<br><br>

    	<span id="span1">div2里面的span,id为span1</span>

    	<br><br>

    	<div class="subDivCls" style="float:left;">class为subDivCls的div</div>

    	<div class="subDivCls">subDivCls<br>

    		<span id="span2">span2</span>

    	</div>

    </div>

    <div id="div3" class="divCls cBlue" title="itcast">

    id 为div3 的div，title为itcast，包含隐藏输入框

		<input type="hidden" value="hello">

    </div>

    <span class="spanCls cRed">div3的兄弟元素span</span>

    <div id="div4" class="divCls cYellow">id 为div4 的div<br>

	    <div class="subDivCls" style="float:left;">subDivCls<br>

    		<span id="span2">span4</span></div>

	    <div class="subDivCls" title="itcast">title为itcast</div>

	    <div class="subDivCls" style="float:left;">class为subDivCls的div</div>

	    <div class="subDivCls"></div>

    </div>

    <div class="divCls cCyan hide">class设置为隐藏的，隐藏div</div>

    <div class="divCls cPurple" style="display: none">style的display为none的隐藏div</div>

    <div style="clear: both;"></div>

    <br><br>

    <hr>

    <input type="button" id="btn1" value="选取id为div2的所有span后代元素">

    <input type="button" id="btn2" value="选取id为div2的所有span子元素">

    <input type="button" id="btn3" value="选取id为div2的下一个div兄弟元素">

    <input type="button" id="btn4" value="选取id为div2之后的所有div兄弟元素">

    <input type="button" id="btn5" value="选取id为div2的所有div兄弟元素">

  </body>

</html>

jQuery中的层级选择器（四、二）：后代元素、子元素、相邻元素、兄弟元素的更多相关文章

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

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

  2. jQuery中的层级选择器

    话不多说,请看效果: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

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

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

  4. jQuery中的常用内容总结(二)

    jQuery中的常用内容总结(二) 转载请注明地址: http://www.cnblogs.com/funnyzpc/p/7571993.html 前言 距离上次博客更新已经有二十来天了(●′ω`●) ...

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

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

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

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

  7. jQuery中的:input选择器

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

  8. Vue中，给当前元素添加类名移除兄弟元素类名的方法

    在Vue中,给当前元素添加类名移除兄弟元素类名的方法 今天在项目中需要做一个效果,点击对应的li改变当前的color,其他的li取消颜色,在jQuery中这很容易,由于之前已经引入了jQuery,所以 ...

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

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

随机推荐

  1. R Studio Server install fails - hard coded libssl1.0.0 dependency out of date ...

    wget http://ftp.debian.org/debian/pool/main/o/openssl/libssl1.0.0_1.0.1t-1+deb8u6_amd64.deb md5sum l ...

  2. 2019 Mac下安装运行Homestead环境

    为了能提高自己的价值,还是要坚持学习新东西才行.这不,从多学会一个PHP开发框架开始.在开始使用Laravel之前,很多"经验"告诉我要先安装Homestead,至于好处,大家可以 ...

  3. Luogu2839 [国家集训队]middle 题解

    题目很好,考察对主席树的深入理解与灵活运用. 首先看看一般解决中位数的思路,我们二分一个 \(mid\),将区间中 \(\ge mid\) 的数置为 \(1\),小于的置为 \(-1\),然后求区间和 ...

  4. kafka单机环境配置以及基本操作

    安装地址(已亲测有效):https://www.linuxidc.com/Linux/2019-03/157650.htm

  5. windows7查看和关闭占用的端口

    1. 查看占用的端口 cmd 后输入命令:netstat -aon|findstr [要查的端口] 如欲查端口1099,输入:netstat -aon|findstr 1099 2. 关闭占用的端口 ...

  6. Qt 入门 ---- 如何在程序窗口显示图片？

    步骤: 1. 选择资源(准备图片) 2. 加载资源(导入图片) 3. 使用资源(显示图片) 具体操作流程: ① 从网上寻找合适的图片素材,下载到本地,在项目根目录下创建一个images文件夹存储程序中 ...

  7. Drupal < 7.32 “Drupalgeddon” SQL注入漏洞（CVE-2014-3704）

    影响版本Drupal < 7.32

  8. Couchdb 垂直权限绕过漏洞（CVE-2017-12635）

    影响版本:小于 1.7.0 以及 小于 2.1.1 首先,发送如下数据包: 修改数据包 { "type": "user", "name": ...

  9. 本地Git项目搭建和文件操作

    Git项目搭建 git init ---在该文件夹下进入cmd/terminal git clone [url] ---克隆远程仓库到本地 Git文件操作 文件的四种状态: · Untracked:未 ...

  10. Java面向对象02——回顾方法（定义、调用）及加深

    方法的定义  package oop.demon01; ​ //Demon01 类 public class Demon01 {          //main 方法     public stati ...