关于js的选择器

Question

当$(this).parent().parent()==$('.arr').parent()时你们会选择哪种呢，其实只是举一个例子，在写代码的时候经常会遇到这种多种方式都可以选择到同一元素的情况，哪种效率高点呢，我现在只是知道ID是最快的，然后就是尽量少操作DOM。

Answer 1

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。

Answer 2

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

Answer 3

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

Answer 4

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