Question

页面上有500多个按钮。

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

jQuery的：

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

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

现在哪个调用有效，直接按类或按钮[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

如果你有一个class属性，那么在属性选择器上使用类选择器才有意义。效率作为次要奖金提供; 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选择器慢。您应该使用.delegate()或.on()用于jQuery 1.7及更高版本而不是.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更有效。

哪种方式有效？

5 个答案: