成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

rose / 3647人閱讀

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

原文地址

javascript已經(jīng)準(zhǔn)備好了，可能你還沒有準(zhǔn)備好擁抱它。
那為啥不用jquery呢。。因?yàn)樗?。而且體積還不小，你的網(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)你的需求

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.hztianpu.com/yun/91559.html

相關(guān)文章

  • 前端相關(guān)大雜燴

    摘要：希望幫助更多的前端愛好者學(xué)習(xí)。前端開發(fā)者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實(shí)踐譯者張捷滬江前端開發(fā)工程師當(dāng)你問起有關(guān)與時(shí)，老司機(jī)們首先就會(huì)告訴你其實(shí)是個(gè)沒有網(wǎng)絡(luò)請(qǐng)求功能的庫(kù)。 前端基礎(chǔ)面試題(JS部分) 前端基礎(chǔ)面試題(JS部分) 學(xué)習(xí) React.js 比你想象的要簡(jiǎn)單 原文地址：Learning React.js is easier than you think 原文作...

    fuyi501 評(píng)論0 收藏0

  • 忘掉jQuery，使用JavaScript原生API

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

    lidashuang 評(píng)論0 收藏0

  • [譯] 深入理解 Promise 五部曲：4. 擴(kuò)展問題

    摘要：有一個(gè)和相關(guān)的更大的問題。最后，請(qǐng)負(fù)有責(zé)任感并且使用安全的擴(kuò)展。深入理解五部曲異步問題深入理解五部曲轉(zhuǎn)換問題深入理解五部曲可靠性問題深入理解五部曲擴(kuò)展性問題深入理解五部曲樂高問題最后，安利下我的個(gè)人博客，歡迎訪問 原文地址：http://blog.getify.com/promis... 現(xiàn)在，我希望你已經(jīng)看過深入理解Promise的前三篇文章了。并且假設(shè)你已經(jīng)完全理解Promises...

    Shimmer 評(píng)論0 收藏0

  • 前端開發(fā)工程師怎樣能表現(xiàn)的不那么“新手沒經(jīng)驗(yàn)”、不那么“培訓(xùn)班出來的”

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

    sorra 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<