<!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 之间的不同的更多相关文章

  1. Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解

    简介 最近了解到很多网页开发者对jquery中的 .bind() .live() .delegate() 和 .on() 方法存在很多的疑惑.这些疑惑通常是关于它们之间真正的区别是什么啊,什么时候该使 ...

  2. Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解（转）

    转自:https://www.jb51.net/article/120018.htm

  3. jQuery中的DOM操作总结

    jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...

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

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

  5. JQuery中常用的 属性选择器

    jQuery中使用$()作为选择符极大提高工作效率以及方便快捷;一些常用属性的选择器由以下几种 1) $('#id') id选择器 2) $('.class') css选择器,class类名 3) $ ...

  6. jQuery中的选择器(上)

    从学习jquery开始,现在已经是第三遍看锋利的jQuery这本书了,现在打算对jQuery中的各种选择器进行一下总结,主要是是为了进一步系统的巩固自己对知识的掌握,另外也可以为那些学习jQuery并 ...

  7. JavaScript及jQuery中的各种宽高属性图解

    文/poetries(简书作者)原文链接:http://www.jianshu.com/p/60332df38393 著作权归作者所有,转载请联系作者获得授权, 并标注“简书作者”.   作者声明:本 ...

  8. Jquery中find与each方法使用详解

    本文实例讲述了jQuery中find与each方法用法.分享给大家供大家参考.具体如下: 一.find()方法 jquery选择器非常强大,利用css的命名规约,可以更快更方便的找出想要的元素. 图解 ...

  9. JQuery制作网页—— 第七章 jQuery中的事件与动画

    1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...

  10. jquery中最常用的API有哪些

    jquery中最常用的API有哪些 一.总结 一句话总结:取html的方法,class相关的方法,val相关的方法,data相关的方法,attr相关的方法 1.jQuery Object Access ...

随机推荐

  1. 【Flask】Sqlalchemy lazy

    ### 懒加载:在一对多,或者多对多的时候,如果想要获取多的这一部分的数据的时候,往往能通过一个属性就可以全部获取了.比如有一个作者,想要或者这个作者的所有文章,那么可以通过user.articles ...

  2. .NET应用程序默认使用管理员身份打开

    1.在源码的Properties目录中找到 app.manifest(如果没有进入第二步,有跳过第二步) 2.如果没有app.manifest文件可以打开项目属性,找到安全性项,勾上启用 ClickO ...

  3. Spring中为什么实体类不用注入

    要理解为什么不用注入,首先就清楚注入的目的是什么?如果不注入,在程序中要使用某个类对象的方法,则需要去new一个对象.然后我们调用其中的方法,众所周知"程序=算法+数据".不失一般 ...

  4. freemarker入门实例与源码研究准备工作

    首先去freemarker官网下载源码jar包,本文是基于freemarker-2.3.21.tar.gz进行研究的.解压源码包,找到freemarker的源码部分导入eclipse工程中.需要注意的 ...

  5. 通过join方法顺序执行多个线程

    方法一:直接用多线程之间的通讯去解决 package com.toov5.test; import javax.imageio.ImageTypeSpecifier; class Res1{ char ...

  6. 【P2401】不等数列（DP）

    这个题乍一看就应该是DP,再看一眼数据范围,1000..那就应该是了.然后就向DP的方向想,经过对小数据的计算可以得出,如果我们用f[i][j]来表示前i个数有j个是填了"<" ...

  7. Nginad广告生成代码分析

    大家都知道实时竞价的广告一般会在一个iframe中,这个iframe会有一个复杂的src.那么这个iframe是如何生成的? 这里分析NginAd作为exchange时,如何让媒体网站通过引用一段ad ...

  8. VMWARE TOOLS安装出错：THE PATH IS NOT A VALID PATH TO THE 3.11.0.12-GENERIC KERNEL HEADERS

    VMWARE TOOLS安装提示THE PATH IS NOT A VALID PATH TO THE GENERIC KERNEL HEADERS I solved this problem, I ...

  9. Eclipse安装SVN客户端

    在Eclipse中安装SVN客户端有个好处,不用兼容其它操作系统都能保持一致的操作.比如再Linux下SVN客户端软件体验相对较差,但是基于命令行的操作却在Linux下无所不能. 一.通过在线安装 地 ...

  10. Valid Parentheses有效括号匹配。利用栈。

    问题描述:给定一个字符串,其中只包含字符‘{’,    '}',    '[',    ']',   '(',    ')'确定如果输入字符串是有效的.括号必须以正确的顺序排列,“()”和“()[]{ ...