JQuery類選擇器vs id選擇器

我有 7個不同的按鈕，所有按鈕在點擊時都執行相同的javascript功能。我應該使用類選擇器還是id選擇器。JQuery類選擇器vs id選擇器

$("input.printing").on("click", function(event) { 
    printPdf(event); 
});

或

$("#package1Pdf").click(function(event) { 
     printPdf(event); 
    }); 
$("#package2Pdf").click(function(event) { 
     printPdf(event); 
    }); 
$("#package3Pdf").click(function(event) { 
     printPdf(event); 
    }); 
$("#package4Pdf").click(function(event) { 
     printPdf(event); 
    });

各有什麼優勢和劣勢？哪一個更優選。

來源

2013-03-13 Chun ping Wang

看看代碼並告訴我們，說實話，看起來更好看。沒有正確或錯誤的答案，這只是一個個人問題，讓你對此有自己的看法。 – BoltClock 2013-03-13 18:53:02

如果你願意，你也可以做'$（「＃package1Pdf，＃package2Pdf，＃package3Pdf，＃package4Pdf」）。click（）' – Dom 2013-03-13 18:53:35

它更快的選擇id的元素，但代碼更簡潔該功能一次按類。一般情況下，除非您真的需要（可能*輕微*）性能提升，否則將使用代碼可讀性。 – Jack 2013-03-13 18:53:39

您可以使用ID過濾器沒有多個選擇：

$('[id^="package"]').click(printPdf);

以上將選擇所有的ID開始以「包」。這意味着差異主要是語義。您應該選擇對您的應用程序及其開發方式最有意義的選項。

查看jQuery attribute selectors page瞭解jQuery選擇的靈活性。在此頁面上保存書籤將會阻止您再次編寫類似第二個示例的代碼。

哪個更好？

如果您設置了結構以便您有一個邏輯上和正確定義適當元素集的類，那麼您應該使用這個類來選擇。

同樣，如果您有給定的元素專門命名爲ID並且沒有附加描述性類名稱代表您想要選擇的內容，則使用ID選擇。 性能差異幾乎不涉及任何應用程序，包括您的。

來源

2013-03-13 18:54:00 BinaryTox1n

顯然，你的第一個代碼使用類更乾淨，整潔，更好。

ID選擇器是最快的，這是真的..但在這個時代，它並不重要。因此，不要爲性能而煩惱（除非它是一個問題），而只是使用乾淨和可維護的。

哦順便說一句，你甚至不需要這個匿名函數。見下文，

$("input.printing").on("click", printPdf);

來源

2013-03-13 19:03:45

由於大多數所指出的，你用選擇可能會對性能產生影響，但它往往是可以忽略不計，多風格和可讀性的問題。底線，jQuery將爲每個選定的元素創建一個唯一的處理程序，可以單獨使用id或使用多選方法（如類或屬性選擇器）。就我個人而言，我喜歡你的第一個例子，因爲它將覆蓋你的視圖的未來增加，而不需要記住添加另一個處理程序。

來源

2013-03-13 19:04:39 iGanja

僅僅通過Id選擇比通過類選擇要快一些，因爲引擎下的jQuery使用getElementById，這在大多數瀏覽器中都更快。有關更多信息，請參閱this文章，因爲它顯示了許多其他方法來提高與Jquery相關的性能。但是，請記住，選擇器的性能不是唯一需要關注的事情。附加許多不必要的事件也可能導致性能問題。爲了緩解這個問題，你可以使用委託，請參閱這個jQuery documentation關於委託的更多信息。

來源

2013-03-13 19:08:49 nicholasnet

大家都知道id選擇是更快，更好的..但在你的情況下..因爲你選擇每個ID 8次..這比較類seletor比較慢，你可以看到here

類選擇你的情況是更好，更快，更易讀...

注：如果你需要添加在不久的將來，20多個按鈕（100將是太多了）.....你選擇去與id選擇器... phewwww！也就是說，20個事件處理程序......;）;）

來源

2013-03-13 19:09:16 bipen

JQuery類選擇器vs id選擇器

回答

相關問題