jQuery中first-child与first选择器区别

最新推荐文章于 2024-03-17 00:31:48 发布
最新推荐文章于 2024-03-17 00:31:48 发布
阅读量90 收藏
点赞数
文章标签： javascript ViewUI

1、first-child

first-child为每个父级元素匹配第一个子元素，可以匹配出多个元素：

示例代码：

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>jQuery中first-child与first选择器区别</title>
    </head>

    <body>
        <ul>
            <li>John</li>
            <li>Karl</li>
            <li>Brandon</li>
        </ul>
        <ul>
            <li>Glen</li>
            <li>Tane</li>
            <li>Ralph</li>
        </ul>
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        <script type="text/javascript">
            //选择了2个元素：
            //分别是：<li>John</li> 和 <li>Glen</li>
            //first-child为每个父级元素匹配第一个子元素，可以匹配出多个元素
            $("li:first-child").css('color', 'red');
        </script>
    </body>

</html>

效果：

 

2、first

first为获取匹配的第一个元素，只能匹配一个元素。

示例代码：

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>jQuery中first-child与first选择器区别</title>
    </head>

    <body>
        <ul>
            <li>John</li>
            <li>Karl</li>
            <li>Brandon</li>
        </ul>
        <ul>
            <li>Glen</li>
            <li>Tane</li>
            <li>Ralph</li>
        </ul>
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        <script type="text/javascript">
            //选择了1个元素：
            //是：<li>John</li>
            //first为获取匹配的第一个元素，只能匹配一个元素
            $("li:first").css('color', 'red');
        </script>
    </body>

</html>

效果：

 

 

在使用过程中要注意两者的区别。

 

