主页/jQuery教程/jQuery 选择器/jQuery属性选择器

jQuery教程

jQuery属性选择器

4,773字
20–30 分钟

在掌握了基本选择器与层次选择器之后，jQuery的选择器体系进入了更为精细和强大的领域——jQuery属性选择器。jQuery属性选择器允许开发者通过HTML元素的属性及其值来精确筛选元素，这为处理具有特定特征的元素集合提供了极大的灵活性。无论是链接的href属性，还是表单元素的type属性，jQuery属性选择器都能轻松定位。

目录

属性选择器的语法与分类

jQuery属性选择器的语法核心是使用方括号[]来包裹属性表达式。这些选择器可以单独使用，也可以与其他选择器组合，以实现更精确的匹配。其功能涵盖了从简单的属性存在性检查到复杂的字符串模式匹配。下表总结了jQuery属性选择器的主要类型及其功能描述：

选择器语法功能描述示例与说明
[attribute]选取所有包含指定属性的元素，无论该属性的值是什么。$('a[href]') 选取所有拥有href属性的链接。
[attribute='value']选取属性值完全等于指定值的元素。$('input[type="text"]') 选取所有类型为文本输入框的元素。
[attribute!='value']选取属性值不等于指定值的元素，或完全不存在该属性的元素。$('div[class!="main"]') 选取所有class值不为main的div。
[attribute^='value']选取属性值以指定字符串开头的元素。$('a[href^="https"]') 选取所有链接地址以https开头的元素。
[attribute$='value']选取属性值以指定字符串结尾的元素。$('img[src$=".png"]') 选取所有源文件以.png结尾的图片。
[attribute*='value']选取属性值包含指定字符串的元素。$('a[href*="jquery"]') 选取所有链接地址中包含jquery的元素。
[attribute~='value']选取属性值是以空格分隔的单词列表，且其中包含指定单词的元素。$('p[class~="intro"]') 选取class属性值中包含完整单词intro的段落。
[attribute|='value']选取属性值等于指定字符串，或以该字符串后跟连字符-开头的元素。$('div[lang|="en"]') 选取lang属性等于en或以en-开头的元素。

属性选择器的应用场景

jQuery属性选择器在复杂的DOM操作中扮演着关键角色。它们使得开发者能够基于元素的特性而非结构来定位元素，这在处理表单、链接或动态内容时尤为高效。通过组合多个属性选择器，可以实现更严格的筛选逻辑，例如$('input[type="text"][name="username"]')将选取类型为文本框且name属性为username的元素。

这些选择器的强大之处在于其模式的灵活性。使用^='value'可以定位所有指向特定协议或域名的链接；使用$='value'可以筛选出特定文件格式的资源；而*='value'则适用于模糊搜索。这种基于属性的过滤方式，是CSS选择器在jQuery中的自然延伸和增强，极大地丰富了元素选取的手段。

综合示例演示

