日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
用原生JavaScript實(shí)現(xiàn)十大jQuery函數(shù)

在本文中我將把自己最常用的 jQuery 函數(shù)轉(zhuǎn)換為原生 JavaScript。

創(chuàng)新互聯(lián)主營佳縣網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶APP開發(fā),佳縣h5微信小程序定制開發(fā)搭建,佳縣網(wǎng)站營銷推廣歡迎佳縣等地區(qū)企業(yè)咨詢

有時(shí)我需要?jiǎng)?chuàng)建一個(gè)簡單的靜態(tài) HTML 或登錄頁面，而且不想引入任何庫或其它依賴。對(duì)這種情況，我只使用普通的 JavaScript 來完成工作，知道它們的工作遠(yuǎn)離感覺真的很爽。

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

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

檢查文檔是否已加載并準(zhǔn)備好執(zhí)行腳本。

 
 
 
    
  
  
  
  1. let isLoaded = false; 
    2. 
  
  
  
  2. let myOnLoadCallBack = function(){ 
    3. 
  
  
  
  3.     isLoaded = true; 
    4. 
  
  
  
  4.     //my stuff here 
    5. 
  
  
  
  5. } 
    6. 
  
  
  
  6. document.addEventListener("DOMContentLoaded", myOnLoadCallBack()); 
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8. document.addEventListener('readystatechange', (event) => { 
    9. 
  
  
  
  9.     if (document.readyState === 'complete' && !isLoaded) { 
    10. 
  
  
  
  10.         myOnLoadCallBack(); 
    11. 
  
  
  
  11.     } 
    12. 
  
  
  
  12. ); 
    13.

使用了 DOMContentLoaded 事件偵聽器，這是在構(gòu)建 DOM 樹但尚未加載任何其他資源(即樣式表、圖像等)時(shí)觸發(fā)的。如果在 HTML 文檔中找到任何 script 標(biāo)記，DOMContentLoaded 也會(huì)等待加載這些腳本。

如果樣式后面有腳本標(biāo)記，在加載樣式時(shí)就會(huì)出現(xiàn)問題。出現(xiàn)這種情況時(shí)，如果腳本需要修改樣式，則在腳本之前加載樣式。

IE 8 及更低版本不支持 DOMContentLoaded。如果你不得不支持 IE 8，應(yīng)該用 document.readyState。

以下是不同的狀態(tài)：

  • loading : 正在加載文檔
  • interactive : 文檔已完全讀取
  • complete : 文檔已完全讀取，所有資源(樣式、圖像)也被加載

2. $(…).HTML()

查找現(xiàn)有 DOM 元素的值，或插入一些內(nèi)容。

要查找現(xiàn)有值，只需引用 innerHTML 屬性即可。

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

要插入一些內(nèi)容，請(qǐng)將 innerHTML 分配給可包含 HTML 標(biāo)記的新內(nèi)容。請(qǐng)注意：這將替換所有的現(xiàn)有內(nèi)容。

 
 
 
    
  
  
  
  1. document.querySelector("section#html div.results p.sample").innerHTML = “
    Starting a new paragraph
    ”; 
    2.

3.  $(…).Append

在現(xiàn)有元素的末尾插入一些 HTML。

首先，需要找到并獲取我們想要插入新內(nèi)容的元素。

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

接下來創(chuàng)建要插入的元素。

 
 
 
    
  
  
  
  1. var childEl = document.createElement("div"); 
    2. 
  
  
  
  2. childEl.innerHTML = "
    New child Content!
    " 
    3.

最后，插入元素。

 
 
 
    
  
  
  
  1. //appending 
    2. 
  
  
  
  2. appendEl.appendChild(childEl); 
    3.

當(dāng)然，這需要三個(gè)步驟才能完成，但可以簡化一下。

首先創(chuàng)建新元素。

 
 
 
    
  
  
  
  1. var childEl = document.createElement("div"); 
    2. 
  
  
  
  2. childEl.innerHTML = "
    New child Content!
    " 
    3.

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

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

如果想進(jìn)一步簡化，或者發(fā)現(xiàn)自己做了很多工作，你可以創(chuàng)建一個(gè)包裝函數(shù)來做到這一點(diǎn)。

4. $(…).prepend()

與上面的 append 非常相似，唯一的區(qū)別是這個(gè)插入到元素的開頭。所以我們直接跳轉(zhuǎn)到簡化的解決方案。

創(chuàng)建要插入的新元素。

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

查找現(xiàn)有元素并插入新元素。

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

5. $(…).empty()

清空或清除 DOM 元素。你可能會(huì)認(rèn)為只需要將 innerHTML 屬性賦給一個(gè)空字符串就行了。但這只做了一半，想一想如果目標(biāo)元素還有子 DOM 元素會(huì)發(fā)生什么?我們會(huì)做到這一點(diǎn)，它也很簡單。

首先從清除現(xiàn)有元素的內(nèi)容開始。

 
 
 
    
  
  
  
  1. document.getElementById("empty-content").innerHtml = “”; 
    2.

好的，現(xiàn)在怎樣處理所有內(nèi)部 DOM 元素?先清除現(xiàn)有內(nèi)容，然后在循環(huán)中刪除所有子 DOM 元素。

 
 
 
    
  
  
  
  1. var contentEl = document.getElementById("empty-content"); 
    2. 
  
  
  
  2. contentEl.innerHtml = ""; 
    3. 
  
  
  
  3. while(contentEl.firstChild){ 
    4. 
  
  
  
  4.     contentEl.removeChild(contentEl.firstChild); 
    5. 
  
  
  
  5. } 
    6.

用 while 循環(huán)進(jìn)行迭代，直到?jīng)]有子項(xiàng)要?jiǎng)h除為止。

