15 个常见的 jQuery 特性与原生JavaScript函数

在今天的文章中，我将向您介绍 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 JavaScriptlet 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 JavaScriptdocument.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 JavaScriptdocument.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 JavaScriptdocument.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 JavaScriptlet 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 JavaScriptdocument.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 JavaScriptdocument.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 JavaScriptlet 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 jQueryif ($(".blog-post").hasClass("popular")) {  alert('This is a popular post');}
// Check if element has a class using vanilla JavaScriptif (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 JavaScriptdocument.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 JavaScriptdocument.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 JavaScriptdocument.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 JavaScriptlet 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 JavaScriptfetch("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 中最常用功能的学习。现在您可以继续并开始为您当前或即将进行的项目实施上述功能了。

如果您觉得我今天分享的内容有用的话，请点赞我，关注我，并将其分享给您身边最开发的朋友，也许能够帮助到他，祝编程愉快！