天天看點
傳回

15 個常見的 jQuery 特性與原生JavaScript函數

15 個常見的 jQuery 特性與原生JavaScript函數

英文 | https://enlear.academy/15-popular-jquery-features-and-their-vanilla-javascript-equivalents-1bdb73cc81f3

翻譯 | 楊小愛

在今天的文章中，我将向您介紹 Web 開發人員使用的 jQuery 中流行的特性，以及如何使用原生 JavaScript 的原生函數來完成這些任務。

1、文檔準備就緒

Document ready 是一個事件，表明頁面的 DOM 已經完全準備好，是以，我們可以處理它而不必擔心 DOM 的某些部分是否尚未加載。此事件在任何圖像或視訊渲染到網站之前，但在整個 DOM 準備好之後觸發。

請參閱以下代碼片段以了解如何在 jQuery 和 vanilla JavaScript 中使用文檔就緒。

// Check if the document is ready using jQuery
$(document).ready(function() { 
  // DOM is fully loaded. Write other codes.
  alert('Hello from jQuery');
});


// Check if the document is ready using vanilla JavaScript
let documentReadyCallback = () => {
   // DOM is fully loaded. Write other codes.
  alert('Hello from JavaScript');
};


if (document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll)) {
  documentReadyCallback();
} else {
  document.addEventListener("DOMContentLoaded", documentReadyCallback);
}

2、選擇DOM元素

選擇一個或多個 DOM 元素是 jQuery 的基本功能之一。JavaScript 中 $() 的等價物是 document.querySelector() 或 document.querySelectorAll() 函數。

請參閱以下代碼片段以了解如何在 jQuery 和 vanilla JavaScript 中選擇 DOM 元素。

// Select multiple elements by "class" using jQuery.
$(".blog-post");


// Select the first instance of an element by "class" using vanilla JavaScript.
document.querySelector(".blog-post");


// Select multiple elements by "class" using vanilla JavaScript.
document.querySelectorAll(".blog-post");

3、循環周遊 DOM 元素并進行更改

在前面，我們了解了 querySelectorAll()。它傳回一個包含與查詢比對的元素的 NodeList。JavaScript 中 $().each() 的等同與 document.querySelectorAll().forEach() 函數。

請參閱以下代碼片段，了解如何循環周遊 DOM 元素并通過 jQuery 和 vanilla JavaScript 進行更改。

// Select multiple elements and hide them using jQuery
$(".blog-post").hide();


// Select multiple elements and hide them using vanilla JavaScript
document.querySelectorAll(".blog-post").forEach((post) => {
  post.style.display = "none";
});

4、在另一個元素中搜尋一個元素

在 jQuery 中，我們可以使用 find() 函數搜尋子元素。JavaScript 中的等價物是元素上的 querySelector() 或 querySelectorAll() 函數。

請參閱以下代碼片段，了解如何通過 jQuery 和 vanilla JavaScript 搜尋子元素。

// Searching a child element inside an element using jQuery.
let blogsSection = $(".blogs-section");
blogsSection.find(".blog-post");


// Searching a child element inside an element using vanilla JavaScript.
let blogsSection = document.querySelector(".blogs-section");
blogsSection.querySelector(".blog-post");

5、将樣式應用于元素

在 jQuery 中，我們可以使用 css() 函數将樣式應用于元素。與JavaScript 中標明元素的樣式屬性等同。

例如，請參考以下代碼片段，了解如何通過 jQuery 和 vanilla JavaScript 将樣式應用于元素。

// Apply styles to elements using jQuery
$(".blog-post").css("border", "2px solid #326ED3");


// Apply styles to elements using vanilla JavaScript
document.querySelector(".blog-post").style.border = "2px solid #326ED3";

6、隐藏和顯示元素

在 jQuery 中，我們可以使用 hide() 函數隐藏元素，并使用 show() 函數顯示元素。與JavaScript 中的style.display 屬性等同。

請參閱以下代碼片段，了解如何通過 jQuery 和 vanilla JavaScript 隐藏或顯示元素。

// Hide or show an element using jQuery
$(".blog-post").hide();
$(".blog-post").show();


// Hide or show an element using vanilla JavaScript
document.querySelector(".blog-post").style.display = "none";
document.querySelector(".blog-post").style.display = "block";

7、在 DOM 中建立元素

在 jQuery 中，我們可以使用 append() 函數建立元素。與JavaScript 中的createElement() 函數相同。

請參閱以下代碼片段，了解如何通過 jQuery 和 vanilla JavaScript 建立元素并将其附加到元素中。

// Create an element inside DOM using jQuery
$(".message").append("<p>This is a sample text message.</p>");


// Create and element inside DOM using vanilla JavaScript
let messageElement = document.querySelector(".message");
let messageChildElement = messageElement.createElement("p");
messageChildElement.textContent = "This is a sample text message.";

8、更新DOM

在 jQuery 中，我們可以使用 text() 和 html() 函數更新 DOM。與JavaScript 中的 textContent 和 innerHTML 屬性等同。

請參閱以下代碼片段以了解如何通過 jQuery 和 vanilla JavaScript 更新元素。

// Update an element text using jQuery
$(".login-button").text("Log In");


// Update an element text using vanilla JavaScript
document.querySelector(".login-button").textContent = "Log In";


// Update an element HTML using jQuery
$(".login-message").html("<div>Login successfull!</div>");


// Update an element HTML using vanilla JavaScript
document.querySelector(".login-message").innerHTML = "<div>Login successfull!</div>";

9、從元素中添加、删除和切換類

