哪种方式更有效？

Question

我在页面上有超过500个按钮。

<button class="btn-x">test</button>

jQuery:

// #1
$('button[class*="btn-x"]').live('click', function() { }});

// #2
$('.btn-x').live('click', function() { }});

现在哪种方式更有效率，通过类直接调用还是使用button[attr*]？我想知道这个问题的答案，因为当我有500个按钮时，这可能会在后面引起问题，但我不确定它们是否会影响相同的结果。

- Vural

---

数字1应该是 $（'button.btn-x')... - 你不需要使用属性包含选择器来选择一个类。 - nnnnnn

你应该使用 on，因为 live 已被弃用。 - Deep Frozen

第二个应该更快。请查看这个stackoverflow问题。 - Sang Suantak

你为什么需要500个按钮？谁会点击它们呢？ - Bennor McCarthy

@Bennor 嗯，这不是问题 :) - Vural

@BoltClock，我做不到。 - Vural

Answer 1

类选择器将比其他选择器的速度快上一个数量级。

话虽如此，live()已被弃用。您应该使用delegate()或如果您使用的是jQuery 1.7+，则应该使用on()。

例如：

// < jQ 1.7
$('#staticParent').delegate('.btn-x', 'click', function() { });

// jQ 1.7+
$('#staticParent').on('click', '.btn-x', function() { });

- Rory McCrossan

Answer 2

如果您有一个class属性，使用类选择器而不是属性选择器是有意义的。效率是次要的奖励；由于其相关语义和用法，jQuery和浏览器本地实现对类选择器有特殊优化。

此外，使用属性选择器处理class属性的方法并不完全正确。您可能意味着[class~="btn-x"]而不是[class*="btn-x"]。每个选择器以不同的方式匹配属性值，前者更接近于class属性的选择器行为。

- BoltClock

---

确实如此，我甚至直到现在才读了第一个选择器。 - Esailija

Answer 3

最高效的方式是使用一个事件处理程序而不是500个。

正如@Rory McCrossan所说，最好将事件处理程序附加到静态父元素上：

// one event handler, recommended
$('#staticParent').on('click', '.btn-x', function() { }); 

// 500 event handlers, not recommended
$("button.btn-x").on("click", function() { ... });

- Corneliu

Answer 4

类选择器更快。类选择器仅比ID选择器慢。对于jQuery 1.7及更高版本，您应该使用.delegate()或.on()而不是.live()。在您的情况下，这很重要，因为.delegate()只附加一个处理程序，而不是500个.live()。

- Maxim Pechenin

---

live()、像delegate()一样，仅注册一个事件处理程序。它们之间的区别在于，live使用根文档元素，而delegate让您选择锚定的位置。 - Naor

Answer 5

如果你正在寻找最高效的代码，你可以这样做：

document.getElementsByClassName("btn-x");

但是我觉得这在IE中不起作用。如果你想要一个适用于IE的解决方案，你可以尝试：

function getElementsByClassName(className) {
    var a = [];
    if (document.getElementsByClassName) {
        a = document.getElementsByClassName(className);
    } else {
        var node = document.body;
        var re = new RegExp('(^| )'+classname+'( |$)');
        var els = node.getElementsByTagName("*");
        for(var i=0,j=els.length; i<j; i++) {
            if(re.test(els[i].className)) { a.push(els[i]); }
        }
    }
    return a;
}

（最后取自 javascript document.getElementsByClassName与IE的兼容性）

我没有测试过，但这应该比使用jQuery更有效率。

- Naor

---

在jQuery的最新版本（1.7+）中，$('.classname')的工作方式是使用getElementsByClassName，因此几乎相同。 - Maxim Pechenin

不，这是一次性搜索具有此类的所有元素，即使有500个元素。 - Maxim Pechenin