优化jquery选择器

我读到一些选择器可以使用

querySelectorAll（）

。 这就是一个例子

$('a.button:animated'); // Does not use querySelectorAll()
$('a.button').filter(':animated');  // Uses it and faster.

我有一个选择器：

 $( 'input[name="annoncedby"]:radio' ).on('change',function(){
   ....
 }

我是这样用的：

  $( 'input[name="annoncedby"]').filter(':radio' ).on('change',function(){
   ....
   }

---

但是它不是很快，如何才能更快呢，谢谢？

这些优化背后的想法是，如果使用了sizzle，就不需要sizzle，如果需要使用，可以将其添加到它自己的子句中，JQuery足够聪明，可以进行优化

此代码完全绕过了JQuery，确保了最高性能：

“严格使用”；
//选择元素的各种方法
var radios=document.querySelectorAll（'[name=“annoncedby”]'）；
//var radios=document.querySelectorAll（'input[name=“annoncedby”]”）；
//var radios=document.querySelectorAll（'input[name=“annoncedby”][type=“radio”]”）；
用于（无线电中的var i）{
收音机[i].addEventListener（'change'，函数（事件）{
警报（该值）；
});  
}

---

另一种方法是使用委托事件处理程序，附加到所有单选按钮的祖先

这将提供更快的初始事件连接，并且在事件发生时不会明显降低速度：

它通过应用单个事件处理程序来工作，该处理程序侦听

change

事件冒泡到祖先元素，然后将jQuery选择器应用到冒泡链中的元素，然后将函数应用到导致事件的任何匹配元素。由于事件响应仅以用户界面的速度进行，因此使用这种方法没有真正的缺点

为了让您了解事件注册的速度差异，我更新了

@Musa

中的JSPerf测试。HTML中唯一添加的是连接处理程序的父元素

---

JSPerf:

你说的“不起作用”是什么意思？它没有使用

querySelectorAll

，或者它没有生成所需的结果？发生了什么事？对不起，我的意思是它不快。我编辑。它可以工作，但不会更快。这与不使用类名或id的情况下的速度差不多。因此，在您的示例中，最好不要使用

过滤器（':radio'）

？它会选择收音机吗？不，最好使用

过滤器（':radio'）

。最好使用

[type=“radio”]

，因为querySelectorAll（）可以处理它，第一点是关于事件的内容实际上并不相关。问题在于如何定位绑定该文件的元素event@charlietfl：我明白了。删除了不相关的部分。关键是单个委托事件处理程序将更快地连接起来。谢谢：），我已经看到了您的答案的及时变化，谢谢。

$('#someparentid').on('change', 'input[name="annoncedby"]:radio', function(){
   ....
});