資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何從 jQuery 遷移到原生 JavaScript？
JavaScript 是一種面向物件的程式語言，旨在使網站開發更具吸引力和簡便性。大多數情況下，JavaScript 用於構建網站的動態、響應式元素，從而改善使用者體驗。
JavaScript 是一種最廣泛使用的輕量級、編譯型和解釋型程式語言。它也被稱為網頁尾本語言。它可以應用於客戶端和伺服器端程式設計。
稱為 jQuery 的開源 JavaScript 庫簡化了 HTML/CSS 文件（或更準確地說，文件物件模型 (DOM)）與 JavaScript 之間的互動。透過定義關鍵字，它使導航和操作 HTML 文件、處理瀏覽器事件、DOM 動畫變得更加簡單。
jQuery 的跨瀏覽器移植性使編碼變得簡單，開發人員可以自由地進行其他瀏覽器所需的 JavaScript 特定調整，不受任何限制。
jQuery 具有許多優點，其中之一是它使開發人員可以輕鬆建立 Ajax 模板。讓我用一句話總結 Ajax 能為您做什麼：您可以使用它來快速執行某些即時事件以重新載入或重新整理頁面的一部分，而無需對整個事件執行此操作。
我們為什麼要選擇放棄 jQuery？
首先，我們集成了 jQuery 以方便開發人員。由於 JavaScript 生態系統在過去幾年中發展迅速，我們發現如今實際上可以在 JavaScript 中更方便地完成所有事情。
在我們的專案中，我們不再需要載入 87 千位元組的程式碼檔案。
原生 JS 允許編寫諸如選擇器、事件處理程式以及設定器和獲取器之類的基本語句。因此，我們可以直接呼叫這些核心方法，而不是讓我的庫在內部執行。
許多開發人員最初選擇使用 jQuery 的主要原因之一是，現在不太可能遇到跨瀏覽器相容性問題。因此，這種優勢不再有效。
由於 JavaScript 和 CSS3 在基於 Web 的應用程式內部執行在不同的執行緒上，因此 CSS3 動畫的執行效果比 jQuery 效果好得多。
選擇 - 在 JavaScript 中，我們可以使用 querySelector() 或 querySelectorAll 選擇任何元素，而在 jQuery 中，我們可以簡單地使用 $() 符號來選擇。
示例
// To select every instance of // the class "select" in jQuery $(".select"); // Just the first instance of the // class "select" will be chosen in JavaScript. document.querySelector(".select"); // To choose every instance of // the class, use "select" document.querySelectorAll(".select");
以下是幾個其他選擇器示例 -
以下是選擇所有 HTML 的選擇器
在 JavaScript 中 -
document.querySelector(selector)
在 jQuery 中 -
$("html")
以下是選擇所有 HTML body 的選擇器
在 JavaScript 中 -
document.body
在 jQuery 中 -
$("body")
類的操作
示例
// To give a jQuerytag a class, // use "class-name": $p.addClass(class-name) // in JavaScript: p.classList.add(class-name)
以下是一些其他操作示例
以下是向 HTML 元素新增類的選擇器。
在 JavaScript 中 -
element.classList.add(class-name)
在 jQuery 中 -
$element.addClass(class-name)
以下是刪除 HTML 元素類的選擇器。
在 JavaScript 中 -
element.classList.remove(class-name)
在 jQuery 中 -
$element.removeClass(class-name)
以下是切換 HTML 元素類的選擇器。
在 JavaScript 中 -
element.classList.toggle(class-name)
在 jQuery 中 -
$element.toggleClass(class-name)
以下是檢查 HTML 元素中是否存在類的選擇器
在 JavaScript 中 -
element.classList.has(class-name)
在 jQuery 中 -
$element.hasClass(class-name)
以下是 jQuery 和 JavaScript 事件監聽器
示例
// Click a button to add an event to it.
// jQuery:
/* the click event handling */
$(".button").click( function(event) {
});
// JavaScript:
/* the click event handling */
document.querySelector(".button")
.addEventListener("click", (event) => {
});
以下是 jQuery 和 JavaScript CSS 樣式
示例
// giving all div elements a 10 px padding
// jQuery:
$div.css({ padding: "15px" })
// JavaScript:
div.style.padding= "15px"
簡而言之
在這裡，我們看到了我們在編碼中經常使用的一些 jQuery 函式。從 jQuery 切換並不太困難，因為 jQuery 團隊足夠好，可以在其文件中列出其 jQuery 方法的 JavaScript 等效項。我們為每個語句使用的替代 JavaScript 程式碼也包含在我們編寫的文字中。
儘管 jQuery 語法似乎簡潔明瞭，但使用 JavaScript 時，最小化程式可確保不會向客戶端計算機傳遞任何額外的位元組。
129 次檢視