weixin_34342578
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery选择器 :first与:first-child区别
weixin_34388207的博客
09-28 85
一个例子： &lt;ul&gt;  &lt;li&gt;John&lt;/li&gt;  &lt;li&gt;Karl&lt;/li&gt;  &lt;li&gt;Brandon&lt;/li&gt;&lt;/ul&gt;&lt;ul&gt;  &lt;li&gt;Glen&lt;/li&gt;  &lt;li&gt
选择器的使用(first-child和last-child选择器)
weixin_33962923的博客
10-07 142
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style...
:first-child与:first的区别
靓靓软件工作室
03-30 173
在jQuery的子元素过滤选择器中，:first-child的使用需要注意一点，文档中说的例子是这样用的：$("ul li:first-child").addClass("highlight");它实现的作用是获取到所有ul下面的第一个li元素，与:first有区别。$("ul li:first").addClass("highlight");:first只获取一个ul中的第一个li，前提都是页面...
jQuery中选择器:first和:first-child的区别
JiangNanMax的博客
10-03 5790
jQuery中选择器:first和:first-child的区别 :first选择器 :first选择器用于选择匹配到的第一个元素，将其封装为jQuery对象后返回。其效果等价于:eq(0)选择器 :first-child选择器 :first-child选择器用于选择作为父元素的第一个子元素的元素，将其封装为jQuery对象后返回。其效果等价于:nth-child(1)选择器 选择器:fi...
jQuery学习笔记之:first-child 与 :first的区别
不务正业的野猴子
05-05 174
jQuery中:first-child选择器用法实例
10-24
在jQuery中，`:first-child`选择器是一种非常实用的定位元素的方法，它允许开发者精确地选取父元素下的第一个子元素。这个选择器是基于CSS选择器标准，因此不仅在jQuery中，也在纯CSS中同样可用。`:first-child`选择...
浅谈jquery选择器 :first与:first-child的区别
10-21
`:first`选择器是jQuery的一个特殊选择器，它会选取匹配该选择器的元素集合中的第一个元素。例如，当使用`$('ul li:first')`时，它会选择所有`ul`元素下的第一个`li`元素，这里的结果是`John`所在的`li`。`:first`并...
jQuery中:last-child选择器用法实例
10-24
在jQuery中，`:last-child`选择器是一种非常实用的定位元素的方法，它允许开发者精确地选取父元素下的最后一个子元素。这个选择器的功能和定义在于，它可以匹配那些在其父元素的所有子元素中处于最后一个位置的元素...
JQuery中:first-child Selector
程宇寒
11-26 309
first-child selector描述: 选择所有父级元素下的第一个子元素。 jQuery( ":first-child" )添加的版本:1.1.4 虽然:first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)。 例子: 给每个匹配的 div 中查找第一个 span，并加上下划线及增加鼠标悬...
jQuery中:first和:first-child的区别
小英雄
07-18 5870
jQuery的:first选择器用于获取匹配到的第一个元素，将其封装为jQuery对象并返回。:first选择器等价于:eq(0)选择器。jQuery的:first-child选择器用于匹配作为父元素的第一个子元素的元素，将其封装为jQuery对象并返回。:first-child选择器等价于:nth-child(1)选择器。:first选择器与:first-child选择器的不同之处在于：:fir...
理解Jquery的first-child选择器
u014344668的专栏
03-17 553
理解Jquery的first-child选择器$(“p:first-child”)定义: 选取属于其父元素和所有兄弟元素的第一个为 p 的元素： 实例代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>first-child选择器</title> <script src
jquery如何获取第一个或最后一个子元素？
热门推荐
u010227447的专栏
05-04 6万+
通过children方法，children("input:first-child") 1 2 $(this).children("input:first-child").val(); $(this).children("input:last-child").val(); 通过>选择器，$(".items>
jQuery –第一个孩子和最后一个孩子选择器示例
一名可爱的技术搬运工
05-21 3252
：first-child用于选择作为其父级的第一个子级的所有元素，这是：nth-​​child（1）的简写。 例子 $（'li：first-child'）–选择与<li>匹配的所有元素，它们是其父级的第一个孩子。 $（tr：first-child'）–选择与<tr>匹配的所有元素，它们是其父级的第一个孩子。 ：last-child用于选择作为其父级的最...
行级元素和块级元素-洋葱先生-杨少通
前端小白的逆袭
09-14 461
在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素和内联块状元素。 常用的块状元素有： 、、…、、、、、、 、 常用的内联元素有： 、、、、、、、、、、 常用的内联块状元素有： 、 块级元素什么是块级元素？在html中、 、、、 和 就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将行内元素a转换为块状元素，使a元素具有块状元素特点。 a{display:block;} 块级元素特点： 1、每个块级元
jQuery选择器详细介绍：伪类选择器
最新发布
m0_60635245的博客
03-17 1038
（1）“：first-child”是选择父元素下的第1个子元素（不区分元素类型），“：first-of-type”是选择父元素下某个元素类型的第1个子元素（区分元素类型）（2）在“:only-child选择器”中，父元素是只有一个子元素的。但是在“:only-of-type选择器”中，却可以有多个子元素。“:only-of-type”相对“:only-child”来说，只是多了一个type（元素类型）的限制。通过以下例子来深入了解only-of-type的意义：这是一个段落这是一个段落。
6-2、选择器
鸵鸟
09-06 886
选择器
jQuery中:first，:first-child，first()的使用区别
just_coming_here的博客
04-16 2万+
:first   获取第一个元素。 :first-child  选择器选取属于其父元素的第一个子元素的所有元素。 first() 返回被选元素的首个元素。 测试代码如下： Insert title here ul_1 item 1 ul_1 item 2 ul_1 item 3 ul_1 item 4 ul_1 item 5
jQuery中的伪类first()，:first，:first-child区别
qq1026432050的博客
10-14 1036
first() 是被选元素的第一个元素。 &lt;body&gt; //HTML部分 //:first() 测试 &lt;div&gt; &lt;p&gt;测试first()&lt;/p&gt; &lt;p&gt;测试first()&lt;/p&gt; &lt;p&gt;测试first()&lt;/p&gt; &lt;/div&gt; &am
分析函数first、last、first_value、last_value
sctrkb的博客
07-26 1599
FIRST和LAST函数 功能：获取首行和尾行（可以有并列的情况）的非排序字段的值 语法： aggregate_functionKEEP(DENSE_RANK {FIRST|LAST}ORDERBYexpr [DESC|ASC] [NULLSFIRST|LAST]) OVER(query_partition_clause) 使用说明： ①first和last函数有...
first-child用法
08-18
在jQuery中，也有一个:first-child选择器，用于选择父元素的第一个子元素。它的用法与CSS中的:first-child相似，可以用于查找并操作HTML文档中的元素。<span class="em">1</span><span class="em">2</span><span ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值