【jQuery】:first选择器

最新推荐文章于 2024-05-04 23:53:56 发布

原创最新推荐文章于 2024-05-04 23:53:56 发布 · 650 阅读

0 ·

CC 4.0 BY-SA版权

Javascript 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用jQuery的:first选择器来选中一组相同元素中的第一个，并通过实例演示了如何实现页面加载时默认选中第一个元素并更新对应详情。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 背景

今天在开发的过程遇到一个需求场景，当页面进入时需要默认选择默认选择一组相同元素的第一个.

下面是一个简化的模型，打开页面时，要求默认”A”的被选中，这时对应的详情介绍区域（即id= “detail”的div)应该与之匹配，

具体示例html的代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>:first selector</title>
    <style>
        li {
            display:inline;
            width: 40px;
            font-size: 33px;
            background-color: #12e14a;
            margin:0px 10px;
        }
    </style>
</head>

<body>
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
    <ul>

    <div id="detail">
        <h1></h1>
        <p>.......</p>
    </div>
</body>
</html>

在查找资料的时候，发现jQuery支持这种类别元素的查找，通过使用:first选择符来匹配.

2 :first选择器介绍

Description: Selects the first matched DOM element.

jQuery的api文档介绍说first选择器用来选择第一个匹配的DOM元素.

特点:
1. 被选择的元素在顺序上和它们在Dom树上的顺序保持一致；
2. 考虑到”:first”是jQuery的拓展，其本身并不是Css的标准定义的部分，所以这类查询在性能并没有充分的Dom native的查询方法因此要满足我的需求，上面的示例代码可以改为

<!DOCTYPE html>
<html>
<head>

    <meta charset="UTF-8">
    <title>:first selector</title>
    <style>
        li {
            display:inline;
            width: 40px;
            font-size: 33px;
            background-color: #12e14a;
            margin:0px 10px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
    <ul>

    <div id="detail">
        <h1></h1>
        <p>.......</p>
    </div>
    <script type="text/javascript">
        $("li:first").css("color", "red");
        var productName = $("li:first").text();
        $("#detail").children("h1").text("商品" + productName);
    </script>
</body>
</html>