使用 javascript 替換 jQuery

zhangyucha0 發(fā)布于2019-08-23 12:12 / 2054人閱讀

摘要：使用替換曾風(fēng)靡一個(gè)時(shí)代，大大降低了前端開發(fā)的門檻，豐富的插件也是前端開發(fā)者得心應(yīng)手的武器庫，但是，這個(gè)時(shí)代終于要落幕了。選取元素選擇器查詢常用的屬性選擇器都可以使用或替代。返回第一個(gè)匹配的返回所有匹配的組成的。最后使用方法觸發(fā)對(duì)象。

使用 javascript 替換 jQuery

jQuery 曾風(fēng)靡一個(gè)時(shí)代，大大降低了前端開發(fā)的門檻，豐富的插件也是前端開發(fā)者得心應(yīng)手的武器庫，但是，這個(gè)時(shí)代終于要落幕了。隨著 JS 標(biāo)準(zhǔn)和瀏覽器的進(jìn)步，jQuery 的很多精華被原生 JS 吸收，我們直接使用原生 API 就可以用類似手法來處理以前需要 jQuery 的問題。在新的 Web 項(xiàng)目中，如果不需要支持過于陳舊的瀏覽器版本，那么的確沒有必要使用 jQuery。

下面就探討如何用JavaScript（ES6）標(biāo)準(zhǔn)語法，取代jQuery的一些主要功能。

選取元素 選擇器查詢

常用的 class、id、屬性選擇器都可以使用 document.querySelector 或 document.querySelectorAll 替代。

document.querySelector 返回第一個(gè)匹配的 Element

document.querySelectorAll 返回所有匹配的 Element 組成的 NodeList。

jQuery：

var $ele = $("selector");

Native:

let ele = document.querySelectorAll("selector");

選擇器模式

選擇器	示例	示例說明
.class	.intro	選擇所有class="intro"的元素
#id	#firstname	選擇所有id="firstname"的元素
*	*	選擇所有元素
element	p	選擇所有元素
element,element	div,p	選擇所有元素和元素
element element	div p	選擇元素內(nèi)的所有元素
element>element	div>p	選擇所有父級(jí)是元素的元素
element+element	div+p	選擇所有緊接著元素之后的元素
[attribute=value]	a[target=_blank]	選擇所有使用target="_blank"的元素
[attribute^=value]	a[src^="http"]	選擇每一個(gè)src屬性的值以"http"開頭的元素
[attribute$=value]	a[src$=".jpg"]	選擇每一個(gè)src屬性的值以".jpg"結(jié)尾的元素
:first-child	ul li:first-child	選擇元素下的首個(gè) 元素
:nth-child(n)	ul li:nth-child(3)	選擇元素下的第三個(gè) 元素
:last-child	ul li:last-child	選擇元素下的最后一個(gè) 元素

DOM 樹查詢

jQuery	Native	方法說明
$ele.parent()	ele.parentNode	元素的直接父元素
$ele.children()	ele.childNodes	元素的所有直接子元素
$ele.find("a")	ele.querySelectorAll("a")	元素的后代元素
$ele.prev()	ele.previousElementSibling	元素的上一個(gè)同胞元素
$ele.next()	ele.nextElementSibling	元素的下一個(gè)同胞元素

DOM 操作

DOM本身就具有很豐富的操作方法，可以取代jQuery提供的操作方法。

內(nèi)容和屬性

jQuery	Native	方法說明
var text = $ele.text()	let text = ele.innerText	獲取所選元素的文本內(nèi)容
$ele.text("text")	ele.innerText = "text"	設(shè)置所選元素的文本內(nèi)容
var html = $ele.html()	let html = ele.innerHTML	獲取所選元素的HTML內(nèi)容
$ele.html(" html ")	ele.innerHTML = " html "	設(shè)置所選元素的HTML內(nèi)容
var input = $ele.val()	let input = ele.value	獲取表單字段的值
$ele.val("input")	ele.value = "input"	設(shè)置表單字段的值
var href = $ele.attr("href")	let href = ele.getAttribute("href")	獲取元素的屬性值
$ele.attr("href", "/")	ele.setAttribute("href", "/")	設(shè)置元素的屬性值

修改 DOM 樹

