jQuery中的层级选择器（四、二）：后代元素、子元素、相邻元素、兄弟元素
<!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中的层级选择器（四、二）：后代元素、子元素、相邻元素、兄弟元素的更多相关文章
- js进阶 10-5 jquery中的层级选择器有哪些
js进阶 10-5 jquery中的层级选择器有哪些 一.总结 一句话总结: 1.jquery中的层级选择器有哪些? 四种,后代,子代,兄弟,相邻兄弟 2.如何区别jquery中的层级选择器? 记住这 ...
- jQuery中的层级选择器
话不多说,请看效果: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
- JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
- jQuery中的常用内容总结(二)
jQuery中的常用内容总结(二) 转载请注明地址: http://www.cnblogs.com/funnyzpc/p/7571993.html 前言 距离上次博客更新已经有二十来天了(●′ω`●) ...
- js进阶 10-6 jquery中的属性选择器有哪些
js进阶 10-6 jquery中的属性选择器有哪些 一.总结 一句话总结: 1.第一遍能学会么? 一遍是肯定学不会的,要多学几遍,所以想着怎么加快速度,减少学习的遍数 2.属性选择器是干嘛的? 选择 ...
- jQuery入门（1）jQuery中万能的选择器
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jQuery中的:input选择器
jQuery中的:input选择器 jQuery中的:input选择器包含input, textarea, select 和 button这些标签. <!DOCTYPE html> < ...
- Vue中，给当前元素添加类名移除兄弟元素类名的方法
在Vue中,给当前元素添加类名移除兄弟元素类名的方法 今天在项目中需要做一个效果,点击对应的li改变当前的color,其他的li取消颜色,在jQuery中这很容易,由于之前已经引入了jQuery,所以 ...
- jquery 中多条件选择器,相对选择器,层次选择器的区别
一.Jquery常用的过滤选择器如下所示: 1.:first,选取第一个元素,比如$("div:first")选取第一个div元素 2.:last,选取最后一个元素,比如$(&qu ...
随机推荐
- 禁用ipv6的两种方法
1 通过系统配置文件/etc/sysctl.conf 在sysctl.conf文件中添加行 # 禁用整个系统所有接口的IPv6 net.ipv6.conf.all.disable_ipv6 = 1 # ...
- HTML - form表单操作
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 开源框架是如何使用设计模式的-MyBatis缓存机制之装饰者模式
写在前面 聊一聊MyBatis是如何使用装饰者模式的,顺便回顾下缓存的相关知识,可以看看右侧目录一览内容概述. 装饰者模式 这里就不了它的概念了,总结下就是套娃.利用组合的方式将装饰器组合进来,增强共 ...
- MySQL 8.x 新版本特性赶紧学！！Linux 服务器上安装 MySQL 8.x
我是陈皮,一个在互联网 Coding 的 ITer,微信搜索「陈皮的JavaLib」第一时间阅读最新文章,回复[资料],即可获得我精心整理的技术资料,电子书籍,一线大厂面试资料和优秀简历模板. 引言 ...
- ThinkPHP5修改验证码的配置参数
当前使用的ThinkPHP的版本是5.0.24. 在模版试图中调用验证码生成函数:{:captcha_img()},或者<img src="{:captcha_src()}" ...
- Html模板引擎Handlerbars使用demo
1.自定义demo <html> <head> <script src="./handlebars-v4.0.12.js"></scrip ...
- python项目案例
python项目案例1:----此学习案例用python3编写,摘自明日科技,感谢! 学生管理系统: 功能描述:具有增删改查,排序,保存并显示学生的全部信息. 1.主界面---函数menu(),显示功 ...
- tomcat与springmvc 结合 之---第19篇(下,补充) springmvc 加载.xml文件的bean标签的过程
writedby 张艳涛,上一篇写了springmvc对<mvc:annoXXXX/>标签的解析过程,其实是遗漏重要的细节,因为理解的不深入吧 今天接着解析<bean>标签 & ...
- noip模拟30[毛毛毛探探探]
\(noip模拟30\;solutions\) 所以说,这次被初中的大神给爆了????? 其实真的不甘心,这次考场上的遗憾太多,浪费的时间过多,心情非常不好 用这篇题解来结束这场让人伤心的考试吧 \( ...
- squid异常停止的排查步骤
今天重启squid的时候发现,squid启动后,status 一会就stop了 whoami@blackman:~/script/AutoProxy-master/main/server$ sudo ...