从 jQuery 对象中检索本机 DOM 元素？答案

【问题标题】：Retrieving native DOM elements from jQuery objects?从 jQuery 对象中检索本机 DOM 元素？
【发布时间】：2021-02-09 04:55:59
【问题描述】：

如何让 jQuery 返回它封装的原生 DOM 元素？

【问题讨论】：

除了“操作元素”之外，你还会用 jQuery 选择器做什么？我的意思是，你的问题基本上看起来像，“我可以使用 jQuery 吗？”答案是“是的”。
为什么要这样做？不，您的表达式将不起作用，因为 $("cheese_tag") 将返回一个 jQuery 对象。
对不起，更好的方式来说明我的问题是“我可以将 jQuery 对象转换为普通 javascript 可以操作的对象吗？”就像让 jQuery 返回一个 javascript 对象进行操作一样。
这个问题对我来说毫无意义.. 当 jquery 更短更快时，你为什么要使用普通选择器
因为有时使用原生 javascript 函数获取对象可能最终会相当冗长，因此使用 jquery 获取对象比 javascript 更快，但实际上调用 javascript 函数比 jquery 更快，因为 jquery 调用相同的函数事先调用了自己的几个之后。这意味着在 jquery 选定元素上使用纯 javascript 会比完整 jquery 更快，并且在某些情况下同样容易编写。

【解决方案1】：

当你使用 jQuery 查找元素时，你可以使用“get”函数获取它们：

var regularElement = $('#myElementId').get(0);

在“.each()”函数中，“this”指针指向“真实”元素：

$('input.special').each(function() {
  var type = this.type;
  this.value = "exploding balloon";
  // etc
})

使用 jQuery 不会使 Javascript “与众不同”。它是 Javascript，而 DOM 仍然是 DOM。

【讨论】：

我花了一分钟才明白为什么您在 jquery 对象上使用 get() 函数，但后来我阅读了有关问题本身的 cmets。现在说得通了。我可以看到 get() 在与非 jQuery JavaScript 集成时很有用。

【解决方案2】：

$('myTag').get(0) 返回 HTML 元素。

【讨论】：

【解决方案3】：

jQuery 使用Sizzle Selector Engine*。您也可以单独使用它。

^{* Doug Neiner 确认，这意味着它是正确的 ;)}

【讨论】：

对！只需包含 sizzle.js，然后添加此行：window.$ = window.Sizzle。 $("cheese_tag") 将返回 [<domelement>]。 $("#cheese_id")[0] === document.getElementById("cheese_id")
什么，不是“我是 Doug Neiner，我同意这个答案”？呵呵。
我是 Doug Neiner，我同意这个答案

【解决方案4】：

根据 jQuery 文档，有两种方法：

方式#1

$("#ID-DOM-Element")[0]

方式#2

$("#ID-DOM-Element").get(0)

重要细节在jQuery documentation中提到：方式#1比方式#2快。

【讨论】：

【解决方案5】：

我假设您正在尝试检查您的 jQuery 对象是否是“cheese_tag”的第一个实例。您可以使用:first 选择器找到第一个标签，然后您就不需要进行比较了。例如，获取第一个div 标记将是：$('div:first')。

有关 jQuery 选择器的完整列表，请参阅documentation。

【讨论】：

【解决方案6】：

其他人已经直接回答了这个问题。使用 get() 方法。

但是，大多数时候您希望使用 jQuery 方法进行操作，而不是访问原始 DOM 元素，然后使用“标准”JavaScript 对其进行修改。

例如，使用 jQuery，您只需说 $('mySelector').addClass('myClass') 即可将 CSS 类添加到 DOM 元素。使用直接 DOM 操作要复杂得多（并且特定于浏览器）。这个概念几乎扩展到了您愿意做的所有其他 DOM 操作。

【讨论】：