4

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

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

jQuery：

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

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

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

4

5 回答 5

9

类选择器将快一个数量级。

话虽如此，live()已弃用。你应该使用delegate()或者如果你正在使用 jQuery 1.7+ on()`。

例如：

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

// jQ 1.7+
$('#staticParent').on('click', '.btn-x', function() { });
于 2012-11-26T10:48:53.023 回答
4

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

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

于 2012-11-26T10:49:01.177 回答
2

最有效的是拥有一个事件处理程序而不是 500 个。

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

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

// 500 event handlers, not recommended
$("button.btn-x").on("click", function() { ... });
于 2012-11-26T11:37:57.507 回答
1

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

于 2012-11-26T10:53:56.273 回答
0

如果您正在寻找最有效的代码，您可能会这样做：

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 更有效。

于 2012-11-26T10:56:47.040 回答