在 JavaScript 选定元素上挂钩 jQuery 方法答案

【问题标题】：Hook jQuery methods on JavaScript selected elements在 JavaScript 选定元素上挂钩 jQuery 方法
【发布时间】：2019-01-09 02:56:30
【问题描述】：

用简单的代码更容易解释：

$("#element").fadeOut(); // jQuery; works as expected

我想使用.fadeOut() 并使用 JS 选择元素，如下所示：

document.getElementById("element").fadeOut(); // Does not work

我该如何进行这项工作，这样做有什么意义（性能方面）？

任何想法都值得赞赏。谢谢。

【问题讨论】：

jQuery 方法需要一个 jQuery 对象才能工作。例如。 $()在此处查看有关它们的更多信息stackoverflow.com/questions/6445180/what-is-a-jquery-object

标签： javascript jquery

【解决方案1】：

您可以将fadeOut 属性名称分配给HTMLElement.prototype，并在其中调用jQuery 的fadeOut：

// $("#element").fadeOut(); // jQuery; works as expected

HTMLElement.prototype.fadeOut = function(...args) {
  $(this).fadeOut(...args);
}

document.getElementById('element').fadeOut();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="element">text</div>

也就是说，覆盖像 HTMLElement 这样的内置对象是非常糟糕的做法，并且可能会导致问题 - 最好只做你最初正在做的事情，然后在包含所需元素的 jQuery 对象上调用 .fadeOut (s)。

【讨论】：

【解决方案2】：

你可以将元素包裹在$():

$(document.getElementById("element")).fadeOut();

但是，您可能会发现使用 jQuery ID 选择器# 会更容易：

$('#element').fadeOut();

【讨论】：

【解决方案3】：

如果你想使用JQuery的特性，你需要使用$()来调用方法，即fadeout()。见JQuery Selector。

现在，如果您想在原生 JavaScript 中执行此操作，请查看 this。

【讨论】：