用原生 JavaScript 實現十大 jQuery 函數

時間 2019-11-05

標籤原生 javascript 實現十大 jquery 函數欄目 JavaScript 简体版

原文原文鏈接

做者：Omar Duarte
翻譯：瘋狂的技術宅javascript

原文：https://devkisslist.com/2019/...html

未經容許嚴禁轉載前端

在本文中我將把本身最經常使用的 jQuery 函數轉換爲原生 JavaScript。java

有時我須要建立一個簡單的靜態 HTML 或登陸頁面，並且不想引入任何庫或其它依賴。對這種狀況，我只使用普通的 JavaScript 來完成工做，老實說，知道它們是怎樣工做的感受真的很好。jquery

如今我把它們分享給你。請訪問GitHub頁面，隨時爲你提供幫助： https://github.com/omarld/jqu...git

在你開始以前，首先要知道標題是要轉換爲原生 JavaScript 的 jQuery 函數。接下來將簡要介紹它作什麼，而後是轉換後的 JavaScript 代碼和一些附加說明。程序員

1) $(document).ready(..)

檢查文檔是否已加載並準備好執行腳本。github

let isLoaded = false;
let myOnLoadCallBack = function(){
    isLoaded = true;
    //my stuff here
}
document.addEventListener("DOMContentLoaded", myOnLoadCallBack());

document.addEventListener('readystatechange', (event) => {
    if (document.readyState === 'complete' && !isLoaded) {
        myOnLoadCallBack();
    }
);

使用了 DOMContentLoaded 事件偵聽器，這是在構建 DOM 樹但還沒有加載任何其餘資源（即樣式表、圖像等）時觸發的。若是在 HTML 文檔中找到任何 script 標記，DOMContentLoaded 也會等待加載這些腳本。面試

若是樣式後面有腳本標記，在加載樣式時就會出現問題。出現這種狀況時，若是腳本須要修改樣式，則在腳本以前加載樣式。segmentfault

IE 8 及更低版本不支持 DOMContentLoaded。若是你不得不支持 IE 8，應該用 document.readyState。

如下是不一樣的狀態：

loading : 正在加載文檔
interactive : 文檔已徹底讀取
complete : 文檔已徹底讀取，全部資源（樣式、圖像）也被加載

2) $(…).HTML()

查找現有 DOM 元素的值，或插入一些內容。

要查找現有值，只需引用 innerHTML 屬性便可。

var content = document.querySelector("section#html div.content p.retrieve").innerHTML;

要插入一些內容，請將 innerHTML 分配給可包含 HTML 標記的新內容。請注意：這將替換全部的現有內容。

document.querySelector("section#html div.results p.sample").innerHTML = 「<p>Starting a new paragraph</p>」;

3) $(…).Append

在現有元素的末尾插入一些 HTML。

首先，須要找到並獲取咱們想要插入新內容的元素。

var appendEl = document.querySelector("section#append div.content div.results");

接下來建立要插入的元素。

var childEl = document.createElement("div");
childEl.innerHTML = "<p>New <strong>child</strong> Content!</p>"

最後，插入元素。

//appending
appendEl.appendChild(childEl);

固然，這須要三個步驟才能完成，但能夠簡化一下。

首先建立新元素。

var childEl = document.createElement("div");
childEl.innerHTML = "<p>New <strong>child</strong> Content!</p>"

接下來在一行中找到並插入新元素。

document.querySelector("section#append div.content div.results").appendChild(childEl);

若是想進一步簡化，或者發現本身作了不少工做，你能夠建立一個包裝函數來作到這一點。

4) $(…).prepend()

與上面的 append 很是類似，惟一的區別是這個插入到元素的開頭。因此咱們直接跳轉到簡化的解決方案。

建立要插入的新元素。

var newDiv = document.createElement("div");
var textNode = document.createTextNode("new content to inserted!");
newDiv.appendChild(textNode);

查找現有元素並插入新元素。

document.querySelector("section#prepend div.content p#existing").insertBefore(newDiv, prependEl.firstChild);

5) $(…).empty()

清空或清除 DOM 元素。你可能會認爲只須要將 innerHTML 屬性賦給一個空字符串就好了。但這隻作了一半，想想若是目標元素還有子 DOM 元素會發生什麼？咱們會作到這一點，它也很簡單。

首先從清除現有元素的內容開始。

document.getElementById("empty-content").innerHtml = 「」;

好的，如今怎樣處理全部內部 DOM 元素？先清除現有內容，而後在循環中刪除全部子 DOM 元素。

