项目地址：https://github.com/oneuijs/You-Dont-Need-jQuery

前端发展很快，现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行，直接操作 DOM 不再是好的模式，jQuery 使用场景大大减少。本项目总结了大部分 jQuery API 替代的方法，暂时只支持 IE10+ 以上浏览器。

Query Selector

常用的 class、id、属性 选择器都可以使用 document.querySelector 或 document.querySelectorAll 替代。区别是

1) document.querySelector 返回第一个匹配的 Element

2) document.querySelectorAll 返回所有匹配的 Element 组成的 NodeList。它可以通过 [].slice.call() 把它转成 Array

3) 如果匹配不到任何 Element，jQuery 返回空数组 []，但 document.querySelector 返回 null，注意空指针异常。当找不到时，也可以使用 || 设置默认的值，如 document.querySelectorAll(selector) || []

注意：document.querySelector 和 document.querySelectorAll 性能很差。如果想提高性能，尽量使用 document.getElementById、document.getElementsByClassName 或 document.getElementsByTagName。

1.0 Query by selector

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

1.1 Query by class

// jQuery
$('.css');
// Native
document.querySelectorAll('.css');
// or
document.getElementsByClassName('css');

1.2 Query by id

// jQuery
$('#id');
// Native
document.querySelector('#id');
// or
document.getElementById('id');

1.3 Query by attribute

// jQuery
$('a[target=_blank]');
// Native
document.querySelectorAll('a[target=_blank]');
1.4 Find sth.
Find nodes
// jQuery
$el.find('li');
// Native
el.querySelectorAll('li');
Find body
// jQuery
$('body');
// Native
document.body;
Find Attribute
// jQuery
$el.attr('foo');
// Native
e.getAttribute('foo');
Find data attribute
// jQuery
$el.data('foo');
// Native
// using getAttribute
el.getAttribute('data-foo');
// you can also use `dataset` if only need to support IE 11+
el.dataset['foo'];

1.5 Sibling/Previous/Next Elements

Sibling elements
// jQuery
$el.siblings();
// Native
[].filter.call(el.parentNode.children, function(child) {
  return child !== el;
});
Previous elements
// jQuery
$el.prev();
// Native
el.previousElementSibling;
Next elements
// next
$el.next();
el.nextElementSibling;

1.6 Closest

Closest 获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。
// jQuery
$el.closest(queryString);
// Native
function closest(el, selector) {
  const matchesSelector = 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 parentsUntil(el, selector, filter) {
  const result = [];
  const matchesSelector = el.matches || 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 内的 document
Iframe contents
// jQuery
$iframe.contents();
// Native
iframe.contentDocument;
Iframe Query
// jQuery
$iframe.contents().find('.css');
// Native
iframe.contentDocument.querySelectorAll('.css');