jQuery ID与Class选择器对比-优快云博客

本文链接：https://blog.youkuaiyun.com/HTTP404_CN/article/details/149645547

jQuery ID选择器与Class选择器比较

在jQuery中，ID选择器和Class选择器是两种最基本且常用的元素选择方式，它们有显著的区别：

核心区别

特性	ID选择器	Class选择器
语法	`$("#idName")`	`$(".className")`
唯一性	每个ID在文档中必须唯一	Class可以在多个元素上重复使用
返回元素	单个元素（即使有重复ID也只会返回第一个）	多个元素组成的集合
性能	更快（浏览器原生支持getElementById）	相对较慢（需要遍历所有元素）
CSS优先级	高（权重100）	低（权重10）
使用场景	精确选择单个特定元素	选择具有相同特征的一组元素

示例演示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery ID vs Class选择器比较</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            padding: 30px;
            margin-bottom: 30px;
        }
        
        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 30px;
            border-bottom: 2px solid #3498db;
            padding-bottom: 15px;
        }
        
        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 30px;
        }
        
        .comparison-table th, .comparison-table td {
            padding: 15px;
            text-align: left;
            border: 1px solid #ddd;
        }
        
        .comparison-table th {
            background-color: #3498db;
            color: white;
            font-weight: bold;
        }
        
        .comparison-table tr:nth-child(even) {
            background-color: #f8f9fa;
        }
        
        .comparison-table td:first-child {
            font-weight: bold;
            color: #2c3e50;
        }
        
        .demo-section {
            display: flex;
            gap: 30px;
            margin-top: 30px;
        }
        
        .demo-panel {
            flex: 1;
            background-color: #eef5f9;
            padding: 20px;
            border-radius: 8px;
        }
        
        .demo-title {
            color: #3498db;
            margin-top: 0;
            text-align: center;
        }
        
        .item {
            padding: 12px;
            margin: 10px 0;
            border-radius: 5px;
            transition: all 0.3s;
        }
        
        .highlight {
            animation: highlight 1.5s ease;
        }
        
        @keyframes highlight {
            0% { background-color: transparent; }
            50% { background-color: #ffeaa7; }
            100% { background-color: transparent; }
        }
        
        .btn {
            display: block;
            width: 100%;
            padding: 12px;
            margin: 15px 0;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        
        .btn:hover {
            background-color: #2980b9;
        }
        
        .result-box {
            background-color: #fff;
            border-left: 4px solid #3498db;
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 5px 5px 0;
        }
        
        code {
            background-color: #f1f1f1;
            padding: 2px 6px;
            border-radius: 3px;
            font-family: Consolas, monospace;
        }
        
        footer {
            text-align: center;
            margin-top: 30px;
            color: #7f8c8d;
            font-size: 14px;
        }
        
        .selected {
            border: 2px solid #e74c3c !important;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>jQuery ID选择器 vs Class选择器</h1>
        
        <table class="comparison-table">
            <thead>
                <tr>
                    <th>特性</th>
                    <th>ID选择器 (<code>$("#id")</code>)</th>
                    <th>Class选择器 (<code>$(".class")</code>)</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>语法</td>
                    <td>使用 <code>#</code> 前缀</td>
                    <td>使用 <code>.</code> 前缀</td>
                </tr>
                <tr>
                    <td>唯一性</td>
                    <td>每个ID在文档中必须唯一</td>
                    <td>Class可在多个元素上重复使用</td>
                </tr>
                <tr>
                    <td>返回元素</td>
                    <td>单个元素（即使有重复ID也只会返回第一个）</td>
                    <td>多个元素组成的集合</td>
                </tr>
                <tr>
                    <td>性能</td>
                    <td>非常高效（浏览器原生支持）</td>
                    <td>相对较慢（需要遍历元素）</td>
                </tr>
                <tr>
                    <td>CSS优先级</td>
                    <td>高（权重100）</td>
                    <td>低（权重10）</td>
                </tr>
                <tr>
                    <td>使用场景</td>
                    <td>精确选择单个特定元素</td>
                    <td>选择具有相同特征的一组元素</td>
                </tr>
            </tbody>
        </table>
        
        <div class="demo-section">
            <div class="demo-panel">
                <h2 class="demo-title">ID选择器演示</h2>
                <div id="uniqueItem" class="item">这是一个具有唯一ID的元素 (ID: uniqueItem)</div>
                
                <button id="highlightIdBtn" class="btn">使用ID选择器高亮元素</button>
                <button id="changeContentBtn" class="btn">使用ID选择器修改内容</button>
                
                <div class="result-box">
                    <h3>代码示例:</h3>
                    <p><code>$("#uniqueItem")</code> - 选择ID为uniqueItem的元素</p>
                    <p><code>$("#uniqueItem").css("background-color", "yellow")</code></p>
                </div>
            </div>
            
            <div class="demo-panel">
                <h2 class="demo-title">Class选择器演示</h2>
                <div class="groupItem item">元素1 (class: groupItem)</div>
                <div class="groupItem item">元素2 (class: groupItem)</div>
                <div class="groupItem item">元素3 (class: groupItem)</div>
                <div class="differentItem item">不同类别的元素 (class: differentItem)</div>
                
                <button id="highlightClassBtn" class="btn">使用Class选择器高亮元素</button>
                <button id="countItemsBtn" class="btn">统计同类元素数量</button>
                
                <div class="result-box">
                    <h3>代码示例:</h3>
                    <p><code>$(".groupItem")</code> - 选择所有class为groupItem的元素</p>
                    <p><code>$(".groupItem").addClass("selected")</code></p>
                </div>
            </div>
        </div>
    </div>
    
    <footer>
        <p>jQuery选择器演示 | 理解ID选择器和Class选择器的区别</p>
    </footer>

    <script>
        $(document).ready(function() {
            // ID选择器演示
            $("#highlightIdBtn").click(function() {
                $("#uniqueItem")
                    .addClass("highlight")
                    .delay(1500)
                    .queue(function() {
                        $(this).removeClass("highlight").dequeue();
                    });
            });
            
            $("#changeContentBtn").click(function() {
                $("#uniqueItem")
                    .css("background-color", "#aed6f1")
                    .html("内容已被ID选择器修改！<br><small>(ID选择器精确地选择了这个元素)</small>");
            });
            
            // Class选择器演示
            $("#highlightClassBtn").click(function() {
                $(".groupItem")
                    .addClass("selected")
                    .delay(1500)
                    .queue(function() {
                        $(this).removeClass("selected").dequeue();
                    });
            });
            
            $("#countItemsBtn").click(function() {
                const count = $(".groupItem").length;
                $(".groupItem").each(function(index) {
                    $(this).html(`元素${index+1} (共${count}个元素) <br><small>Class选择器选择了我们全部</small>`);
                });
            });
        });
    </script>
</body>
</html>

关键区别总结

唯一性要求：
- ID在文档中必须唯一（重复ID会导致jQuery只选择第一个匹配元素）
- Class可在多个元素上重复使用
选择结果：
- ID选择器返回单个元素
- Class选择器返回包含所有匹配元素的集合
性能差异：
- ID选择器通过原生document.getElementById()实现，效率极高
- Class选择器需要遍历DOM元素，性能相对较低
实际应用：
- 使用ID选择器操作特定元素（如导航栏、搜索框）
- 使用Class选择器操作一组元素（如表格行、卡片样式）