昨天进行微众银行的面试，其中有一个面试题目引起了我的兴趣（恭喜你，成功引起我的兴趣→_→）就是在jquery选择器中$('#div .cls')和$('#div').find('.cls')有什么不同
当时知道这个问题的时候，我是懵逼的，因为我从来没有思考过这个问题，最近用cheerio经常用到find来查找，但是也没有思考过。于是在面试完后查阅API，谷歌只能找到一些比较理论的解释
和同事交流，得出结果是：
$()选择时返回的是一个jquery对象，而find方法是调用这个对象的方法。
所以按照这样来说，$()会比find快，如果这个问题就这样完结了那就太没意思了，当时面试回答的是find方法的查询效率会更高（程序员的直觉），但是作为一个科学的程序员，咱们可不能凭直觉说话，刚刚洗澡的时候又想起这个问题，
于是洗完澡赶紧出来手写了个demo，如下：
http://2.danielcv.sinaapp.com/sae/jquerySelectorDemo/index2.html
源码在此：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 8 </style> 9 </head> 10 <body> 11 <div id='target'> 12 <div id="div"> 13 <span class="cls">ddd</span> 14 <span class="cls">ddd</span> 15 <span class="cls">ddd</span> 16 </div> 17 </div> 18 <button value="start" id='startBtn'>start</button> 19 <input type="text" id='result'> 20 <input type="text" id='findRes'> 21 <input type="text" id='test3'> 22 <script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script> 23 <script> 24 $(function(){ 25 $('#startBtn').click(function(){ 26 var start=(new Date()).getTime(); 27 for(var i=0;i<100000;i++){ 28 $('#div .cls').css("background-color",'red'); 29 } 30 var end=(new Date()).getTime(); 31 $('#result').val(end-start); 32 console.log(end-start); 33 34 start=(new Date()).getTime(); 35 for(var i=0;i<100000;i++){ 36 $('#div').find('.cls').css("background-color",'red'); 37 } 38 end=(new Date()).getTime(); 39 $('#findRes').val(end-start); 40 console.log(end-start); 41 42 start=(new Date()).getTime(); 43 for(var i=0;i<100000;i++){ 44 $('.cls').css("background-color",'red'); 45 } 46 end=(new Date()).getTime(); 47 $('#test3').val(end-start); 48 console.log(end-start); 49 }) 50 }) 51 </script> 52 </body> 53 </html>
每一次的第一次执行结果，一定是find方法花的时间会比直接查找会少，因此，推翻了之前的那个结论，至于为什么？
我的观点是这样的：
CSS的选择器的匹配规则是从右到左的，我猜JQUERY也是这样，也就是说比如：
$('#div .cls')会在dom树中先查找.cls的类，再从这些类中查找其ID为div的节点，因此这样的写法是比较耗时的。
说到这里，你应该懂我的意思了吧？！
好，抱着验证我的观点的想法，我再写了一次代码，就是现在你看到的第三个input框，他是直接查找$('.cls')的结果，数据说话，它所耗费的时间是最短的。
我想，到了这里，似乎可以做一个小总结了，
之前所得的结论并没有错————$()选择时返回的是一个jquery对象，而find方法是调用这个对象的方法。
然而在查找嵌套层次比较深，或者查询次数比较多的情况下find的效率会更高效
然而真正的原因是不是这样呢？！欢迎各位留言或者私信我一起探讨~！