[譯] 咋才能忘掉jQuery然后用原生的js apis 呢

rose 發(fā)布于2019-08-22 10:58 / 3602人閱讀

摘要：原文地址已經(jīng)準(zhǔn)備好了，可能你還沒有準(zhǔn)備好擁抱它。那為啥不用呢。。瀏覽這些輕量的找一個(gè)服務(wù)于你特殊需求的，但是首先你必須確信一點(diǎn)原生的足夠滿足你實(shí)現(xiàn)你的需求

原文地址

javascript已經(jīng)準(zhǔn)備好了，可能你還沒有準(zhǔn)備好擁抱它。
那為啥不用jquery呢。。因?yàn)樗　６殷w積還不小，你的網(wǎng)站可能真的不是特別需要，

Select elements

// jQuery
var els = $(".el");

// Native
var els = document.querySelectorAll(".el");

// Shorthand
var $ = function (el) {
  return document.querySelectorAll(el);
}

var els = $(".el");

// Or use regex-based micro-selector lib
// http://jsperf.com/micro-selector-libraries

Create elements

// jQuery
var newEl = $("");

// Native
var newEl = document.createElement("div");
Add event listener
// jQuery
$(".el").on("event", function() {

});

// Native
[].forEach.call(document.querySelectorAll(".el"), function (el) {
  el.addEventListener("event", function() {

  }, false);
});

Set/get attribute

// jQuery
$(".el").filter(":first").attr("key", "value");
$(".el").filter(":first").attr("key");

// Native
document.querySelector(".el").setAttribute("key", "value");
document.querySelector(".el").getAttribute("key");

Add/remove/toggle class

// jQuery
$(".el").addClass("class");
$(".el").removeClass("class");
$(".el").toggleClass("class");

// Native
document.querySelector(".el").classList.add("class");
document.querySelector(".el").classList.remove("class");
document.querySelector(".el").classList.toggle("class");
Append
// jQuery
$(".el").append($(""));

// Native
document.querySelector(".el").appendChild(document.createElement("div"));

Clone

// jQuery
var clonedEl = $(".el").clone();

// Native
var clonedEl = document.querySelector(".el").cloneNode(true);

Remove

// jQuery
$(".el").remove();

// Native
remove(".el");

function remove(el) {
  var toRemove = document.querySelector(el);

  toRemove.parentNode.removeChild(toRemove);
}

Parent

// jQuery
$(".el").parent();

// Native
document.querySelector(".el").parentNode;

Prev/next element

// jQuery
$(".el").prev();
$(".el").next();

// Native
document.querySelector(".el").previousElementSibling;
document.querySelector(".el").nextElementSibling;

XHR aka AJAX

// jQuery
$.get("url", function (data) {

});
$.post("url", {data: data}, function (data) {

});

// Native

// get
var xhr = new XMLHttpRequest();

xhr.open("GET", url);
xhr.onreadystatechange = function (data) {

}
xhr.send();

// post
var xhr = new XMLHttpRequest()

xhr.open("POST", url);
xhr.onreadystatechange = function (data) {

}
xhr.send({data: data});

這還只是一小部分吶，你沒事可以console.log 一下然后通過瀏覽器看看有哪些原生的用法，或者瞅瞅
MDN’s JS API reference或者WPD’s DOM docs.
你仍然可以用libs。瀏覽這些輕量的ultra-lightweight找一個(gè)服務(wù)于你特殊需求的lib，但是首先你必須確信一點(diǎn)原生的js足夠滿足你實(shí)現(xiàn)你的需求