6. $(…).Attr(name)

獲取現(xiàn)有 DOM 元素的屬性(attribute)值，或設(shè)置屬性。要記住重要一點(diǎn)是：并非所有 DOM 元素都有相同的屬性。例如復(fù)選框與按鈕(按鈕不具有 checked 屬性)。

從獲取復(fù)選框的 checked 屬性開始。

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

現(xiàn)在讓我們看看怎樣設(shè)置相同的屬性(attribute)。

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

可以通過訪問 JavaScript 屬性(property)來更改其狀態(tài)。

 
 
 
    
  
  
  
  1. el.checked = true; 
    2.

你可能已經(jīng)注意到我將 checked 鍵稱為 JavaScript 屬性(property)。元素屬性(attribute)和 JavaScript 屬性(property)有什么區(qū)別嗎?簡單來說，屬性(property)是 JavaScript 來自元素屬性(attributes)的繼承鍵。這意味著你可以將 DOM 元素屬性(attribute)作為 JavaScript 對(duì)象屬性(property)進(jìn)行訪問。

以下是有關(guān) propertie 與 attribute 的幾個(gè)要點(diǎn)。

  • property 是來自 attribute 的 JavaScript 繼承值(即 .class vs className)
  • 元素屬性(property)僅在其為標(biāo)準(zhǔn)屬性(property)時(shí)才從屬性(attribute)創(chuàng)建。所以如果你引入了自定義屬性(attribute)，它將不會(huì)成為對(duì)象屬性(property)的一部分。
  • 根據(jù)元素，可用屬性(attribute)會(huì)有所不同(即復(fù)選框與按鈕)

7. $(…).val()

獲取匹配的 DOM 元素的值。這也比較簡單，讓我們從獲取現(xiàn)有元素的值開始。

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

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

設(shè)定值同樣簡單，也可以在一行中完成。

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

與使用 innerHTML 設(shè)置內(nèi)容類似，這也會(huì)覆蓋元素當(dāng)前的所有值。

8, 9.  (…).off()

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

添加事件處理：

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

刪除事件處理，這里需要對(duì)瀏覽器所支持的屬性進(jìn)行額外檢查。

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

添加或刪除事件處理時(shí)需要注意以下幾點(diǎn)。

  • 在實(shí)例化代碼時(shí)元素必須存或者沒有被附加事件。
  • 刪除事件偵聽器時(shí)，函數(shù)引用必須相同。
  • 內(nèi)聯(lián)匿名函數(shù)不起作用，因?yàn)橐貌煌?/li>
  • 與 jQuery 不同，刪除事件處理時(shí)，你必須指定要被刪除的事件。

有一種在不明確的情況下刪除所有事件處理的方法，就是克隆元素并替換它。這也將會(huì)消除子元素所有的附加事件。

最后刪除所有元素。

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

10.  $(…).toggle()

切換元素上的顯示，可以通過幾種方式完成。每種方法都有不同的結(jié)果。你需要決定所需的行為。

第一種方法是將元素的 display 屬性更改為 none 以從 DOM 中刪除元素，并將其設(shè)置為 initial 以將其設(shè)置回來。這里重點(diǎn)是：如果你切換顯示，將會(huì)影響你的布局和切換元素。

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

 
 
 
    
  
  
  
  1. if(imgEl.style.display && imgEl.style.display === "none"){ 
    2. 
  
  
  
  2.     imgEl.style.display = "initial"; 
    3. 
  
  
  
  3. } else { 
    4. 
  
  
  
  4.     imgEl.style.display = "none"; 
    5. 
  
  
  
  5. } 
    6.

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

 
 
 
    
  
  
  
  1. if(imgEl.style.visibility && imgEl.style.visibility === "hidden"){ 
    2. 
  
  
  
  2.     imgEl.style.visibility = "initial"; 
    3. 
  
  
  
  3. } else { 
    4. 
  
  
  
  4.     imgEl.style.visibility = "hidden"; 
    5. 
  
  
  
  5. }; 
    6.

總結(jié)

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

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

希望這些可以幫助你!


網(wǎng)頁題目：用原生JavaScript實(shí)現(xiàn)十大jQuery函數(shù)
鏈接URL：http://www.dlmjj.cn/article/djsigsp.html