在 jQuery 中，我們可以使用 addClass()、removeClass() 和 toggleClass() 函數來管理元素的類名。類似與JavaScript 中的 classList.add、classList.remove 和 classList.toggle 屬性。

請參閱以下代碼片段，了解如何通過 jQuery 和 vanilla JavaScript 管理元素中的類名。

// Add, remove, and toggle class using jQuery
$(".blog-post").addClass("popular");
$(".blog-post").removeClass("popular");
$(".blog-post").toggleClass("popular");


// Add, remove, and toggle class using vanilla JavaScript
let blogPost = document.querySelector(".blog-post");
blogPost.classList.add("popular");
blogPost.classList.remove("popular");
blogPost.classList.toggle("popular");

10、檢查元素是否有類

在 jQuery 中，我們可以使用 hasClass() 函數檢查元素是否具有類。與JavaScript 中的 classList.contains() 函數相同。

請參考以下代碼片段，了解如何通過 jQuery 和 vanilla JavaScript 檢查元素是否具有類。

// Check if element has a class using jQuery
if ($(".blog-post").hasClass("popular")) {
  alert('This is a popular post');
}


// Check if element has a class using vanilla JavaScript
if (document.querySelector(".blog-post").classList.contains("popular")) {
  alert('This is a popular post');
}

11、偵聽事件

在 jQuery 中，您可以使用許多事件偵聽器來偵聽事件。其中一些是 click(function(event) {})、mouseenter(function(event) {})、keyup(function(event) {})。與JavaScript 中的 addEventListener(“click”, (event) ⇒ {}), addEventListener(“mouseenter”, (event) ⇒ {}), addEventListener(“keyup”, (event) ⇒ {}) 函數類似。

請參閱以下代碼片段，了解如何通過 jQuery 和 vanilla JavaScript 監聽事件。

// Listen to events using jQuery
$(".signout-button").click(function(event) {
  // Logout user
});
$(".delete-account-form").mouseenter(function(event) {
  // Higlight the delete account form
});
$(".password").keyup(function(event) {
  // Start checking the password strength
});


// Listen to events using vanilla JavaScript
document.querySelector(".signout-button").addEventListener("click", (event) => {
  // Logout user
});
document.querySelector(".delete-account-form").addEventListener("mouseenter", (event) => {
  // Higlight the delete account form
});
document.querySelector(".password").addEventListener("keyup", (event) => {
  // Start checking the password strength
});

12、監聽動态添加元素的事件

在 jQuery 中，我們可以使用 on() 函數監聽動态添加的元素的事件。與JavaScript 中的 addEventListener() 函數相同。

請參閱以下代碼片段，了解如何通過 jQuery 和 vanilla JavaScript 監聽動态添加的元素的事件。

// Listen to events for dynamically added elements using jQuery
$(document).on("click",'#signout-button', function(event) {
  // Logout user.
});


// Listen to events for dynamically added elements using vanilla JavaScript
document.addEventListener("click", (event) => {
  if(event.target && event.target.id == "signout-button"){
    // Logout user.
  }
});

13、建立和觸發事件

在 jQuery 中，我們可以使用 trigger() 函數建立和觸發事件。JavaScript 中的等價物是 dispatchEvent(new Event()) 函數。

請參閱以下代碼片段，了解如何通過 jQuery 和 vanilla JavaScript 建立和觸發事件。

// Creating and triggering events using jQuery
$(document).trigger("click");
$(".signout-button").trigger("click");


// Creating and triggering events using vanilla JavaScript
document.dispatchEvent(new Event("click"));
document.querySelector(".signout-button").dispatchEvent(new Event("click"));

14、查找下一個、上一個和父元素

在 jQuery 中，我們可以使用 next()、prev() 和 parent() 函數查找下一個、上一個和父元素。JavaScript 中的等價物是 nextElementSibling、previousElementSibling 和 parentElement 屬性。

請參考以下代碼片段，通過 jQuery 和 vanilla JavaScript 查找下一個、上一個和父元素。

// Find the next, previous, and parent element using jQuery
$(".blog-post").next();
$(".blog-post").prev();
$(".blog-post").parent();


// Find the next, previous, and parent element using vanilla JavaScript
let blogPost = document.querySelector(".blog-post");
blogPost.nextElementSibling;
blogPost.previousElementSibling;
blogPost.parentElement;

15、使用 Fetch 的網絡請求

在 jQuery 中，我們可以使用 ajax() 函數執行網絡請求。在 JavaScript 中等效的是 fetch() 函數。

請參閱以下代碼片段，了解如何通過 jQuery 和 vanilla JavaScript 執行網絡請求。

// Perform network requests using jQuery
$.ajax({
    url: "http://example.com/movies.json",
  type: "POST",
  data: {
    key: value
  },
  success: function (response) {
    // See the response
  },
  error: function (response) {
    // See the error response
  }
});


// Perform network requests using vanilla JavaScript
fetch("http://example.com/movies.json", {
    method: "POST",
    headers: {
    "Content-Type": "application/json"
    },
    body: JSON.stringify({key: value})
}).then(response => {
  // See the response
}).catch(error => {
  // See the error response
});

寫在最後

贊！恭喜您已經完成了對 JavaScript 中最常用功能的學習。現在您可以繼續并開始為您目前或即将進行的項目實施上述功能了。

如果您覺得我今天分享的内容有用的話，請點贊我，關注我，并将其分享給您身邊最開發的朋友，也許能夠幫助到他，祝程式設計愉快！

​

15 個常見的 jQuery 特性與原生JavaScript函數
javascript jquery 代碼片段
上一篇: 10個清晰實用更顯專業的JavaScript代碼片段
下一篇: C6000 EDMA簡要筆記

繼續閱讀