主页/jQuery教程/jQuery 选择器/jQuery基本选择器

jQuery教程

jQuery基本选择器

2,359字
10–15 分钟

jQuery基本选择器包括ID选择器、元素选择器、类选择器、通配符选择器和分组选择器。

目录

下表汇总了jQuery基本选择器的类型、语法格式及其简要说明。

选择器类型语法描述
ID选择器$("#id")选取具有指定id属性的元素，id在页面中应唯一，返回单个元素。
元素选择器$("element")选取所有指定标签名的元素，例如$("div")选取所有<div>元素。
类选择器$(".class")选取所有具有指定class类名的元素，返回元素集合。
通配符选择器$("*")选取页面中所有的元素，通常用于需要遍历全部元素的场景，但性能开销较大。
分组选择器$("selector1,selector2")将多个选择器匹配的元素合并到一起，返回并集，用逗号分隔。

ID选择器

ID选择器通过元素的id属性进行选取，语法为$("#id")。

由于id在HTML文档中必须是唯一的，因此ID选择器始终返回一个包含零个或一个元素的jQuery对象。

ID选择器的执行效率在jQuery选择器中是最高的，因为底层直接调用document.getElementById()方法。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>ID选择器示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="header">页面头部</div>
    <div id="content">主要内容区域</div>
    <script>
        // 选取id为header的元素，并修改其文本
        $("#header").text("新的头部内容");
    </script>
</body>
</html>

元素选择器

元素选择器根据HTML标签名选取元素，语法为$("element")。

例如$("p")选取所有段落，$("a")选取所有超链接。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>元素选择器示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <p>第一段</p>
    <p>第二段</p>
    <div>这是一个div</div>
    <script>
        // 选取所有p元素，并设置它们的文本颜色为红色
        $("p").css("color", "red");
    </script>
</body>
</html>

类选择器

类选择器通过元素的class属性进行选取，语法为$(".class")。

类选择器可以匹配一个或多个具有相同类名的元素，返回集合。

在页面中，多个元素可以共享同一个类名，因此类选择器常用于样式化一组相似元素或实现特定功能。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>类选择器示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <span class="box">盒子3（span）</span>
    <script>
        // 选取所有class为box的元素，添加边框样式
        $(".box").css("border", "1px solid black");
    </script>
</body>
</html>

通配符选择器

通配符选择器使用星号*，语法为$("*")，用于选取页面中的所有元素。

虽然它功能强大，能够获取每一个DOM节点，但过度使用通配符选择器会严重影响性能，尤其是在大型文档中。

通常只在极少数场景下使用，例如需要统计页面元素总数或对所有元素应用某些样式（但CSS中通常也不会推荐通配符选择器）。

在jQuery中，应谨慎使用$("*")。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>通配符选择器示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div>div元素</div>
    <p>段落</p>
    <span>span</span>
    <script>
        // 选取所有元素，并输出它们的标签名
        $("*").each(function() {
            console.log(this.tagName);
        });
    </script>
</body>
</html>

分组选择器

分组选择器允许一次选取多个不同选择器匹配的元素，语法为$("selector1, selector2, ...")，结果返回所有匹配元素的并集。

这在需要对多种不同类型或标识的元素执行相同操作时非常实用，可以减少重复代码。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>分组选择器示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>标题</h1>
    <p class="intro">介绍段落</p>
    <div id="footer">页脚</div>
    <script>
        // 同时选取h1、class为intro的元素和id为footer的元素，设置它们的背景色为黄色
        $("h1, .intro, #footer").css("background-color", "yellow");
    </script>
</body>
</html>

最新发布