jQuery	Native	方法說明
$parent.append($ele)	parent.appendChild(ele)	在被選元素的結(jié)尾插入內(nèi)容
$parent.prepend($ele)	parent.insertBefore(ele, parent.firstChild)	在被選元素的開頭插入內(nèi)容
$ele.after(html)	ele.insertAdjacentHTML("afterend", html)	在被選元素之后插入內(nèi)容
$ele.before(html)	ele.insertAdjacentHTML("beforebegin", html)	在被選元素之前插入內(nèi)容
$ele.remove()	ele.parentNode.removeChild(ele)	刪除被選元素及其子元素
$ele.empty()	ele.innerHTML = null	從被選元素中刪除子元素
$ele.clone()	ele.cloneNode(true)	拷貝被選元素
$ele.replaceWith(html)	ele.outerHTML = html	指定HTML替換被選元素

CSS 樣式 設(shè)置 Style

HTML DOM 允許 JavaScript 改變 HTML 元素的樣式，Native API 提供了如下幾種方式：

ele.setAttribute 直接修改 DOM style 屬性改變樣式

ele.style.cssText 通過 cssText 修改 Style 屬性

ele.style.property 通過 style 對(duì)象讀寫行內(nèi) CSS 樣式

jQuery：

var size = $ele.css("font-size"); // 返回第一個(gè)匹配元素的 CSS 屬性值
$ele.css("font-size", "2rem"); // 為所有元素設(shè)置指定的 CSS 屬性值

Native:

let size = getComputedStyle(ele)["font-size"]; // 獲取當(dāng)前元素計(jì)算后的 CSS 屬性值
ele.style.setProperty("font-size", "2rem"); // 設(shè)置當(dāng)前元素的某個(gè)內(nèi)聯(lián)樣式
ele.style.removeProperty("font-size");  // 移除當(dāng)前元素的某個(gè)內(nèi)聯(lián)樣式

設(shè)置 Class

jQuery	Native	方法說明
$ele.hasClass(className)	ele.classList.contains(className)	檢查元素是否包含指定的類名
$ele.addClass(className)	ele.classList.add(className)	向元素增加一個(gè)或多個(gè)類名
$ele.removeClass(className)	ele.classList.remove(className)	從元素中移除一個(gè)或多個(gè)類
$ele.toggleClass(className)	ele.classList.toggle(className)	對(duì)元素的一個(gè)或多個(gè)類進(jìn)行切換

事件方法 綁定事件

jQuery：

$ele.on("click", function (evt) {
    console.log(evt.target);
});

Native:

ele.addEventListener("click", evt => {
    console.log(evt.target);
});

解除綁定

jQuery：

$ele.off("click");

Native:

ele.removeEventListener("click", func);

如果要移除事件，addEventListener 必須使用外部函數(shù)，綁定匿名函數(shù)的事件是無法移除的。

模擬觸發(fā)

jQuery：

$ele.trigger("click");

Native:

let event = document.createEvent("MouseEvents");
event.initMouseEvent("click");
ele.dispatchEvent(event);

模擬事件：

首先通過 document.createEvent 方法創(chuàng)建 Event 對(duì)象。

然后利用 Event 對(duì)象的 init 方法對(duì)其進(jìn)行初始化。

最后使用 dispatchEvent 方法觸發(fā) Event 對(duì)象。

詳見：JavaScript 事件——“模擬事件”的注意要點(diǎn)

Ajax jQuery

$.ajax({
    url: "http://apis.juhe.cn/ip/ip2addr",
    type: "GET",
    data: {
        "key": "80701ec21437ca36ca466af27bb8e8d3",
        "ip": "220.181.57.216"
    },
    dataType: "json",
    success: function (data) {
        console.log(data);
    }
});

XHR 封裝

window.ajax = async function (params, callback) {
    let url = params.url;
    let method = params.method;
    let data = params.data;
    let body = new FormData();
    for (let key in data) {
        if (data.hasOwnProperty(key)) {
            body.append(key, data[key]);
        }
    }
    let xhr = new XMLHttpRequest();
    xhr.timeout = 3000;
    xhr.open(method, url, true);
    xhr.addEventListener("readystatechange", evt => {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                callback(xhr.response);
            } else {
                throw xhr.statusText;
            }
        }
    });
    xhr.send(body);
};

ajax({
        url: "http://apis.juhe.cn/ip/ip2addr",
        method: "GET",
        data: {
            "key": "80701ec21437ca36ca466af27bb8e8d3",
            "ip": "220.181.57.216"
        }
    },function (resp) {
        var json = JSON.parse(resp);
        console.log(json);
    }
)

Fetch API

