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>
jQuery中 :first、:first-child 和 :first-of-type 之间的不同的更多相关文章
- Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
简介 最近了解到很多网页开发者对jquery中的 .bind() .live() .delegate() 和 .on() 方法存在很多的疑惑.这些疑惑通常是关于它们之间真正的区别是什么啊,什么时候该使 ...
- Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解（转）
转自:https://www.jb51.net/article/120018.htm
- jQuery中的DOM操作总结
jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...
- jQuery入门（1）jQuery中万能的选择器
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- JQuery中常用的 属性选择器
jQuery中使用$()作为选择符极大提高工作效率以及方便快捷;一些常用属性的选择器由以下几种 1) $('#id') id选择器 2) $('.class') css选择器,class类名 3) $ ...
- jQuery中的选择器(上)
从学习jquery开始,现在已经是第三遍看锋利的jQuery这本书了,现在打算对jQuery中的各种选择器进行一下总结,主要是是为了进一步系统的巩固自己对知识的掌握,另外也可以为那些学习jQuery并 ...
- JavaScript及jQuery中的各种宽高属性图解
文/poetries(简书作者)原文链接:http://www.jianshu.com/p/60332df38393 著作权归作者所有,转载请联系作者获得授权, 并标注“简书作者”. 作者声明:本 ...
- Jquery中find与each方法使用详解
本文实例讲述了jQuery中find与each方法用法.分享给大家供大家参考.具体如下: 一.find()方法 jquery选择器非常强大,利用css的命名规约,可以更快更方便的找出想要的元素. 图解 ...
- JQuery制作网页—— 第七章 jQuery中的事件与动画
1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...
- jquery中最常用的API有哪些
jquery中最常用的API有哪些 一.总结 一句话总结:取html的方法,class相关的方法,val相关的方法,data相关的方法,attr相关的方法 1.jQuery Object Access ...
随机推荐
- Python编程-函数进阶二
一.生成器补充 1.什么是生成器? 可以理解为一种数据类型,这种数据类型自动实现了迭代器协议(其他的数据类型需要调用自己内置的__iter__方法),所以生成器就是可迭代对象. 2.生成器分类 (1) ...
- INSPIRED启示录 读书笔记 - 第39章 打造平台产品的经验
最具挑战性的工作 产品管理中难度最大,也最能体现产品经理实力的是定义成功的平台产品.所谓平台产品是指一类基础软件,应该开发者能在其基础上开发应用程序 平台产品要面对三种不同的客户 1.应用软件供应商: ...
- Variation calling and annotation
Resequencing 302 wild and cultivated accessions identifies genes related to domestication and improv ...
- 【P2401】不等数列（DP）
这个题乍一看就应该是DP,再看一眼数据范围,1000..那就应该是了.然后就向DP的方向想,经过对小数据的计算可以得出,如果我们用f[i][j]来表示前i个数有j个是填了"<" ...
- 使用Homebrew管理你的mac开发包
很多人可能不了解 Homebrew, 其实它相当于开发软件界的 Appstore. 比如,如果我要安装 python 的最新版本,那么传统的做法是 1. 到官方网站下载 python 的最新版本 2. ...
- dedecms 织梦列表页标题增加显示页数
判断是否为第一页,为第一页则不显示页数的代码: {dede:pagelist listsize='0' listitem='pageno' function='html2text(@me)' runp ...
- Codeforces Round #425 (Div. 2) D 树链剖分 + 树状数组维护区间
一看就知道 可以LCA判断做 也可以树链剖分拿头暴力 然而快速读入和线段树维护区间会T70 于是只能LCA? 线段树的常数不小 于是需要另外一种办法来进行区间加减和查询区间和 就是使用树状数组 这个题 ...
- java创建多线程的三种方式
/***************************继承Thread类创建多线程************************/ public class FirstThread extends ...
- Nodejs + TypeScript
Node.js https://nodejs.org https://nodejs.org/en/download/ win: msi mac: pkg linux: tar.xz source co ...
- 有些事情不要强求 PS:日常收集语录
有些事情不要强求 1.有些事,我们明知道是错的,也要去坚持,因为不甘心:有些人,我们明知道是爱的,也要去放弃,因为没结局:有时候,我们明知道没路了,却还在前行,因为习惯了. 2.以为蒙上了眼睛,就可以 ...