哪種方式高效？

我在頁面上有500多個按鈕。哪種方式高效？

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

的jQuery：

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

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

現在打電話是有效率的，按類或按鈕[ATTR *]，我想知道它，因爲它可以在以後導致問題，當我有更多的則直接調用500按鈕，但我不確定它們是否會影響相同的結果。

來源

2012-11-26 Vural Acar

第二個肯定 –

號碼1應該是'$（'button.btn-x'）...' - 你不需要使用屬性contains選擇器來選擇一個類。 – nnnnnn

雖然你應該使用'on'，因爲'live'已被棄用。 –

類選擇器將會更快一個數量級。

這就是說，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-26 10:48:53

好主意，謝謝，我會測試它 –

如果你有一個類屬性，它纔有意義上的屬性選擇使用一類選擇。效率作爲次要獎勵提供;由於jQuery和瀏覽器本機實現的關聯語義和用法，因此對類選擇器都有特殊的優化。

此外，這不是使用屬性選擇器處理類屬性的完全正確方法。您可能的意思是[class~="btn-x"]而不是[class*="btn-x"]。這些匹配的每一個都以不同的方式對屬性值進行匹配，前者的行爲與類屬性的選擇器更爲接近。

來源

2012-11-26 10:49:01 BoltClock

LOL真的，我甚至沒有讀取第一個選擇器，直到現在 – Esailija

類選擇器更快。類選擇器只比id選擇器慢。你應該使用.delegate()或.on()用於jQuery 1.7及更高版本）而不是.live()。在你的情況下，這很重要，因爲.delegate()爲.live()附加一個處理程序而不是500。

來源

2012-11-26 10:53:56

live（），像委託（），只註冊一個事件處理程序。它們之間的不同之處在於，實時使用根文檔元素和委託讓您選擇它的錨定位置。 – Naor

如果您正在尋找最高效的代碼，你可以這樣做：

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。

來源

2012-11-26 10:56:47 Naor

在jQuery（1.7+）的最新版本中，$（'。classname'）與使用getElementsByClassName一起工作，所以這幾乎是一樣的。 –

@MaximPechenin：對於很多元素來說小的變化都比較大。 – Naor

不是的。它是一次性搜索這個類的所有元素。即使有500個元素。 –

最有效的是有一個事件處理程序，而不是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-26 11:37:57 Corneliu

哪種方式高效？

回答

相關問題