主页/jQuery教程/优化与实践/jQuery选择器高效使用法则

jQuery教程

jQuery选择器高效使用法则

4,501字
19–29 分钟

概览

目录

jQuery选择器是库的核心功能之一，允许通过简洁的字符串匹配DOM元素。高效使用选择器不仅能提升页面性能，还能使代码更加清晰易维护。本章将深入探讨选择器编写的最佳实践，涵盖选择器编写原则、性能对比、缓存机制以及如何利用原生方法优化。掌握这些jQuery选择器的高效使用法则，可以在处理复杂文档结构时显著提升脚本执行效率。

选择器编写原则

优先使用ID选择器

语法

$( "#elementId" )

ID选择器直接映射到原生 document.getElementById()，是性能最高的选择器。

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ID选择器示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <div id="content">主要内容区域</div>
    <button id="changeBtn">改变内容</button>

    <script>
        $('#changeBtn').on('click', function() {
            $('#content').text('内容已更新');
        });
    </script>
</body>
</html>

类型选择器与类选择器

类型选择器（如 $( "div" )）和类选择器（如 $( ".class" )）性能次之。应尽量结合上下文缩小搜索范围。

语法

$( "div" )
$( ".item" )

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>类型与类选择器示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
    </div>
    <button id="highlightBtn">高亮项目</button>

    <script>
        $('#highlightBtn').on('click', function() {
            $('.container .item').css('background-color', 'yellow');
        });
    </script>
</body>
</html>

限定上下文

语法

$( selector, context )

将选择器的搜索范围限定在特定DOM元素内，可减少遍历范围。

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>限定上下文示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <div id="main">
        <p>主区域段落</p>
    </div>
    <div id="sidebar">
        <p>侧边栏段落</p>
    </div>
    <button id="mainBtn">仅改变主区域段落</button>

    <script>
        $('#mainBtn').on('click', function() {
            $('p', '#main').css('color', 'blue');
        });
    </script>
</body>
</html>

选择器性能对比

不同选择器在性能上存在显著差异。下表基于常见浏览器引擎对各类选择器的处理速度进行了对比。

选择器类型示例性能等级说明
ID选择器$("#id")★★★★★最快，直接调用 getElementById
类型选择器$("div")★★★★较快，通过 getElementsByTagName 获取
类选择器$(".class")★★★★现代浏览器支持 getElementsByClassName，较快
属性选择器$("[name]")★★★需要遍历所有元素进行匹配
伪类选择器$(":hidden")★★需要计算元素状态，较慢
复杂组合选择器$("div p:first")★★多级过滤，性能开销大

缓存选择结果

重复使用同一选择器时，应将结果缓存在变量中，避免反复查询DOM。

语法

var $elements = $( selector );

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>缓存选择结果示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <ul id="list">
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ul>
    <button id="btn1">高亮第一项</button>
    <button id="btn2">高亮第二项</button>

    <script>
        var $listItems = $('#list li');

        $('#btn1').on('click', function() {
            $listItems.eq(0).css('background-color', 'lightblue');
        });

        $('#btn2').on('click', function() {
            $listItems.eq(1).css('background-color', 'lightgreen');
        });
    </script>
</body>
</html>

避免过度复杂的选择器

复杂的选择器字符串会增加解析和匹配的时间。应尽量简化，或拆分为多次过滤。

示例：避免使用 :not 和多重伪类

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>简化选择器示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <div class="panel active">面板1</div>
    <div class="panel">面板2</div>
    <div class="panel inactive">面板3</div>
    <button id="simplifyBtn">高亮活动面板</button>

    <script>
        // 不推荐：$('.panel:not(.inactive)')
        // 推荐：先选择，再过滤
        $('#simplifyBtn').on('click', function() {
            $('.panel').not('.inactive').css('border', '2px solid red');
        });
    </script>
</body>
</html>

利用原生方法

对于某些简单操作，可直接使用原生JavaScript方法，避免jQuery选择器开销。

示例：使用 getElementById 替代 $("#id")

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>原生方法示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <div id="nativeDiv">原生DOM元素</div>
    <button id="nativeBtn">获取内容</button>

    <script>
        $('#nativeBtn').on('click', function() {
            var element = document.getElementById('nativeDiv');
            alert(element.innerHTML);
        });
    </script>
</body>
</html>

其他优化技巧

使用 .find() 方法

当已有jQuery对象时，使用 .find() 进行后代搜索通常比构建新选择器更快。

语法

$parent.find( selector )

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>.find 方法示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <div id="container">
        <span>文本1</span>
        <span>文本2</span>
    </div>
    <button id="findBtn">查找所有span</button>

    <script>
        var $container = $('#container');

        $('#findBtn').on('click', function() {
            $container.find('span').css('font-weight', 'bold');
        });
    </script>
</body>
</html>

避免在循环中执行选择器

循环内应避免包含选择器，可将选择结果提前缓存。

版本变更记录

版本变更说明
1.0引入基于Sizzle的选择器引擎，支持CSS1-3选择器。
1.3大幅优化选择器性能，特别是属性选择器和子元素过滤。
1.9移除了已弃用的选择器（如 :nth()），推荐使用标准CSS选择器。
2.0放弃对IE 6-8的支持，简化选择器引擎内部实现，提升现代浏览器上的执行速度。
3.0进一步优化选择器解析，增加了对 :visible、:hidden 等自定义伪类的性能改进。
4.0迁移至ES模块，选择器模块与核心分离；在支持 querySelectorAll 的浏览器中优先使用原生方法，显著提升性能。

浏览器兼容性

基于jQuery 3.x或4.x版本，选择器功能的兼容性如下。jQuery 4.x已移除对IE 10及以下版本的支持。

浏览器类型最低兼容版本（基于jQuery 3.x/4.x）
PC端
Chrome60+ (当前及先前主要版本)
Edge15+ (基于Chromium)
Firefox55+ (当前及先前主要版本)
Opera47+ (当前及先前主要版本)
Safari10+ (当前及先前主要版本)
移动端
Chrome Android100+ (当前版本)
Firefox for Android100+ (当前版本)
Opera Android64+ (当前版本)
Safari on iOS10+
Samsung Internet6.2+
WebView Android100+ (当前版本)
WebView on iOS10+

遵循上述jQuery选择器高效使用法则，可以显著提升脚本响应速度，降低资源消耗。从优先使用ID选择器到缓存结果，再到合理利用原生方法，这些实践不仅优化了性能，也使代码更加清晰。掌握这些原则，将能更好地发挥jQuery在DOM操作中的强大能力。

最新发布