jquery 以字串開頭_用原生 JavaScript 實現十大 jQuery 函式
技術標籤:jquery 以字串開頭
作者:Omar Duarte
翻譯:瘋狂的技術宅
原文: https:// devkisslist.com/2019/06 /29/top-10-jquery-functions-to-plain-old-javascript/ 未經允許嚴禁轉載
在本文中我將把自己最常用的 jQuery 函式轉換為原生 JavaScript。
有時我需要建立一個簡單的靜態 HTML 或登入頁面,而且不想引入任何庫或其它依賴。對這種情況,我只使用普通的 JavaScript 來完成工作,老實說,知道它們是怎樣工作的感覺真的很好。
現在我把它們分享給你。請訪問GitHub頁面,隨時為你提供幫助: https://github.com/omarld/jqueryToPlainJS
在你開始之前,首先要知道標題是要轉換為原生 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) $(…).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";
};
總結
如果你一直在使用庫和 JavaScript 框架,那麼很容易忽略一些實現的簡單性。但最重要的是,你也忽略了對 DOM 的一些核心工作原理的基本理解。很好地理解 DOM 不僅可以幫你更好的設計應用,還可以解決除錯上的問題。
這些只是我最常用的一些函式。現在我把它們分享給你,如果你想寫出自己的函式,而不是在自己的程式中新增使軟體體積增加的庫的話。
希望這些可以幫助你!
領取前端資料
歡迎關注前端公眾號:前端先鋒,領取前端工程化實用工具包。