从 jQuery 迁移到 vanilla JavaScript 的备忘单

朱雀 2023-09-28 10:14 65阅读 0赞

jQuery 仍然是一个有用且实用的库，但您越来越有可能不依赖于在项目中使用它来完成基本任务，例如选择元素、设置样式、动画化和获取数据——这些都是 jQuery 擅长的。有了对 ES6 的广泛浏览器支持（在撰写本文时[超过 96%][96]），现在可能是摆脱 jQuery 的好时机。

我最近从这个博客中删除了 jQuery，发现自己一遍又一遍地在谷歌上搜索一些模式。为了节省您的时间，我用一些最常见的 jQuery 模式及其在 JavaScript 中的等价物编写了这个实用的参考指南。我们将介绍如何从这些概念和功能转移到原生 JavaScript：

[选择元素][Link 1][活动][Link 2][.css()][.css][文件准备好了][Link 3][课程][Link 4][.ajax()][.ajax][创建元素][Link 5][HTML 和文本][HTML]

### 选择元素 ###

选择一个或多个 DOM 元素来做某事是 jQuery 最基本的元素之一。JavaScript 中的 or 等价于or ，`$()`就像jQuery 一样，您可以使用 CSS 选择器调用它。`jQuery()`[querySelector()][querySelector][querySelectorAll()][querySelectorAll]

// jQuery, select all instances of .box
    $(".box");
    
    // Instead, select the first instance of .box
    document.querySelector(".box");
    
    // …or select all instances of .box  
    document.querySelectorAll(".box");

#### 对选择中的所有元素运行函数 ####

`querySelectorAll()`返回一个包含与查询匹配的所有元素的[NodeList 。][NodeList]虽然您可以简单地通过调用 jQuery 对象上的方法来在整个元素选择上运行带有 jQuery 的函数，但是，您必须使用原生[NodeList.forEach()][NodeList.forEach]JavaScript 遍历元素的 NodeList：

// with jQuery
    // Hide all instances of .box
    $(".box").hide();
    
    // Without jQuery
    // Iterate over the nodelist of elements to hide all instances of .box
    document.querySelectorAll(".box").forEach(box => { box.style.display = "none" })

#### 在另一个元素中找到一个元素 ####

一个常见的 jQuery 模式是使用`.find()`. `querySelector`您可以通过在元素上调用or来实现相同的效果，将选择范围限定为元素的子`querySelectorAll`元素：

// With jQuery
    // Select the first instance of .box within .container
    var container = $(".container");
    // Later...
    container.find(".box");
    
    // Without jQuery
    // Select the first instance of .box within .container
    var container = document.querySelector(".container");
    // Later...
    container.querySelector(".box");

#### `parent()`用,`next()`和遍历树`prev()` ####

如果您希望遍历 DOM 以选择相对于另一个元素的子元素或父元素，您可以通过`nextElementSibling`,`previousElementSibling`和`parentElement`在该元素上访问它们：

// with jQuery
    // Return the next, previous, and parent element of .box
    $(".box").next();
    $(".box").prev();
    $(".box").parent();
    
    // Without jQuery
    // Return the next, previous, and parent element of .box
    var box = document.querySelector(".box");
    box.nextElementSibling;
    box.previousElementSibling;
    box.parentElement;

### 处理事件 ###

有无数种方法可以在 jQuery 中监听事件，但无论您使用`.on()`、还是`.bind()`，您都可以使用 JavaScript 等价物：`.live``.click()``.addEventListener`

// With jQuery
    $(".button").click(function(e) { /* handle click event */ });
    $(".button").mouseenter(function(e) {  /* handle click event */ });
    $(document).keyup(function(e) {  /* handle key up event */  });
    
    // Without jQuery
    document.querySelector(".button").addEventListener("click", (e) => { /* ... */ });
    document.querySelector(".button").addEventListener("mouseenter", (e) => { /* ... */ });
    document.addEventListener("keyup", (e) => { /* ... */ });

#### 动态添加元素的事件监听 ####

jQuery 的`.on()`方法使您能够使用“实时”事件处理程序，您可以在其中侦听动态添加到 DOM 的对象上的事件。要在没有 jQuery 的情况下完成类似的操作，您可以在将元素添加到 DOM 时将事件处理程序附加到元素上：

