昨天进行微众银行的面试，其中有一个面试题目引起了我的兴趣（恭喜你，成功引起我的兴趣→_→）就是在jquery选择器中$('#div .cls')和$('#div').find('.cls')有什么不同

当时知道这个问题的时候，我是懵逼的，因为我从来没有思考过这个问题，最近用cheerio经常用到find来查找，但是也没有思考过。于是在面试完后查阅API，谷歌只能找到一些比较理论的解释

和同事交流，得出结果是：

　　　　$()选择时返回的是一个jquery对象，而find方法是调用这个对象的方法。

　　所以按照这样来说，$()会比find快，如果这个问题就这样完结了那就太没意思了，当时面试回答的是find方法的查询效率会更高（程序员的直觉），但是作为一个科学的程序员，咱们可不能凭直觉说话，刚刚洗澡的时候又想起这个问题，

于是洗完澡赶紧出来手写了个demo，如下：

源码在此：

1  2  3  4     
       5      6      9 10 11     
      
       12         
       
        13             
        ddd14             
        ddd15             
        ddd16         
       
17     
      
18     start19     20     21     22     23     52 53 

 

每一次的第一次执行结果，一定是find方法花的时间会比直接查找会少，因此，推翻了之前的那个结论，至于为什么？

我的观点是这样的：

　　CSS的选择器的匹配规则是从右到左的，我猜JQUERY也是这样，也就是说比如：

$('#div .cls')会在dom树中先查找.cls的类，再从这些类中查找其ID为div的节点，因此这样的写法是比较耗时的。 说到这里，你应该懂我的意思了吧？！ 好，抱着验证我的观点的想法，我再写了一次代码，就是现在你看到的第三个input框，他是直接查找$('.cls')的结果，数据说话，它所耗费的时间是最短的。 我想，到了这里，似乎可以做一个小总结了， 之前所得的结论并没有错————$()选择时返回的是一个jquery对象，而find方法是调用这个对象的方法。 然而在查找嵌套层次比较深，或者查询次数比较多的情况下find的效率会更高效 然而真正的原因是不是这样呢？！欢迎各位留言或者私信我一起探讨~！