获取子元素
1、纯css 获取子元素
#test1>div {background-color:red;}
#test1 div {font-size:14px;}
#test1>div:first-child {color:#ccc;}
<div id="test1">
<div>性别</div><div>男</div>
</div>
因1示例中为#test1下的子元素 #test1>div 余#test1 div 并没有区别。做如下示例:
h1> strong {color:red;}
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
h1 strong {color:red;}
2、JQuery css 获取子元素
$(function(){
$("#button1").click(function(){
$("#test1>Div").html("姓名");
$("#test1>Div").next().html("张三"); //若注释这步,两个div都为“姓名”。
$("#test1 div").css("color","green")
$("#test1>div:first").css("font-size","24px");
});
});
<input type="button" id="button1" value="验证" />
3 、JQuery 获取子元素 find() 与children()
$(function(){
$('ul.level-1').children().css('border', '1px solid green');
$('ul.level-2').find('li').css('border', '1px solid red');
$("#p1").html("children li长度:"+$("ul.level-1").children("li").length);
$("#p2").html("find li长度:"+$("ul.level-1").find("li").length);
});
<div>
<ul class="level-1"><li>list1
<ul class="level-2">
<li>list1-1
<ul class="level-3">
<li>list1-1-1</li>
<li>list1-1-2</li>
</ul> </li>
<li>list1-2</li>
</ul>
</li>
<li>list2
<ul class="level-2">
<li>list2-1</li>
<li>list2-2</li>
</ul>
</li>
<li>list3
<ul class="level-2">
<li>list3-1</li>
<li>list3-2</li>
</ul>
</li>
</ul>
</div>
<p id="p1"></p><p id="p2"></p>
<p>children和find的区别:children只会查找直接子集,而find会跨越层级查找,一直找到没有为止。</p>
- android camera(一):camera模组CMM介绍
- Kafka生产者性能优化之吞吐量VS延迟
- Android开发笔记(八十一)屏幕规格适配
- 安卓基础:实现多线程下载本次服务器的图片
- CUBRID学习笔记 7 ms常见错误
- zepto.js
- 重新启动IIS不重启电脑
- [JAVA关键字] synchronized
- mediaplayer与surfaceView,无法播放问题
- Spring对AOP的支持
- Android Fragment完全解析,关于碎片你所需知道的一切
- LeetCode Populating Next Right Pointers in Each Node II
- 供应用程序调用的中断 (7CH - 平方运算)
- 经验总结一
- 作业二(2)流行的源程序版本管理软件和项目管理软件各自的优点缺点
- 一个IP建多个Web站点
- 使用Gradle发布aar项目到JCenter仓库
- Logback的配置文件查找顺序
- Maximum GCD + ungetc()函数的使用
- Spring 定时任务执行两次 解决办法