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

rose 發布于2019-08-22 10:58 / 3603人閱讀

摘要：原文地址已經準備好了，可能你還沒有準備好擁抱它。那為啥不用呢。。瀏覽這些輕量的找一個服務于你特殊需求的，但是首先你必須確信一點原生的足夠滿足你實現你的需求

原文地址

javascript已經準備好了，可能你還沒有準備好擁抱它。
那為啥不用jquery呢。。因為它慢啊。而且體積還不小，你的網站可能真的不是特別需要，

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找一個服務于你特殊需求的lib，但是首先你必須確信一點原生的js足夠滿足你實現你的需求

云服務器 GPU云服務器在萬網買了域名然后呢登陸了騰訊云服務器然后呢原生js和jquery webrtc 原生的api

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/91559.html

前端相關大雜燴

摘要：希望幫助更多的前端愛好者學習。前端開發者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實踐譯者張捷滬江前端開發工程師當你問起有關與時，老司機們首先就會告訴你其實是個沒有網絡請求功能的庫。前端基礎面試題(JS部分) 前端基礎面試題(JS部分) 學習 React.js 比你想象的要簡單原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 評論0 收藏0
忘掉jQuery，使用JavaScript原生API

摘要：以下是和實現相同操作的等價代碼選擇元素函數法調用創建元素添加事件監聽器設置獲取屬性添加移除切換類附加內容克隆元素移除元素獲取父元素上一個下一個元素或這些只是很少的一部分，不能等到哪一天變成只會用了，以下是jQuery和JavaScript實現相同操作的等價代碼選擇元素 //jQuery var ele = $(.ele); //javascript var ele = docum...

lidashuang 2019-08-19 17:12 評論0 收藏0
[譯] 深入理解 Promise 五部曲：4. 擴展問題

摘要：有一個和相關的更大的問題。最后，請負有責任感并且使用安全的擴展。深入理解五部曲異步問題深入理解五部曲轉換問題深入理解五部曲可靠性問題深入理解五部曲擴展性問題深入理解五部曲樂高問題最后，安利下我的個人博客，歡迎訪問原文地址：http://blog.getify.com/promis... 現在，我希望你已經看過深入理解Promise的前三篇文章了。并且假設你已經完全理解Promises...

Shimmer 2019-08-21 12:24 評論0 收藏0
前端開發工程師怎樣能表現的不那么“新手沒經驗”、不那么“培訓班出來的”

摘要：最近看到知乎上面很多討伐培訓班的問答文章，不禁想到了我和新手同事合作的一些經歷其實你是培訓班出來還是計算機科班畢業，沒人在乎，關鍵是你表現出來的一些問題切切實實的對你的同事或合作伙伴造成了很大困擾，而且這些問題集中在某一部分人身上顯露出來，最近看到知乎上面很多討伐培訓班的問答、文章，不禁想到了我和新手同事合作的一些經歷；其實你是培訓班出來還是計算機科班畢業，沒人在乎，關鍵是你表...

sorra 2019-08-21 11:30 評論0 收藏0