// With jQuery
    // Handle click events .search-result elements, 
    // even when they're added to the DOM programmatically
    $(".search-container").on("click", ".search-result", handleClick);
    
    // Without jQuery
    // Create and add an element to the DOM
    var searchElement = document.createElement("div");
    document.querySelector(".search-container").appendChild(searchElement);
    // Add an event listener to the element
    searchElement.addEventListener("click", handleClick);

#### 触发和创建事件 ####

相当于手动触发事件`trigger()`可以通过调用来实现[dispatchEvent()][dispatchEvent]。该`dispatchEvent()`方法可以在任何元素上调用，并将 an`Event`作为第一个参数：

// With jQuery
    // Trigger myEvent on document and .box
    $(document).trigger("myEvent");
    $(".box").trigger("myEvent");
    
    // Without jQuery
    // Create and dispatch myEvent
    document.dispatchEvent(new Event("myEvent"));
    document.querySelector(".box").dispatchEvent(new Event("myEvent"));

### 造型元素 ###

如果您`.css()`使用 jQuery 调用元素来更改其内联 CSS，您将[.style][]在 JavaScript 中使用并为其不同的属性分配值以达到相同的效果：

// With jQuery
    // Select .box and change text color to #000
    $(".box").css("color", "#000");
    
    // Without jQuery
    // Select the first .box and change its text color to #000
    document.querySelector(".box").style.color = "#000";

使用 jQuery，您可以传递一个带有键值对的对象来同时设置多个属性的样式。在 JavaScript 中，您可以一次设置一个值，或者设置整个样式字符串：

// With jQuery
    // Pass multiple styles
    $(".box").css({
      "color": "#000",
      "background-color": "red"
    });
    
    // Without jQuery
    // Set color to #000 and background to red
    var box = document.querySelector(".box");
    box.style.color = "#000";
    box.style.backgroundColor = "red";
    
    // Set all styles at once (and override any existing styles)
    box.style.cssText = "color: #000; background-color: red";

#### `hide()`和`show()` ####

和便利方法等价于访问属性并`.hide()`设置为and ：`.show()``.style``display``none``block`

// With jQuery
    // Hide and show and element
    $(".box").hide();
    $(".box").show();
    
    // Without jQuery
    // Hide and show an element by changing "display" to block and none
    document.querySelector(".box").style.display = "none";
    document.querySelector(".box").style.display = "block";

### 文件准备好了 ###

如果您需要等待 DOM 完全加载，然后再将事件附加到 DOM 中的对象，您通常会使用jQuery 中`$(document).ready()`的常用简写`$()`。我们可以很容易地构造一个类似的函数来通过监听来替换它`DOMContentLoaded`：

// With jQuery
    $(document).ready(function() { 
      /* Do things after DOM has fully loaded */
    });
    
    // Without jQuery
    // Define a convenience method and use it
    var ready = (callback) => {
      if (document.readyState != "loading") callback();
      else document.addEventListener("DOMContentLoaded", callback);
    }
    
    ready(() => { 
      /* Do things after DOM has fully loaded */ 
    });

### 使用类 ###

您可以通过该属性轻松访问和使用类[classList][]来切换、替换、添加和删除类：

// With jQuery
    // Add, remove, and the toggle the "focus" class
    $(".box").addClass("focus");
    $(".box").removeClass("focus");
    $(".box").toggleClass("focus");
    
    // Without jQuery
    // Add, remove, and the toggle the "focus" class
    var box = document.querySelector(".box");
    box.classList.add("focus");
    box.classList.remove("focus");
    box.classList.toggle("focus");

如果要删除或添加多个类，只需将多个参数传递给`.add()`and `.remove()`：

// Add "focus" and "highlighted" classes, and then remove them
    var box = document.querySelector(".box");
    box.classList.add("focus", "highlighted");
    box.classList.remove("focus", "highlighted");

如果您要切换两个互斥的类，则可以访问该`classList`属性并调用`.replace()`以将一个类替换为另一个类：

// Remove the "focus" class and add "blurred"
    document.querySelector(".box").classList.replace("focus", "blurred");

#### 检查元素是否有类 ####

如果您只想根据元素是否具有某个类来运行函数，则可以将 jQuery 替换`.hasClass()`为`.classList.contains()`：

// With jQuery
    // Check if .box has a class of "focus", and do something
    if ($(".box").hasClass("focus")) {
      // Do something...
    }
    
    // Without jQuery
    // Check if .box has a class of "focus", and do something
    if (document.querySelector(".box").classList.contains("focus")) {
      // Do something...
    }

