使用 javascript 替換 jQuery

zhangyucha0 發布于2019-08-23 12:12 / 2031人閱讀

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

使用 javascript 替換 jQuery

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

下面就探討如何用JavaScript（ES6）標準語法，取代jQuery的一些主要功能。

選取元素 選擇器查詢

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

document.querySelector 返回第一個匹配的 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	選擇元素內的所有元素
element>element	div>p	選擇所有父級是元素的元素
element+element	div+p	選擇所有緊接著元素之后的元素
[attribute=value]	a[target=_blank]	選擇所有使用target="_blank"的元素
[attribute^=value]	a[src^="http"]	選擇每一個src屬性的值以"http"開頭的元素
[attribute$=value]	a[src$=".jpg"]	選擇每一個src屬性的值以".jpg"結尾的元素
:first-child	ul li:first-child	選擇元素下的首個元素
:nth-child(n)	ul li:nth-child(3)	選擇元素下的第三個元素
:last-child	ul li:last-child	選擇元素下的最后一個元素

DOM 樹查詢

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

DOM 操作

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

內容和屬性

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

修改 DOM 樹

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

CSS 樣式 設置 Style

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

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

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

ele.style.property 通過 style 對象讀寫行內 CSS 樣式

jQuery：

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

Native:

let size = getComputedStyle(ele)["font-size"]; // 獲取當前元素計算后的 CSS 屬性值
ele.style.setProperty("font-size", "2rem"); // 設置當前元素的某個內聯樣式
ele.style.removeProperty("font-size");  // 移除當前元素的某個內聯樣式

設置 Class

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

事件方法 綁定事件

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 必須使用外部函數，綁定匿名函數的事件是無法移除的。

模擬觸發

jQuery：

$ele.trigger("click");

Native:

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

模擬事件：

首先通過 document.createEvent 方法創建 Event 對象。

然后利用 Event 對象的 init 方法對其進行初始化。

最后使用 dispatchEvent 方法觸發 Event 對象。

詳見：JavaScript 事件——“模擬事件”的注意要點

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 而設計的. 雖然各種框架對 XHR 的封裝已經足夠好用, 但更好用的 API 是 fetch 。

/* 構造請求對象 */
let request = new Request(
    "http://apis.juhe.cn/ip/ip2addr",
    {
        method: "GET",
        body: {
            "key": "80701ec21437ca36ca466af27bb8e8d3",
            "ip": "220.181.57.216"
        },
        headers: new Headers()
    }
);
/* 處理響應對象 */
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)	判斷參數是否為一個數組
$.inArray(item, array)	array.includes(item)	判斷值是否在指定數組中
$.makeArray(objlist)	Array.from(objlist)	將類數組對象轉換為數組
$.merge(array1, array2)	array1.concat(array2)	合并兩個數組（有區別）
$.each(array, function (i, item) {}	array.forEach((item, i) => {})	遍歷指定的對象和數組

合并數組時，merge 會改變原數組的內容，而 concat 不會修改原數組，只會返回合并后的數組

Method

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

GPU云服務器云服務器 jquery javascript javascript jquery javascript-jquery javascript與jquery

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

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

拋棄jQuery，擁抱原生JavaScript

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

testbird 2019-08-19 17:07 評論0 收藏0
jQuery初體驗

摘要：就像一個大的功能庫，給我們返回一個有很多方法屬性的對象，然后我們調用它的方法屬性就行了。和一樣，使用鏈式代碼。一旦找到新的元素，之后的鏈就操作在新元素上，而不是一開始的元素。一般的變量無法使用方法，使用封裝，使其可以使用方法。 jQuery jQuery就像一個大的功能庫，給我們返回一個有很多方法、屬性的對象，然后我們調用它的方法、屬性就行了。和Javascript一樣，使用鏈式代碼...

Towers 2019-08-22 17:28 評論0 收藏0
原生js替換jQuery各種方法-中文版

摘要：本項目總結了大部分替代的方法，暫時只支持以上瀏覽器。返回指定元素及其后代的文本內容。從服務器讀取數據并替換匹配元素的內容。用它自己的方式處理，原生遵循標準實現了最小來處理。當全部被解決時返回，當任一被拒絕時拒絕。是創建的一種方式。原文https://github.com/nefe/You-D... You Dont Need jQuery showImg(https://segmen...

lylwyy2016 2019-08-23 12:14 評論0 收藏0
JavaScript專題之jQuery通用遍歷方法each的實現

摘要：語法為回調函數擁有兩個參數第一個為對象的成員或數組的索引，第二個為對應變量或內容。但是對于的函數，如果需要退出循環可使回調函數返回，其它返回值將被忽略。 JavaScript 專題系列第十一篇，講解 jQuery 通用遍歷方法 each 的實現 each介紹 jQuery 的 each 方法，作為一個通用遍歷方法，可用于遍歷對象和數組。語法為： jQuery.each(object,...

blankyao 2019-08-20 18:30 評論0 收藏0
jQuery DOM節點的復制、替換

摘要：拷貝克隆節點是的常見操作，提供一個方法，專門用于處理的克隆方法深度復制所有匹配的元素集合，包括所有匹配元素匹配元素的下級元素文字節點。拷貝clone() 克隆節點是DOM的常見操作，jQuery提供一個clone方法，專門用于處理dom的克隆 .clone()方法深度復制所有匹配的元素集合，包括所有匹配元素、匹配元素的下級元素、文字節點。 clone方法比較簡單就是克隆節點，但是需...

jindong 2019-08-21 11:54 評論0 收藏0