你也许不需要 jQuery -- You Might Don't Need jQuery

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

// jQuery
$('.class');
$('#id');
$('a[target=_blank]');
$el.find('li');
$el.prev();
$el.next();

// Native
document.querySelectorAll('.class');
document.querySelector('#id');
document.querySelectorAll('a[target=_blank]');
el.querySelectorAll('li');
el.previousElementSibling;
el.nextElementSibling;
                

// jQuery
$('#my-input').val();
$('.radio').index(e.currentTarget);

// Native
document.querySelector('#my-input').value;
Array.prototype.indexOf.call(document.querySelectorAll('.radio'), e.currentTarget);
                

// jQuery
$el.attr('foo');
$el.attr('foo', 'bar');
$el.data('foo');

// Native
el.getAttribute('foo');
el.setAttribute('foo', 'bar');
el.dataset['foo'];
                

// jQuery
$el.css("color");
// Native
window.getComputedStyle(el).color;

// jQuery
$el.css({ color: "#FFF" });
// Native
el.style.color = '#FFF';

// jQuery
$el.addClass(className);
// Native
el.classList.add(className);

// jQuery
$el.removeClass(className);
// Native
el.classList.remove(className);

// jQuery
$el.hasClass(className);
// Native
el.classList.contains(className);

// jQuery
$el.toggleClass(className);
// Native
el.classList.toggle(className);
                

// jQuery
$el.remove();
// Native
el.parentNode.removeChild(el);

// jQuery
$el.text();
// Native
el.textContent;

// jQuery
$el.text(string);
// Native
el.textContent = string;

// jQuery
$el.html();
// Native
el.innerHTML;

// jQuery
$el.html(htmlString);
// Native
el.innerHTML = htmlString;

// jQuery
$el.append($newEl);
// Native
el.appendChild(newEl);

// jQuery
$el.prepend($newEl);
// Native
el.insertBefore(newEl, el.firstChild);
                

// jQuery
$(selector).load(url, completeCallback)

// Native
fetch(url).then(data => data.text()).then(data => {
    document.querySelector(selector).innerHTML = data
}).then(completeCallback)

// jQuery
$.ajax({
  url: url,
  type: 'GET',
  success: function(resp) {
    // 处理响应
  },
  error: function() {
    // 处理错误
  }
});

// Native
fetch(url)
  .then(response => response.json())
  .then(data => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });
                

// jQuery
$(document).ready(eventHandler);
// Native
// 检测 DOMContentLoaded 是否已完成
if (document.readyState !== 'loading') {
    eventHandler();
} else {
    document.addEventListener('DOMContentLoaded', eventHandler);
}

// jQuery
$el.on(eventName, eventHandler);
// Native
el.addEventListener(eventName, eventHandler);

// jQuery
$el.off(eventName, eventHandler);
// Native
el.removeEventListener(eventName, eventHandler);

// jQuery
$(el).trigger('custom-event', {key1: 'data'});
// Native
if (window.CustomEvent) {
  const event = new CustomEvent('custom-event', {detail: {key1: 'data'}});
} else {
  const event = document.createEvent('CustomEvent');
  event.initCustomEvent('custom-event', true, true, {key1: 'data'});
}
el.dispatchEvent(event);
                

// jQuery
$el.show();
$el.hide();

// Native
el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';
el.style.display = 'none';

// jQuery
$el.fadeIn();
// Native
el.style.transition = 'opacity 0.5s';
el.style.opacity = '1';

// jQuery
$el.fadeOut();
// Native
el.style.transition = 'opacity 0.5s';
el.style.opacity = '0';

// jQuery
$el.slideUp();
$el.slideDown();
// Native
// 这些效果可以通过 CSS transitions 和 JavaScript 来实现
// 例如：
el.style.transition = 'max-height 0.5s ease-out';
el.style.overflow = 'hidden';
el.style.maxHeight = '0';  // slideUp
el.style.maxHeight = el.scrollHeight + 'px';  // slideDown