前端發(fā)展很快期吓，現(xiàn)代瀏覽器原生API已經(jīng)足夠好用。我們并不需要為了操作DOM焰檩、Event等再學習Jquery的API憔涉。同時由于React、Angular析苫、Vue等框架的流行兜叨，直接操作DOM不再是好的模式，jQuery使用場景大大減少衩侥。本項目總結(jié)了大部分jQuery API替代的方法国旷，暫時只支持IE10+以上的瀏覽器。

1. Query Selector

常用的class茫死、ID跪但、屬性選擇器都可以使用document.querySelector或者 document.querySelecorAll替代。區(qū)別是：

• document.querySelector返回第一個匹配的Element
• document.querySelectorAll返回所有匹配的Element組成的NodeList峦萎。它可以通過[].slice.call()把它轉(zhuǎn)成Array
• 如果匹配不到任何Element屡久，jQuery返回空數(shù)組[]，但document.querySelectorAll返回null爱榔，注意空指針異常被环。當找不到時，也可以試用||設置默認值详幽，如document.querySelectotAll(selector)||[]

注意: document.querySelector和document.querySelectorAll性能很差筛欢，盡量使用document.getElementById、document.getElementsByClassName或者document.getElementsByTagName唇聘。

• 1.0. Query by selector

 //jQuery
 $('selector')

 //Native
document.querySelectorAll('selector');  

• 1.1 Qeury by class

 //jQuery
$('.css')

 //Native
 document.getElementsByClassName('selector');

• 1.2 Qeury by id

 //jQuery
$('#id')

 //Native
 document.getElementById('id');

• 1.3 Query by attribute

  
  // jQuery
  $('a[target=_blank]');
  
  //Native 
  document.querySelector('a[target= _blank]');
  

• 1.4 Find sth

  • Find nodes

  ```javascript
  

  //jQuery
  $el.find('li');

  //Native
  el.querySelector('li')   
  ```  
  

• Find body

//jQuery
  $('body');

  //Native
  document.body;
  ```

• Find Attribute

//jQuery
  $el.attr('foo');

  //Native
  e.getAttribute('foo');
  ```

• 1.5 Sibling/Previous/Next Elements

• Sibling elements

  
  //jQuery
  $el.sibglings();
  
  //Navtive
  [].filter.call(el.parentNode.children,function(child){
      return child!==el;
  });
  

• Previous elements

  
  //jQuery
  $el.prev();
  
  //Navtive
  el.previousElementSibling;
  

• Next elements

  
  //jQuery
  $el.next();
  
  //Navtive
  el.nextElementSibling;
  

• 1.6 Closest
  Closest獲得匹配選擇器的第一個祖先元素版姑，從當前元素開始沿DOM樹向上。

  
  //jQuery
  $el.closest(queryString);
  
  //Navtive
  

function closest(el, selector) {
const machesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
while (el)
if (matchesSelector.call(el, selector)) {
return el;
} else {
el = el.parentElement;
}
}
return null;
```

• 1.7 Parents Until

獲取當前每一個元素匹配元素集的祖先雳灾，不包括元素本身

      //jQuery
     $el.parentsUntil(selector,filter);
      
      //Native

function parentUntil(el, selector, filter) {
            const result = [];
            const matchesSelector = el.matchesSelector || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
            //match start from parent
            el = el.parentElement;
            while (el && !matchesSelector.call(el, selector)) {
                if (!filter) {
                    result.push(el);
                } else {
                    if (matchesSelector.call(el, filter)) {
                        result.push(el);
                    }
                }
                el = el.parentElement;
            }
            return result;
        }

• 1.8 Form

  • Input/Textarea

    //jQuery
    $('#my-input').val();
    
    //Native
    document.querySelector('#my-input').value;
  

  • Get index of e.currentTarget between .radio

      //jQuery
     $(e.currentTarget).index('.radio');
      
      //Native
     [].indexOf.call(document.querySelectorAll('.radio'),e.currentTarget);
    

• 1.9 Iframe Contents
  jQuery 對象的iframe contents返回的是iframe內(nèi)的document

  • Iframe contents

  
  //jQuery
  $iframe.contents();
  
  //Native
  iframe.contentDocument;
  

2. CSS & Style

• 2.1 CSS
  • Get Style