XMLHttpRequest 并不是專為 Ajax 而設(shè)計(jì)的. 雖然各種框架對(duì) XHR 的封裝已經(jīng)足夠好用, 但更好用的 API 是 fetch 。

/* 構(gòu)造請(qǐng)求對(duì)象 */
let request = new Request(
    "http://apis.juhe.cn/ip/ip2addr",
    {
        method: "GET",
        body: {
            "key": "80701ec21437ca36ca466af27bb8e8d3",
            "ip": "220.181.57.216"
        },
        headers: new Headers()
    }
);
/* 處理響應(yīng)對(duì)象 */
fetch(request)
    .then(response => response.json())
    .then(function (data) {
        console.log(data);
    })
    .catch(function (error) {
        console.log(error);
    });

詳見：fetch用法說明

工具 Array

jQuery	Native	方法說明
$.isArray(array)	Array.isArray(array)	判斷參數(shù)是否為一個(gè)數(shù)組
$.inArray(item, array)	array.includes(item)	判斷值是否在指定數(shù)組中
$.makeArray(objlist)	Array.from(objlist)	將類數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組
$.merge(array1, array2)	array1.concat(array2)	合并兩個(gè)數(shù)組（有區(qū)別）
$.each(array, function (i, item) {}	array.forEach((item, i) => {})	遍歷指定的對(duì)象和數(shù)組

合并數(shù)組時(shí)，merge 會(huì)改變?cè)瓟?shù)組的內(nèi)容，而 concat 不會(huì)修改原數(shù)組，只會(huì)返回合并后的數(shù)組

Method

jQuery	Native	方法說明
$.now()	Date.now()	返回當(dāng)前時(shí)間戳
$.trim(context)	context.trim()	移除字符串頭尾空白
$.type(parameter)	typeof parameter	檢測(cè)參數(shù)的內(nèi)部類型
$.parseJSON(jsonstr)	JSON.parse(jsonstr)	將JSON轉(zhuǎn)換為JS對(duì)象
$ele.data("key", "value")	ele.dataset.key = "value"	在指定的元素上存儲(chǔ)數(shù)據(jù)
$.map(array, function (item, i) {})	array.map((item, i) => {})	將數(shù)組轉(zhuǎn)化為處理后的新數(shù)組

GPU云服務(wù)器云服務(wù)器 jquery javascript javascript jquery javascript-jquery javascript與jquery

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98094.html

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

登陸后可評(píng)論

0條評(píng)論

zhangyucha0

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

??導(dǎo)圖整理大廠面試高頻數(shù)組8: 移除元素的雙指針優(yōu)化, 力扣27??

閱讀 2233·2021-09-02 15:11
svg系列：2. svg path實(shí)現(xiàn)圖片路徑動(dòng)畫

閱讀 1565·2019-08-30 15:43
css常用小技巧

閱讀 2100·2019-08-29 13:48
PWA之 workbox 學(xué)習(xí)

閱讀 2820·2019-08-26 13:55
React-事件機(jī)制雜記

閱讀 2126·2019-08-23 15:09
【劍指offer】4.二叉樹的遍歷和重建

閱讀 2924·2019-08-23 14:40
「前端早讀君005」開源與安全：Ant Design圣誕“彩蛋”事件始末

閱讀 3458·2019-08-23 14:23
JS 總結(jié)之事件循環(huán)

閱讀 2666·2019-08-23 14:20

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

使用 javascript 替換 jQuery

相關(guān)文章

拋棄jQuery，擁抱原生JavaScript

jQuery初體驗(yàn)

**原生js替換jQuery各種方法-中文版**

JavaScript專題之jQuery通用遍歷方法each的實(shí)現(xiàn)

jQuery DOM節(jié)點(diǎn)的復(fù)制、替換

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

0條評(píng)論

zhangyucha0

男|高級(jí)講師

TA的文章

??導(dǎo)圖整理大廠面試高頻數(shù)組8: 移除元素的雙指針優(yōu)化, 力扣27??

svg系列：2. svg path實(shí)現(xiàn)圖片路徑動(dòng)畫

css常用小技巧

PWA之 workbox 學(xué)習(xí)

React-事件機(jī)制雜記

【劍指offer】4.二叉樹的遍歷和重建

「前端早讀君005」開源與安全：Ant Design圣誕“彩蛋”事件始末

JS 總結(jié)之事件循環(huán)

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

使用 javascript 替換 jQuery

相關(guān)文章

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

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！