var contentEl = document.getElementById("empty-content");
contentEl.innerHtml = "";
while(contentEl.firstChild){
    contentEl.removeChild(contentEl.firstChild);
}

用 while 循環進行迭代，直到沒有子項要刪除爲止。

6) $(…).Attr(name)

獲取現有 DOM 元素的屬性（attribute）值，或設置屬性。要記住重要一點是：並不是全部 DOM 元素都有相同的屬性。例如複選框與按鈕（按鈕不具備 checked 屬性）。

從獲取複選框的 checked 屬性開始。

let isChecked = document.querySelector("div#attributes input#my-check-box").getAttribute("checked");

如今讓咱們看看怎樣設置相同的屬性（attribute）。

var el = document.querySelector("div#attributes input#my-check-box");

能夠經過訪問 JavaScript 屬性（property）來更改其狀態。

el.checked = true;

你可能已經注意到我將 checked 鍵稱爲 JavaScript 屬性（property）。元素屬性（attribute）和 JavaScript 屬性（property）有什麼區別嗎？簡單來講，屬性（property）是 JavaScript 來自元素屬性（attributes）的繼承鍵。這意味着你能夠將 DOM 元素屬性（attribute）做爲 JavaScript 對象屬性（property）進行訪問。

如下是有關 propertie 與 attribute 的幾個要點。

property 是來自 attribute 的 JavaScript 繼承值（即 .class vs className）
元素屬性（property）僅在其爲標準屬性（property）時才從屬性（attribute）建立。因此若是你引入了自定義屬性（attribute），它將不會成爲對象屬性（property）的一部分。
根據元素，可用屬性（attribute）會有所不一樣（即複選框與按鈕）

7) $(…).val()

獲取匹配的 DOM 元素的值。這也比較簡單，讓咱們從獲取現有元素的值開始。

爲了使這些命令清晰，我將它們分開了。雖然它們能夠在一行中完成。

var contentEl = document.querySelector("#my-input-el");
var lnameValue = contentEl.querySelector("input[name='lname']").value;

設定值一樣簡單，也能夠在一行中完成。

contentEl.querySelector("input[name='fname']").value = "Some random value";

與使用 innerHTML 設置內容相似，這也會覆蓋元素當前的全部值。

8, 9) $(…).on() | $(…).off()

要從元素添加或刪除事件，請相應地使用 on() 或 off()。

添加事件處理：

document.getElementById("my-button").addEventListener("click", function(evt){
    //my custom code here
});

刪除事件處理，這裏須要對瀏覽器所支持的屬性進行額外檢查。

var toggleFunction = function(){...}
if (toggleBtn.removeEventListener) { // For all major browsers, except IE 8 and earlier
    toggleBtn.removeEventListener("click", toggleFunction);
} else if (toggleBtn.detachEvent) { // For IE 8 and earlier versions
    toggleBtn.detachEvent("click", toggleFunction)
}

添加或刪除事件處理時須要注意如下幾點。

在實例化代碼時元素必須存或者沒有被附加事件。
刪除事件偵聽器時，函數引用必須相同。
內聯匿名函數不起做用，由於引用不一樣。
與 jQuery 不一樣，刪除事件處理時，你必須指定要被刪除的事件。

有一種在不明確的狀況下刪除全部事件處理的方法，就是克隆元素並替換它。這也將會消除子元素全部的附加事件。

最後刪除全部元素。

var currEl = document.getElementById("button");
var cloneEl= currEl.cloneNode(true);
currEl.parentNode.replaceChild(cloneEl, currEl);

10) $(…).toggle()

切換元素上的顯示，能夠經過幾種方式完成。每種方法都有不一樣的結果。你須要決定所需的行爲。

第一種方法是將元素的 display 屬性更改成 none 以從 DOM 中刪除元素，並將其設置爲 initial 以將其設置回來。這裏重點是：若是你切換顯示，將會影響你的佈局和切換元素。

在這裏，咱們經過直接訪問元素的 style 屬性來切換圖像元素上的顯示。

if(imgEl.style.display && imgEl.style.display === "none"){
    imgEl.style.display = "initial";
} else {
    imgEl.style.display = "none";
}

第二種方法是更改元素可見性，這將隱藏元素並保留佈局。

if(imgEl.style.visibility && imgEl.style.visibility === "hidden"){
    imgEl.style.visibility = "initial";
} else {
    imgEl.style.visibility = "hidden";
};