### 使用 .get() 或 .ajax() 的网络请求 ###

[fetch()][fetch]`ajax()`允许您以与 jQuery和`get()`方法类似的方式创建网络请求。`fetch()`将 URL 作为参数，并返回可用于处理响应的[Promise ：][Promise]

// With jQuery
    $.ajax({
        url: "data.json"
      }).done(function(data) {
        // ...
      }).fail(function() {
        // Handle error
      });
    
    // Without jQuery
    fetch("data.json")
      .then(data => {
        // Handle data
      }).catch(error => {
        // Handle error
      });

### 创建元素 ###

如果您想在 JavaScript 中动态创建一个元素以添加到 DOM，您可以调用[createElement()][createElement]并`document`传递一个标签名称来指示您要创建的元素：

// Create a div & span
    $("<div/>");
    $("<span/>");
    
    // Create a div and a span
    document.createElement("div");
    document.createElement("span");

如果您想向这些元素添加一些内容，您可以简单地设置`textContent`属性，或者创建一个文本节点[createTextNode][]并将其附加到元素：

var element = document.createElement("div");
    element.textContent = "Text"
    // or create a textNode and append it
    var text = document.createTextNode("Text");
    element.appendChild(text);

### 更新 DOM ###

如果您希望更改元素的文本或向 DOM 添加新元素，那么您很可能遇到过`innerHTML()`，但使用它可能会使您面临跨站点脚本 (XSS) 攻击。[尽管您可以解决它并清理 HTML][HTML 1]，但还有一些更安全的替代方案。

如果您只想读取或更新元素的文本，则可以使用[textContent][]对象的属性返回当前文本，或更新它：

// With jQuery
    // Update the text of a .button
    $(".button").text("New text");
    // Read the text of a .button
    $(".button").text(); // Returns "New text"
    
    // Without jQuery
    // Update the text of a .button
    document.querySelector(".button").textContent = "New text";
    // Read the text of a .button
    document.querySelector(".button").textContent; // Returns "New text"

如果您正在构建一个新元素，则可以使用 parent 上的方法将该元素添加到另一个元素`appendChild()`：

// Create div element and append it to .container
    $(".container").append($("<div/>"));
    
    // Create a div and append it to .container
    var element = document.createElement("div");
    document.querySelector(".container").appendChild(element);

综上所述，以下是创建 div、更新其文本和类并将其添加到 DOM 的方法：

// Create a div
    var element = document.createElement("div");
    
    // Update its class
    element.classList.add("box");
    
    // Set its text
    element.textContent = "Text inside box";
    
    // Append the element to .container
    document.querySelector(".container").appendChild(element);

### 总之 ###

这绝不是对此处使用的任何本机 JavaScript 方法的全面指南，但我希望它对您希望摆脱 jQuery 有所帮助。总而言之，以下是我们介绍的方法：

*  [querySelector][]用and选择元素[querySelectorAll][]
 *  监听事件[addEventListener][]
 *  [style][.style]通过属性更新 CSS 和样式
 *  通过[classList][]属性处理类
 *  AJAX 请求与[fetch][fetch 1]
 *  触发事件[dispatchEvent][]
 *  创建元素[createElement][]
 *  [textContent][]通过属性更新文本
 *  向 DOM 添加元素[appendChild][]

[96]: https://caniuse.com/#feat=es6
[Link 1]: https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/#selecting-elements
[Link 2]: https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/#working-with-events
[.css]: https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/#styling-elements
[Link 3]: https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/#document-ready
[Link 4]: https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/#working-with-classes
[.ajax]: https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/#network-requests-with-get-or-ajax
[Link 5]: https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/#creating-elements
[HTML]: https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/#updating-the-dom
[querySelector]: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
[querySelectorAll]: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
[NodeList]: https://developer.mozilla.org/en-US/docs/Web/API/NodeList
[NodeList.forEach]: https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach
[dispatchEvent]: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent
[.style]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
[classList]: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
[fetch]: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
[Promise]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
[createElement]: https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
[createTextNode]: https://developer.mozilla.org/en-US/docs/Web/API/Document/createTextNode
[HTML 1]: https://gomakethings.com/preventing-cross-site-scripting-attacks-when-using-innerhtml-in-vanilla-javascript/
[textContent]: https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
[addEventListener]: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
[fetch 1]: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
[appendChild]: https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild