資訊專欄INFORMATION COLUMN
摘要：以下是和實(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 = document.querySelectAll(".ele");
//函數(shù)法
var $ = function(ele){
return document.querySelectAll(ele);
}
var ele = $(".ele"); //調(diào)用
創(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);
})
設(shè)置/獲取屬性
//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");
附加內(nèi)容（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;
上一個(gè)/下一個(gè)元素
//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});
這些只是很少的一部分，不能等到哪一天變成只會(huì)用jQuery了， O(∩_∩)O~
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/78292.html
摘要：原文地址已經(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 = $...
摘要：就在這里隨時(shí)等候你的召喚，但是也許你還沒有準(zhǔn)備好如何使用他。但是我想討論的是如果僅為使用個(gè)選擇器或者類似的東西，是否真的有必要加載。假設(shè)咱不是為了簡(jiǎn)化，每個(gè)人用是因?yàn)樗С?，?dòng)畫處理和選擇器函數(shù)。 JavaScript就在這里隨時(shí)等候你的召喚，但是也許你還沒有準(zhǔn)備好如何使用他。為什么不用jQuery呢？因?yàn)樗苈⑶夷愕木W(wǎng)站真的不需要這些多余的負(fù)擔(dān)。 我不是來這里爭(zhēng)辯原生API和函數(shù)...
摘要：概述到這里我們講說面向?qū)ο蟮南盗胁糠值淖詈笠粋€(gè)課程，面向?qū)ο蟊仨氄莆諆蓚€(gè)東西一個(gè)是對(duì)象的創(chuàng)建一個(gè)是繼承。只需要記住一句話，屬性放在構(gòu)造函數(shù)里面，方法放在原型上。 概述 到這里我們講說js面向?qū)ο蟮南盗胁糠值淖詈笠粋€(gè)課程，面向?qū)ο蟊仨氄莆諆蓚€(gè)東西一個(gè)是對(duì)象的創(chuàng)建一個(gè)是繼承。這節(jié)課我們重點(diǎn)說說這兩個(gè)問題最后我們說下在ES6里面面向?qū)ο笤趺赐妗?1對(duì)象的創(chuàng)建 我們第一節(jié)課已經(jīng)就會(huì)用了，單體模...
摘要：數(shù)據(jù)來源百度統(tǒng)計(jì)下面是國(guó)際上占有率，已經(jīng)跌出前，比較多，還好支持他們并不難。 前端發(fā)展很快，現(xiàn)代瀏覽器原生 API 已經(jīng)足夠好用。我們并不需要為了操作 DOM、Event 等再學(xué)習(xí)一下 jQuery 的 API。同時(shí)由于 React、Angular、Vue 等框架的流行，直接操作 DOM 不再是好的模式，jQuery 使用場(chǎng)景大大減少。因此我們項(xiàng)目組在雙十一后抽了一周時(shí)間，把所有代碼中...
閱讀 2769·2023-04-25 14:15
閱讀 2708·2021-11-04 16:11
閱讀 3401·2021-10-14 09:42
閱讀 451·2019-08-30 15:52
閱讀 2833·2019-08-30 14:03
閱讀 3551·2019-08-30 13:00
閱讀 2118·2019-08-26 11:40
閱讀 3314·2019-08-26 10:25
