用原生 JavaScript 实现十大 jQuery 函数

jQuery 是一个非常流行的 JavaScript 库，它为我们提供了很多方便的方法来操作 DOM 元素。然而，在某些情况下，我们可能需要在不使用 jQuery 的情况下完成同样的任务。这可能是在编写一些简单的静态页面的时候，或者是在不想引入任何额外的依赖关系的时候。

在这篇文章中，我将分享十个最常用的 jQuery 函数，并演示如何用原生 JavaScript 来实现它们。了解这些函数的底层原理有助于深入理解前端开发技术，提升代码优化水平，并在需要的时候轻松实现相应的功能。

1. 选择元素

jQuery 的 $() 函数可以用来选择元素。原生 JavaScript 中，我们可以使用 document.querySelector() 或 document.querySelectorAll() 方法来选择元素。

// jQuery
$("p").css("color", "red");

// 原生 JavaScript
document.querySelector("p").style.color = "red";

2. 获取元素属性

jQuery 的 attr() 函数可以用来获取元素的属性。原生 JavaScript 中，我们可以使用 getAttribute() 方法来获取元素的属性。

// jQuery
var color = $("p").attr("color");

// 原生 JavaScript
var color = document.querySelector("p").getAttribute("color");

3. 设置元素属性

jQuery 的 attr() 函数也可以用来设置元素的属性。原生 JavaScript 中，我们可以使用 setAttribute() 方法来设置元素的属性。

// jQuery
$("p").attr("color", "red");

// 原生 JavaScript
document.querySelector("p").setAttribute("color", "red");

4. 添加元素类

jQuery 的 addClass() 函数可以用来给元素添加类。原生 JavaScript 中，我们可以使用 classList.add() 方法来给元素添加类。

// jQuery
$("p").addClass("red");

// 原生 JavaScript
document.querySelector("p").classList.add("red");

5. 删除元素类

jQuery 的 removeClass() 函数可以用来删除元素的类。原生 JavaScript 中，我们可以使用 classList.remove() 方法来删除元素的类。

// jQuery
$("p").removeClass("red");

// 原生 JavaScript
document.querySelector("p").classList.remove("red");

6. 切换元素类

jQuery 的 toggleClass() 函数可以用来切换元素的类。原生 JavaScript 中，我们可以使用 classList.toggle() 方法来切换元素的类。

// jQuery
$("p").toggleClass("red");

// 原生 JavaScript
document.querySelector("p").classList.toggle("red");

7. 获取元素内容

jQuery 的 text() 函数可以用来获取元素的内容。原生 JavaScript 中，我们可以使用 textContent 属性来获取元素的内容。

// jQuery
var text = $("p").text();

// 原生 JavaScript
var text = document.querySelector("p").textContent;

8. 设置元素内容

jQuery 的 text() 函数也可以用来设置元素的内容。原生 JavaScript 中，我们可以使用 textContent 属性来设置元素的内容。

// jQuery
$("p").text("Hello world!");

// 原生 JavaScript
document.querySelector("p").textContent = "Hello world!";

9. 添加元素到页面

jQuery 的 append() 函数可以用来向页面添加元素。原生 JavaScript 中，我们可以使用 appendChild() 方法来向页面添加元素。

// jQuery
$("body").append("<p>Hello world!</p>");

// 原生 JavaScript
var p = document.createElement("p");
p.textContent = "Hello world!";
document.body.appendChild(p);

10. 从页面中删除元素

jQuery 的 remove() 函数可以用来从页面中删除元素。原生 JavaScript 中，我们可以使用 removeChild() 方法来从页面中删除元素。

// jQuery
$("p").remove();

// 原生 JavaScript
var p = document.querySelector("p");
p.parentNode.removeChild(p);

以上就是十个最常用的 jQuery 函数的原生 JavaScript 实现方式。希望这篇文章能对你有所帮助。如果你还有任何问题，请随时留言。