Javascript Jquery-.children（）.children（）与.find（）的比较

我有一个场景，我知道我要找的div正好有两层

是否更有效地使用：

$('#mydiv').find('.myselector')

或

请尝试以下方法：

var elems = document.getElementById('mydiv').querySelectorAll(".myselector");

jQuery与我的一些想法

---

编辑：对于IE7支持：

var container = document.getElementById('mydiv'), elems = [],
    firstlevel = container.children, l = firstlevel.length,
    secondlevel, m, i, j;
for( i=0; i<l; i++) {
    secondlevel = firstlevel[i].children;
    m = secondlevel.length;
    for( j=0; j<m; j++) {
        if( secondlevel[j].className.match(/\bmyselector\b/)) {
            elems.push(secondlevel[j]);
        }
    }
}

var container=document.getElementById（'mydiv'），elems=[]，
firstlevel=container.children，l=firstlevel.length，
二级，m，i，j；
对于（i=0；i请尝试以下方法：

var elems = document.getElementById('mydiv').querySelectorAll(".myselector");

jQuery与我的一些想法


编辑：对于IE7支持：

var container = document.getElementById('mydiv'), elems = [],
    firstlevel = container.children, l = firstlevel.length,
    secondlevel, m, i, j;
for( i=0; i<l; i++) {
    secondlevel = firstlevel[i].children;
    m = secondlevel.length;
    for( j=0; j<m; j++) {
        if( secondlevel[j].className.match(/\bmyselector\b/)) {
            elems.push(secondlevel[j]);
        }
    }
}

var container=document.getElementById（'mydiv'），elems=[]，
firstlevel=container.children，l=firstlevel.length，
二级，m，i，j；
对于（i=0；i使用您的控制台进行检查。首先检查您的第一个建议：

console.time('benchmark');
for (var i=0; i<1000; i++) {
  var $elem = $('#mydiv').find('.myselector');
}
console.timeEnd('benchmark');

console.time('benchmark');
for (var i=0; i<1000; i++) {
  var $elem = $('#mydiv').children().children('.myselector');
}
console.timeEnd('benchmark');

console.time（'benchmark'）；
对于（var i=0；i使用您的控制台进行检查。首先检查您的第一个建议：

console.time('benchmark');
for (var i=0; i<1000; i++) {
  var $elem = $('#mydiv').find('.myselector');
}
console.timeEnd('benchmark');

console.time('benchmark');
for (var i=0; i<1000; i++) {
  var $elem = $('#mydiv').children().children('.myselector');
}
console.timeEnd('benchmark');

console.time（'benchmark'）；
对于（var i=0；我已经尝试过了吗？应该不难分析……抛弃jQuery更有效。如果你想提高效率，就应该一直这样做。准备一个测试并让人们检查！无论哪种方式，你可能最多只需要几纳秒——我会说，使用对你和你的代码更合理的方法…@ForOhFor define“意义重大"对我来说，如果你不介意的话……除非你在成千上万的DOM元素中循环，否则你/你的用户不会注意到有什么不同。你试过吗？应该不难分析……放弃jQuery更有效。如果你想提高效率，就应该一直这样做。准备一个测试，让人们检查一下！不管怎样，你都会成功可能最多只需要几纳秒——我会说，使用对您和您的代码更有意义的选项…@ForOhFor define“显著地”对我来说，如果你不介意的话……除非你在成千上万的DOM元素中循环，否则你/你的用户不会注意到区别。@FastTrack好吧，这太愚蠢了，在我看来：p然后，我再次发现jQuery很愚蠢：如果你不懂Vanilla JS，那么你就不应该使用这样的工具，如果你懂Vanilla JS，那么你就不会需要这样的工具。@NiettheDarkAbsol-你忘了“现在离开我的草坪，你们这些讨厌的孩子！”）@talemyn Hah，是的，叫我老式（尽管我只有21岁），但我为我需要的工作和最高效率写了我自己的一套精密工具：）我想这就是为什么一个网站不断地看到数百个用户在线……我知道香草JS。jQuery是中大型项目的巨大帮助。这不是一个替代实际香草JS知识的问题，它是对C++的补充。更多的东西是了解，而不是更少。我的网站还需要在IE7上工作（是的，我知道…）因此，与其担心我使用的IE会出现什么问题jQuery@FastTrack在我看来，这太愚蠢了：p然后，我再次发现jQuery很愚蠢：如果你不懂Vanilla JS，那么你就不应该使用这样的工具，如果你懂Vanilla JS，那么你就不需要这样的工具。@NiettheDarkAbsol-你忘了“现在离开我的草坪，你们这些讨厌的孩子！”@talemyn Hah，是的，叫我老式（尽管我只有21岁），但我为我需要的工作和最高效率写了一套自己的精密工具：）我想这就是为什么一个网站不断地看到数百个用户在线……我知道香草JS。jQuery是中大型项目的巨大帮助。这不是一个替代实际香草JS知识的问题，它是对C++的补充。更多的东西是了解，而不是更少。“我不写汇编。我的网站还需要在IE7上工作（是的，我知道…），所以我不用担心IE会出现什么问题，我使用JQueryTanks..完全不想尝试！只需运行它，.children（）.children（）每次花费160毫秒或更多，.find（）每次花费不到10毫秒！我将使用.find（）”很酷；你可能也尝试过@Niet the Dark Absol的普通JS版本吗？只是好奇它有多快…只是顺便说一句，我找不到它，但是在某处写了一个非常好的jsPerf，比较了jQuery和
find（）中不同的选择器方法
几乎总是最快的。此外，
.filter（）
比使用伪选择器速度更快。@ForOhFor-我想这就是我在上面的评论中想到的jsPerf测试：“浏览器范围”“并没有显示所有的浏览器，所以如果你感兴趣的话，你可能需要在不同的浏览器中运行几次，以了解它们之间的差异。这是一个老掉牙的好东西。可能是我能找到的最有用的控制台脚本之一。谢谢。。完全不想尝试！只需运行它，.children（）.children（）每次需要160毫秒或更长时间，.find（）每次不到10毫秒！我和你一起去。发现（）酷；你有没有试过香草版的@Niet the Dark Absol？只是好奇它的速度有多快…顺便说一句，我找不到它，但是有一个非常好的jsPerf，它在某处编写，比较了jQuery中不同的选择器方法，
find（）
几乎总是最快的。另外，
.filter（）
比使用伪选择器速度更快。@ForOhFor-我想这就是我在上面的评论中想到的jsPerf测试：“Browserscope”并没有显示所有浏览器，所以你可能需要在不同的浏览器中运行几次来了解差异，如果你感兴趣的话。一个老掉牙但很好的人。可能是我能找到的最有用的控制台脚本之一。