在jQuery中select后代元素的最快方法是什么？
据我所知，在jQuery中有很多select子元素的方法。
//Store parent in a variable var $parent = $("#parent"); 方法1 （通过使用范围）
$(".child", $parent).show();
方法2 （find（）方法）
$parent.find(".child").show();
方法3 （仅针对直接子女）
$parent.children(".child").show();
方法4 （通过CSSselect器） – 由@spinonbuild议
$("#parent > .child").show();
方法5 （与方法2相同） – 根据@Kai
$("#parent .child").show();
我不熟悉分析能够自己调查，所以我很想看看你有什么话要说。
PS我明白这是这个问题的可能重复，但它不包括所有的方法。
方法1和方法2是相同的，唯一不同的是方法1需要parsing传递的作用域并将其转换为对$parent.find(".child").show();的调用$parent.find(".child").show(); 。
方法4和方法5都需要parsingselect器，然后调用： $('#parent').children().filter('.child')和$('#parent').filter('.child') 。
所以方法3总是最快的，因为它需要做最less量的工作，并且使用最直接的方法来获得一级孩子。
基于Anurag修改后的速度testing： http : //jsfiddle.net/QLV9y/1/
速度testing:(越多越好）
在Chrome上 ，方法3是最好的方法1/2，然后是4/5
替代文字http://tinyurl.com/2clyrbz
在Firefox上 ，方法3仍然是方法1/2然后是4/5
替代文字http://tinyurl.com/2e89tp5
在Opera上 ，方法3仍然是方法4/5然后是1/2
替代文字http://tinyurl.com/2a9r9r8
在IE 8上 ，虽然总体上比其他浏览器慢，但仍然遵循方法3,1,2,4,5的顺序。
替代文字http://tinyurl.com/2a8ag59
总体而言， 方法3是直接调用的最佳方法，不需要像方法1/2那样遍历多个子元素级别，并且不需要像方法4/5那样进行parsing
虽然，请记住，其中一些我们正在比较苹果橙子方法5看所有的孩子，而不是一级的。
方法1
使用jQuery不能更短，更快。 这个调用直接返回到$(context).find(selector) （ 方法2 ，由于$(context).find(selector) ），然后调用getElementById 。
方法2
是这样做，但没有一些不必要的内部函数调用。
方法3
使用children()比使用find()快，但是当然children()只能find根元素的直接子对象，而find()会自上而下地search所有的子元素（包括子子元素）
方法4
使用这样的select器，必须慢一些。 由于sizzle （这是jQuery的select器引擎）的工作原理是左 .child ，它会先匹配所有类.child然后再查看它们是否是来自id“parent”的直接子对象。
方法5
正如你所说的，这个调用还会创build一个$(context).find(selector)调用，由于jQuery函数中的一些优化，否则它也可能通过（较慢的） sizzle engine 。
因为这是一个旧的职位，事情随着时间而改变。 到目前为止，我在最后一个浏览器版本上做了一些testing，为了避免误解，我在这里发布。
在兼容HTML5和CSS3的浏览器上使用jQuery 2.1，性能会发生变化。
以下是testing场景和结果：
function doTest(selectorCallback) { var iterations = 100000; // Record the starting time, in UTC milliseconds. var start = new Date().getTime(); for (var i = 0; i < iterations; i++) { // Execute the selector. The result does not need to be used or assigned selectorCallback(); } // Determine how many milliseconds elapsed and return return new Date().getTime() - start; } function start() { jQuery('#stats').html('Testing...'); var results = ''; results += "$('#parent .child'): " + doTest(function() { jQuery('#parent .child'); }) + "ms"; results += "<br/>$('#parent > .child'): " + doTest(function() { jQuery('#parent > .child'); }) + "ms"; results += "<br/>$('#parent').children('.child'): " + doTest(function() { jQuery('#parent').children('.child'); }) + "ms"; results += "<br/>$('#parent').find('.child'): " + doTest(function() { jQuery('#parent').find('.child'); }) + "ms"; $parent = jQuery('#parent'); results += "<br/>$parent.find('.child'): " + doTest(function() { $parent.find('.child'); }) + "ms"; jQuery('#stats').html(results); }
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=7, IE=8, IE=9, chrome=1" /> <title>HTML5 test</title> <script src="//code.jquery.com/jquery-2.1.1.js"></script> </head> <body> <div id="stats"></div> <button onclick="start()">Test</button> <div> <div id="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> </div> </body> </html>
