1. 使用选择器，根据选择器的优先级进行查找

   id  > tag > class > attribute

    

2. 在已经获取了DOM的情况下，优先DOM，例如：

   var elemSelector = document.querySelector('#foo');
   
   //bad
   $('#foo').on(/*do something*/);
   
   //good
   $(elemSelector).on(/* do something*/);

   因为传递选择器，jQuery会先查找得到DOM，再包装jQuery对象，而传DOM的话则直接包装jQuery对象。

    

3. 在jQuery中尽可能一次选择到位
   比如题主的代码，产生的原理和修正的代码原理大概如下：

   //bad
   $('#foo').parent().parent().parent();
   
   //大概原理
   jQuery(
       jQuery(
           jQuery(
               document.getElementById('foo'))[0].parentElement)[0].parentElement)
   
     
   //good
   $('#foo').closet('li');
   
   //大概原理
   var elem = document.getElementById('foo');
   while ((elem = elem.parentElement).tagName !== 'LI');

    

4. 在已经存在的DOM中，使用范围内查找：

   //bad
   var $foo = $('.foo');//#1
   var $bar = $('.bar');
   
   
   //good
   var $box = $('#box');//#2
   var $foo = $box.find('.foo');
   var $bar = $box.find('.bar');
   

   上面的代码：

   • #1的原理是通过浏览器APIgetElementsByClassName直接根据class获取元素，是浏览器从document一层一层查找出来的。

   • #2的是先通过浏览器拿到#box，在#box的基础上通过浏览器APi getElementsByClassName获取元素，由于限定了查找返回，浏览器会先从直接在该DOM里进行遍历查找。查找范围比#1更小，当然这仍然建立在已有DOM的基础上。
     #2的做法比较好的是页面中如果切割成了各个模块，则可以在每个模块内进行DOM查找，一来提升了DOM查找速度，二来这样DOM的模块层次更分明一些，你可以确保你操作的DOM不会和其他模块冲突。

    

简单的说：

• 减少DOM查找

• 在已经获取了DOM的情况下DOM高于选择器

新人谨记，反复使用的jQuery对象，请保存到变量里，而不要每使用一次就查找包装一次jQuery。

只要减少遍历，其他都还可以，看具体情况用具体方法。

如果说仅仅是你这种写法的话。还是第一种好点，虽然用到了两个parent()但是开头已经明确了是当前的元素的parent()。而你的第二种用的是类名arr，jquery肯定会查找你当前代码中有多少个arr的元素在执行parent()。

都差不多吧！没仔细研究过执行效率。一般能用id直接用id就好