哪种方式有效？

Question

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

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

jQuery:

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

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

现在哪个调用效率高，直接通过class或者button[attr*]调用，我想知道，因为当我有超过500个按钮时它可能会导致问题，但我不确定它们是否会影响相同的结果.

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() { });

Answer 2

如果你有一个类属性，那么使用类选择器而不是属性选择器才有意义。效率作为次要奖励提供； jQuery 和浏览器原生实现都对类选择器进行了特殊优化，因为它们具有相关的语义和用法。

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

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() { ... });

Answer 4

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

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 compatibility with IE）

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