原生js封装的一些jquery方法(详解)

我来详细讲解一下 “原生js封装的一些jquery方法(详解)” 的完整攻略。

什么是jQuery？

jQuery 是一种快速、简洁的 JavaScript 库，简化了HTML文档遍历和操作、事件处理、动画效果和 Ajax等许多操作。

为什么需要封装jQuery方法？

虽然 jQuery 可以帮助我们快速开发网页，但有些时候，我们不想引用整个 jQuery 库，或者是因为项目需要使用原生 js 库，这时我们就可以封装一些常用的 jQuery 方法，来简化我们的代码。下面是一些常用的 jQuery 方法封装。

封装 $() 方法

function $(selector) {
  return document.querySelector(selector);
}

这个封装方法是通过传入 css 选择器，返回对应 HTML 元素的文档对象，相当于 jQuery 中的 $() 方法。

例如：

<div id="box"></div>

const box = $('#box');

封装 addClass() 方法

function addClass(elements, className) {
  elements.classList.add(className);
}

这个封装方法是为 HTML 元素添加一个类名，相当于 jQuery 中的 addClass() 方法。

例如：

<div id="box"></div>

const box = $('#box');
addClass(box, 'active');

封装 removeClass() 方法

function removeClass(elements, className) {
  elements.classList.remove(className);
}

这个封装方法是为 HTML 元素移除一个类名，相当于 jQuery 中的 removeClass() 方法。

例如：

<div id="box" class="active"></div>

const box = $('#box');
removeClass(box, 'active');

封装 toggleClass() 方法

function toggleClass(elements, className) {
  elements.classList.toggle(className);
}

这个封装方法是为 HTML 元素切换一个类名，相当于 jQuery 中的 toggleClass() 方法。

例如：

<div id="box"></div>

const box = $('#box');
toggleClass(box, 'active');

当第一次调用这个方法时，会为元素添加 active 类名；当再次调用时，会移除 active 类名。

总结

上面是封装的三个简单的方法，通过这些例子，我们可以了解到如何使用原生 js 封装 jQuery 的方法，以及可以封装哪些方法。

希望能对您有所帮助。