使用 javascript 替換 jQuery

使用 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	選擇全部<p>元素
element,element	div,p	選擇全部<div>元素和<p>元素
element element	div p	選擇<div>元素內的全部<p>元素
element>element	div>p	選擇全部父級是<div>元素的 <p>元素
element+element	div+p	選擇全部緊接着<div>元素以後的<p>元素
[attribute=value]	a[target=_blank]	選擇全部使用target="_blank"的<a>元素
[attribute^=value]	a[src^="http"]	選擇每個src屬性的值以"http"開頭的<a>元素
[attribute$=value]	a[src$=".jpg"]	選擇每個src屬性的值以".jpg"結尾的<a>元素
:first-child	ul li:first-child	選擇<ul>元素下的首個<li>元素
:nth-child(n)	ul li:nth-child(3)	選擇<ul>元素下的第三個<li>元素
:last-child	ul li:last-child	選擇<ul>元素下的最後一個<li>元素

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("<div>html</div>")	ele.innerHTML = "<div>html</div>"	設置所選元素的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);

模擬事件：

1. 首先經過 document.createEvent 方法建立 Event 對象。
2. 而後利用 Event 對象的 init 方法對其進行初始化。
3. 最後使用 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) => {})	將數組轉化爲處理後的新數組