文档章节

关于jquery选择器中:first和:first-child和:first-of-type的区别及:nth-child()和:nth-of-type()的区别

文文1
 文文1
发布于 01/26 15:25
字数 540
阅读 11
收藏 1

:first:选择第一个出现符合的元素

:first-child:选择限制条件中的第一个元素,并且必须和冒号前面的标签一致

:first-of-type:选择所有限制条件下的第一个冒号前面的标签元素,此标签可以不是第一个

测试:first代码:

<body>
<a></a>
<p>1</p>
<p>2</p>
<p>3</p>
<div>
<a>Hello1</a>
<p>Hello2</p>
<p>Hello3</p>
</div>
<div>
<p>Hello4</p>
<p>Hello5</p>
<p>Hello6</p>
</div>
<div></div>
<script>
    $(function(){
        $zzz=$("p:first").text();
        alert($zzz);
});
</script>
</body>

 

其中结果为:

测试:first-child代码:

<body>
<a></a>
<p>1</p>
<p>2</p>
<p>3</p>
<div>
<p>Hello1</p>
<p>Hello2</p>
<p>Hello3</p>
</div>
<div>
<p>Hello4</p>
<p>Hello5</p>
<p>Hello6</p>
</div>
<div></div>
<script>
    $(function(){
        $zzz=$("p:first-child").text();
        alert($zzz);
});
</script>
</body>

复制代码

其中结果为:

测试:first-of-type代码:

<body>
<a></a>
<p>1</p>
<p>2</p>
<p>3</p>
<div>
<a>Hello1</a>
<p>Hello2</p>
<p>Hello3</p>
</div>
<div>
<p>Hello4</p>
<p>Hello5</p>
<p>Hello6</p>
</div>
<div></div>
<script>
    $(function(){
        $zzz=$("p:first-of-type").text();
        alert($zzz);
});
</script>
</body>

其中结果为:

 

 

怎么样,很好理解吧,研究了好半天的呀!

 

下面是补充的:nth-child()和:nth-of-type()区别

:nth-child:是选择父元素下的第几个元素,不分标签类别,计数从1开始

:nth-of-type:是选择父元素下的同类型元素的第几个元素。区分标签类别,计数从1开始

测试:nth-child()代码:

<body>
<a></a>
<p>1</p>
<p>2</p>
<p>3</p>
<div>
<p>Hello1</p>
<p>Hello2</p>
<p>Hello3</p>
</div>
<div>
<p>Hello4</p>
<p>Hello5</p>
<p>Hello6</p>
</div>
<div></div>
<script>
    $(function(){
        $zzz=$("p:nth-child(3)").text();
        alert($zzz);
});
</script>
</body>

 

其中结果为:

测试:nth-of-type()代码:

<body>
<a></a>
<p>1</p>
<p>2</p>
<p>3</p>
<div>
<p>Hello1</p>
<p>Hello2</p>
<p>Hello3</p>
</div>
<div>
<p>Hello4</p>
<p>Hello5</p>
<p>Hello6</p>
</div>
<div></div>
<script>
    $(function(){
        $zzz=$("p:nth-of-type(3)").text();
        alert($zzz);
});
</script>
</body>

 

其中结果为:

本文转载自:https://www.cnblogs.com/woleicom/p/4040889.html

共有 人打赏支持
文文1
粉丝 23
博文 391
码字总数 124158
作品 0
长沙
程序员
私信 提问
  jQuery1.7和1.11区别

作者:近乎团队  1、核心:数据缓存   $.data(element,[key],[value])    此方法在jQuery 1.8中删除,但你仍然可以通过$._data(element, "events")调试事件数据注意,这是不支持的公共接...

小近
2014/11/14
5.3K
0
jQuery选择器大全(48个代码片段+21幅图演示)

选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器 的理解,它们本身用法就非常简单,我更希望的是它能够提升个...

iSea
2012/07/23
0
0
jQuery 1.9 RC 发布

jQuery官方今天发布了jQuery 1.9候选版,同时还发布了jQuery Migrate(迁移)插件候选版本,帮助开发者从旧的代码迁移。 该版本加入了一些新的功能: 1. Sizzle选择器 Sizzle现在支持以下CSS...

oschina
2013/01/10
1K
4
jsoup 1.7.2 发布,支持 CSS 类伪码选择器

我很高兴的宣布 jsoup 1.7.2 发布了,该版本引入了结构化伪码 CSS 类的选择器,包括::first-child, :last-child, :nth-child, :nth-last-child,:first-of-type, :last-of-type, :nth-of-typ...

oschina
2013/01/28
3.1K
10
JQuery的常用选择器、过滤器、方法祥细介绍

今天,我跟大家分享一下有关于JQuery的一些常用的选择器、过滤器以及方法,jquery的东西太多了,我相信很少有人全部记住,我常常忘记,要用到的时候就查查看,希望这篇文章对大家有帮助,如果...

蒙奇D刘辉
2013/06/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

JDK 12又来了,我学不动了...

写在前面 看到 JDK 12又发布了,萌新不知不觉感觉瑟瑟发抖,从 Java 1.8的函数式编程思维和范式 到 Java 1.9的模块化特性的加持 以及还没来得及深切感受一下 Java 1.11 的 ZGC强大之后,这次...

CodeSheep
15分钟前
0
0
解决在gradle构建project时,发生peer not authenticated错误的方法

问题: FAILURE: Build failed with an exception.* What went wrong:Could not resolve all dependencies for configuration ':wl01-service:compile'.> Could not resolve com.ali......

Benz001
24分钟前
1
0
Apache Ignite上的TensorFlow

任何深度学习都是从数据开始的,这是关键点。没有数据,就无法训练模型,也无法评估模型质量,更无法做出预测,因此,数据源非常重要。在做研究、构建新的神经网络架构、以及做实验时,会习惯...

李玉珏
50分钟前
6
0
Java记录日志附带请求标识

起因 系统是web接口服务,排查故障的时候经常需要记录某次请求调用链路日志。这样我们拉日志的时候只要匹配这个traceid就行了 第一版解决方案 原来我们一直用了个很low的办法,在请求开始的时...

Tree
53分钟前
3
0
使用split_size优化的ODPS SQL的场景

使用split_size优化的ODPS SQL的场景 首先有两个大背景需要说明如下: 说明1:split_size,设定一个map的最大数据输入量,单位M,默认256M。用户可以通过控制这个变量,从而达到对map端输入的...

阿里云官方博客
58分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部