忘掉jQuery，使用JavaScript原生API

lidashuang 發(fā)布于2019-08-19 17:12 / 531人閱讀

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

以下是jQuery和JavaScript實現(xiàn)相同操作的等價代碼

選擇元素

//jQuery
var ele = $(".ele");

//javascript
var ele = document.querySelectAll(".ele");

//函數(shù)法
var $ = function(ele){
    return document.querySelectAll(ele);
}

var ele = $(".ele"); //調用

創(chuàng)建元素

//jquery
var newEle = $("xxx");

//javascript
var newEle = document.createElement("xxx
");

添加事件監(jiān)聽器

//jQuery
$(".ele").on("event",function(){
    
});

//javascript
[].forEach.call(document.querySelectAll(".ele"),function(ele){
    ele.addEventListener("event",function(){
    },false);
})

設置/獲取屬性

//jQuery
$(".ele").attr("key","value");
$(".ele").attr("key");

//javascript
document.querySelector(".ele").setAttribute("key","value");
document.querySelector(".ele").getAttribute("key");

添加/移除/切換類

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

//javascript
document.querySelector(".ele").classList.add("class");
document.querySelector(".ele").classList.remove("class");
document.querySelector(".ele").classList.toggle("class");

附加內容（Append）

//jquery
$(".ele").append("xxx");

//javascript
document.querySelector(".ele").appendChild(document.createElement("xxx
"));

克隆元素

//jQuery
var cloneEle = $(".ele").clone();

//javascript
var cloneEle = document.querySelector(".ele").cloneNode(true);

移除元素

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

//javascript
remove(".ele");

function remove(ele){
    var toRemove = document.querySelector(ele);
    toRemove.parentNode.removeChile(toRemove);
}

獲取父元素

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

//javascript
document.querySelector(".ele").parentNode;

上一個/下一個元素

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

//javascript
document.querySelector(".ele").previousElementsibling;
document.querySelector(".ele").nextElementSibling;

XHR或AJAX

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

//javascript
//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});

這些只是很少的一部分，不能等到哪一天變成只會用jQuery了， O(∩_∩)O~

GPU云服務器云服務器原生js和jquery 原生javascript javascript原生原生javascript事件

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

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

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

摘要：原文地址已經準備好了，可能你還沒有準備好擁抱它。那為啥不用呢。。瀏覽這些輕量的找一個服務于你特殊需求的，但是首先你必須確信一點原生的足夠滿足你實現(xiàn)你的需求原文地址 javascript已經準備好了，可能你還沒有準備好擁抱它。那為啥不用jquery呢。。因為它慢啊。而且體積還不小，你的網站可能真的不是特別需要， Select elements // jQuery var els = $...

rose 2019-08-22 10:58 評論0 收藏0
如何忘卻jQuery，開始使用JavaScript原生API

摘要：就在這里隨時等候你的召喚，但是也許你還沒有準備好如何使用他。但是我想討論的是如果僅為使用個選擇器或者類似的東西，是否真的有必要加載。假設咱不是為了簡化，每個人用是因為它支持，動畫處理和選擇器函數(shù)。 JavaScript就在這里隨時等候你的召喚，但是也許你還沒有準備好如何使用他。為什么不用jQuery呢？因為他很慢并且你的網站真的不需要這些多余的負擔。我不是來這里爭辯原生API和函數(shù)...

Rindia 2019-08-19 14:25 評論0 收藏0
體驗js之美第八課-面向對象創(chuàng)建和繼承終結篇

摘要：概述到這里我們講說面向對象的系列部分的最后一個課程，面向對象必須掌握兩個東西一個是對象的創(chuàng)建一個是繼承。只需要記住一句話，屬性放在構造函數(shù)里面，方法放在原型上。概述到這里我們講說js面向對象的系列部分的最后一個課程，面向對象必須掌握兩個東西一個是對象的創(chuàng)建一個是繼承。這節(jié)課我們重點說說這兩個問題最后我們說下在ES6里面面向對象怎么玩。 1對象的創(chuàng)建我們第一節(jié)課已經就會用了，單體模...

jzzlee 2019-08-20 16:09 評論0 收藏0
拋棄jQuery，擁抱原生JavaScript

摘要：數(shù)據(jù)來源百度統(tǒng)計下面是國際上占有率，已經跌出前，比較多，還好支持他們并不難。前端發(fā)展很快，現(xiàn)代瀏覽器原生 API 已經足夠好用。我們并不需要為了操作 DOM、Event 等再學習一下 jQuery 的 API。同時由于 React、Angular、Vue 等框架的流行，直接操作 DOM 不再是好的模式，jQuery 使用場景大大減少。因此我們項目組在雙十一后抽了一周時間，把所有代碼中...

testbird 2019-08-19 17:07 評論0 收藏0