Vanilla JS 效果方法

过去，我经常使用 jQuery，我喜欢 jQuery 的一点是它通过简单且轻量级的语法提供了许多有用的方法。最常用的 jQuery 方法之一是效果方法 - 用于为网站创建动画效果。

例如：

• 隐藏() / 显示()
• 切换()
• 淡入()
• 淡出()
• ...

W3schools 列出了所有 JQuery 效果方法

但是现在随着大量 JS 库的增长，jQuery 似乎已经过时了，在一些项目中，开发人员必须用纯 JS 替换 jQuery 代码。

轻松创建与 hide() / show() 相同的函数，只需编辑显示样式

element.style.display = 'block' // or none

但是对于更复杂的效果，例如 fadeIn()/fadeOut()，我们需要编写更多代码。

在 vanilla JS 中编写效果方法的另一个问题是冗长的语法。你可以用 jQuery 方法看到：

$(".myClass").slideDown();

它非常易读且直观，你可以使用jQuery选择器找到元素，然后调用slideDown方法作为该元素的方法。
如果您之前定义了 slipToggle 方法，则代码在 vanilla JS 中实现相同的功能：

const element = document.querySelector(".myClass");
slideToggle(element);

您查询元素，然后将其传递给 SlideToggle() 函数，它似乎比使用 jQuery 的示例不太原生且可读性较差。

这里的技巧是使用 HTMLElement.prototype 添加一个方法到 HTML 元素，你可以使用effect函数作为 HTML 元素的方法。为了简单起见，我们定义 hide() 方法：

HTMLElement.prototype.hide = function() {
  this.style.display = 'none'
}

document.querySelector(".myClass").hide()

为了重用，我在这里创建了一些普通的 JS 方法来实现效果。只需将其放在代码库中的某个位置并将其用作 HTML 元素的本机方法即可。

以上是Vanilla JS 效果方法的详细内容。更多信息请关注PHP中文网其他相关文章！