为了更好地理解jQuery属性选择器的用法，下面提供一个完整的HTML页面示例。该示例包含了多种属性选择器的实际应用，并通过按钮点击触发相应的操作。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery属性选择器综合示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        div, a, input { display: block; margin: 5px 0; padding: 5px; border: 1px solid #ccc; }
        .highlight { background-color: yellow; border-color: orange; }
        button { margin-right: 5px; margin-bottom: 10px; }
    </style>
</head>
<body>

<h2>属性选择器演示</h2>

<div id="container">
    <a href="https://www.example.com" title="Example Link">安全链接 (https)</a>
    <a href="http://www.example.com" title="Example Link">普通链接 (http)</a>
    <a href="https://www.jquery.com" title="jQuery Official">jQuery官网 (https)</a>
    <a href="/images/photo.jpg" title="Photo">图片文件 (jpg)</a>
    <a href="/doc/report.pdf" title="Report">文档文件 (pdf)</a>

    <input type="text" name="username" value="user1" placeholder="文本输入框">
    <input type="text" name="email" value="test@example.com" placeholder="另一个文本框">
    <input type="password" name="pwd" placeholder="密码框">
    <input type="checkbox" name="agree" checked> 我已阅读协议
    <input type="radio" name="gender" value="male" checked> 男
    <input type="radio" name="gender" value="female"> 女

    <div custom-data="info-123">带有自定义属性的div</div>
    <div custom-data="detail-456">另一个带有自定义属性的div</div>
    <div>普通div</div>
</div>

<p>
    <button id="btn1">选取所有带href属性的元素</button>
    <button id="btn2">选取所有https链接</button>
    <button id="btn3">选取所有.png/.jpg图片链接</button>
    <button id="btn4">选取所有包含'jquery'的链接</button>
    <button id="btn5">选取所有文本输入框</button>
    <button id="btn6">选取所有被选中的复选框/单选框</button>
    <button id="btn7">选取所有带有custom-data属性的元素</button>
    <button id="btnClear">清除高亮</button>
</p>

<script>
$(document).ready(function() {
    // 辅助函数：清除所有高亮
    function clearHighlight() {
        $('#container *').removeClass('highlight');
    }

    // 为元素添加高亮并输出信息
    function highlight(elements, message) {
        clearHighlight();
        elements.addClass('highlight');
        console.log(message + ' 找到 ' + elements.length + ' 个元素');
    }

    // 1. [attribute] 选择器：选取所有带有 href 属性的元素
    $('#btn1').click(function() {
        var $elems = $('a[href]');
        highlight($elems, '[href]');
    });

    // 2. [attribute='value'] 与 [attribute^='value'] 选择器：选取所有 https 链接
    $('#btn2').click(function() {
        var $elems = $('a[href^="https://"]');
        highlight($elems, 'href^="https"');
    });

    // 3. [attribute$='value'] 选择器：选取所有指向 .jpg 或 .png 的链接
    $('#btn3').click(function() {
        var $elems = $('a[href$=".jpg"], a[href$=".png"]'); // 注意：本例中只有.jpg
        highlight($elems, 'href$=".jpg" 或 .png');
    });

    // 4. [attribute*='value'] 选择器：选取所有链接中包含 'jquery' 的元素
    $('#btn4').click(function() {
        var $elems = $('a[href*="jquery"]');
        highlight($elems, 'href*="jquery"');
    });

    // 5. 组合属性选择器：选取所有 type="text" 的 input 元素
    $('#btn5').click(function() {
        var $elems = $('input[type="text"]');
        highlight($elems, 'input[type="text"]');
    });

    // 6. 使用属性选择器选取被选中的表单元素 (也可以用 :checked 伪类)
    $('#btn6').click(function() {
        var $elems = $('input[checked]'); 
        highlight($elems, '[checked] 属性');
    });

    // 7. 选取所有具有自定义属性 'custom-data' 的元素
    $('#btn7').click(function() {
        var $elems = $('div[custom-data]');
        highlight($elems, 'div[custom-data]');
    });

    // 清除高亮
    $('#btnClear').click(function() {
        clearHighlight();
    });
});
</script>
</body>
</html>

在这个示例中，点击不同的按钮会触发相应的jQuery属性选择器。例如，点击“选取所有https链接”按钮，会执行$('a[href^="https://"]')，将所有以https://开头的链接高亮显示。这直观地展示了如何利用属性选择器解决实际问题。

注意事项与最佳实践

在使用jQuery属性选择器时，有几个关键点值得留意。首先，对于属性值的匹配，字符串是区分大小写的，除非文档类型（如HTML5）另有规定。其次，在组合使用属性选择器时，选择器的编写顺序不会影响匹配结果，但清晰的结构有助于代码维护。

此外，尽管jQuery属性选择器功能强大，但在处理大量DOM元素时，过于复杂或全局的属性选择（如$('[data-role]')）可能会带来性能开销。在实际开发中，建议优先考虑与ID或标签名选择器组合使用，以缩小筛选范围，从而提升执行效率。同时，对于表单元素的状态（如checked、selected），除了使用属性选择器，也可以结合jQuery的过滤选择器（如:checked）来达到目的。

总而言之，jQuery属性选择器是jQuery选择器家族中不可或缺的一部分，它赋予了开发者根据元素的内在特性进行精准定位的能力，极大地简化了DOM遍历和操作的复杂度。

最新发布