jQuery中 :first、:first-child 和 :first-of-type 之间的不同
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var btn = $(this).text();
$("p").css("background-color","white");
$("p" + btn).css("background-color","yellow");
});
});
</script>
</head>
<body>
<button>:first</button>
<button>:first-child</button>
<button>:first-of-type</button><br><br>
<p>body 中第一个段落。</p>
<div style="border:1px solid;">
<p>div 中第一个段落，是 div 的第一个子元素。</p>
<p>div 中的最后一个段落，是 div 的最后一个子元素。</p>
</div><br>
<div style="border:1px solid;">
<span>这是一个 span 元素，是 div 中的第一个子元素。</span>
<p>另一个 div 中第一个段落，是 div 中的第二个子元素。</p>
<p>另一个 div 中的最后一个段落, 是 div 中的第三个子元素。</p>
<span>这是一个 span 元素，是 div 中的最后一个子元素。</span>
</div><br>
<div style="border:1px solid">
<p>另一个 div 中第一个段落，是 div 中的第一个子元素。</p>
<p>另一个 div 中的最后一个段落, 是 div 中的最后一个子元素。</p>
</div>
<p>body 中最后一个段落。</p>
</body>
</html>
最新文章
- 看图理解JWT如何用于单点登录
- Java基础知识梳理《一》
- C++混合编程之idlcpp教程Python篇(6)
- 这几天做完简易酒店管理系统，对Sql Server执行计划的浅显了解。
- Html中各种空格的显示
- Java菜鸟培训第二天
- 利用PBfunc在Powerbuilder中使用https获取微信的AccessToken
- python escape sequences
- Lua与C/C++交互问题
- 7.5 Point-in-Time (Incremental) Recovery Using the Binary Log 使用binay log 基于时间点恢复
- VS2012和2010 设置framework版本
- 深入理解Azure自动扩展集VMSS(2)
- Wind River Linux 6 Security Profile
- xtrabackup 2.0.8备份mysql5.1.65报错
- 10款免费Bootstrap后台模板演示及下载
- 201521123090 《Java程序设计》第7周学习总结
- JavaScript几种常见的继承方法
- Apache Beam是什么？
- C#线程、前后台线程
- 基于jQuery的新浪游戏首页幻灯片
热门文章
- 虚构 css 父级选择器
- Vue.js学习笔记 第七篇 表单控件绑定
- 定时任务 Linux cron job 初步使用
- 【bzoj1925】地精部落[SDOI2010]（dp）
- windows编译hadoop 2.x Hadoop-eclipse-plugin插件
- Vue v-on v-model 组合使用
- Intel Code Challenge Elimination Round (Div.1 + Div.2, combined) D. Generating Sets 贪心+优先队列
- tyvj 1402 乌龟棋 dp
- mysql与mongodb命令对比
- How to use the ZooKeeper driver for ServiceGroup in OpenStack Nova