怎么用原生 JavaScript 實現十大 jQuery 函數

本篇內容主要講解“怎么用原生 JavaScript 實現十大 jQuery 函數”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么用原生 JavaScript 實現十大 jQuery 函數”吧!

在本文中我將把自己最常用的 jQuery 函數轉換為原生 JavaScript。

有時我需要創建一個簡單的靜態 HTML 或登錄頁面，而且不想引入任何庫或其它依賴。對這種情況，我只使用普通的 JavaScript  來完成工作，知道它們的工作遠離感覺真的很爽。

在開始之前，首先要知道標題是要轉換為原生 JavaScript 的 jQuery 函數。接下來將簡要介紹它做什么，然后是轉換后的 JavaScript  代碼和一些附加說明。

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

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

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 也會等待加載這些腳本。

如果樣式后面有腳本標記，在加載樣式時就會出現問題。出現這種情況時，如果腳本需要修改樣式，則在腳本之前加載樣式。

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.  (…).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"; };

總結

如果你一直在使用庫和 JavaScript 框架，那么很容易忽略一些實現的簡單性。但最重要的是，你也忽略了對 DOM  的一些核心工作原理的基本理解。很好地理解 DOM 不僅可以幫你更好的設計應用，還可以解決調試上的問題。

這些只是我最常用的一些函數。現在我把它們分享給你，如果你想寫出自己的函數，而不是在自己的程序中添加使軟件體積增加的庫的話。

希望這些可以幫助你!

到此，相信大家對“怎么用原生 JavaScript 實現十大 jQuery 函數”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！