如何从jQuery选择器中获取DOM元素？

Question

我非常难以找到一种方法，能够从 jQuery 选择器中获取实际的 DOMElement。

示例代码：

<input type="checkbox" id="bob" />
var checkbox = $("#bob").click(function() { //some code  } )

而在另一段代码中，我试图确定复选框的选中值。

  if ( checkbox.eq(0).SomeMethodToGetARealDomElement().checked )
    //do something.

请注意，我不想做以下事情：

  if ( checkbox.eq(0).is(":checked"))
    //do something

这让我避开了复选框，但有时我需要真正的DOMElement。

- BillRob

---

有时需要进行以下操作：在 Knockout.js 中，函数 applyBindings 需要一个 DOM 节点而不是一个 jQuery 选择器。这个问题（及其答案）正好可以解决这个问题。 - Muhammad Alkarouri

Answer 1

您可以使用以下代码访问原始DOM元素：

$("table").get(0);

更简单的说：

$("table")[0];

实际上你不需要用到很多（根据我的经验）。以复选框为例：

$(":checkbox").click(function() {
  if ($(this).is(":checked")) {
    // do stuff
  }
});

这种写法更符合 jQuery 的风格，而且（在我看来）更加简洁。如果你想给它们编号怎么办？

$(":checkbox").each(function(i, elem) {
  $(elem).data("index", i);
});
$(":checkbox").click(function() {
  if ($(this).is(":checked") && $(this).data("index") == 0) {
    // do stuff
  }
});

一些功能还可以帮助掩盖浏览器之间的差异。某些属性可能会有所不同，典型的例子是AJAX调用。正确地使用原始Javascript，需要大约7个回退用例来处理XmlHttpRequest。

这些功能中的一些还可以帮助掩盖浏览器之间的差异。某些属性可能会有所不同，典型的例子是AJAX调用。要在原生JavaScript中正确执行此操作，大约需要7个回退用例来处理XmlHttpRequest。

- cletus

---

谢谢，但是get方法仍然返回一个jQuery元素，而不是DOM元素。否则.checked属性调用就会起作用了。 - BillRob

在Firebug中尝试使用$（'a'）.get（0）.nodeType == 1，它会评估为true还是失败？ - meder omuraliev

$('<input type=checkbox>').appendTo('body').get(0).checked - meder omuraliev

谢谢Steve，Cletus。jQuery文档中有很多混淆关于.get操作符的内容。我找到了一篇文章提到它已经被弃用了，并且不要将其与jQuery.get() ajax方法混淆。核心问题是我积累了多年的JavaScript库，无法立即重写所有库，因此它们会随时间逐步转换。 - BillRob

如果你要显式使用DOM属性，那么使用jQuery有什么意义呢？难道不应该拥有一致的代码，以防止可能出现的类型错误吗？几年前，我曾经是一个自命不凡的ECMAScript程序员，并避免使用框架，但随着我对不一致性的了解越来越深入，我最终变得更加依赖它们。浏览器引擎只会变得越来越快，除非速度明显变慢，否则你不必太过担心这个问题。使用框架的整个目的在于拥有可行的、一致的代码来解决许多问题，而不是尽可能快地完成任务。 - meder omuraliev

Answer 2

编辑：看起来我错误地认为您无法获取该元素。正如其他人在这里发布的那样，您可以使用以下方法获取它：

$('#element').get(0);

我已经验证过，它确实返回了匹配的DOM元素。

- eduncan911

---

再次重申，但并非在所有浏览器中。在IE7及更早版本中失败。 - Slavo

Answer 3

我需要将元素作为字符串获取。

jQuery("#bob").get(0).outerHTML;

这将会给你一个类似于：

<input type="text" id="bob" value="hello world" />

作为一个字符串，而不是DOM元素。

- Chad Hedgcock

Answer 4

如果您需要直接与DOM元素交互，为什么不使用document.getElementById呢？因为如果您尝试与特定元素交互，您可能会知道该元素的ID，而假设类名仅在一个元素上或其他选项往往是冒险的。

但是，我倾向于同意其他人的观点，在大多数情况下，您应该学习使用jQuery提供的内容来完成所需的操作，因为它非常灵活。

更新：基于评论：

这里有一篇带有很好解释的文章：http://www.mail-archive.com/[e-mail]/msg04461.html

$(this).attr("checked") ? $(this).val() : 0

这将返回选中时的值，如果未选中，则返回0。 $(this).val() 只是从 DOM 中获取元素的属性"value"，无论是否选中。

- James Black

---

我可以使用document.getElementById或MS ajax $get方法。由于MS认可jquery，我试图打破对ms ajax javascript的依赖并学习jquery。看起来完全不合理的是，jquery会改变复选框.val()方法的行为。因为每个其他的.val()调用都返回表单提交字段。jQuery一直很好用，所以更改val()方法令人困惑，并希望找到一个快速解决方法。 - BillRob

请查看此页面： http://www.mail-archive.com/[e-mail]/msg04461.html - James Black

很奇怪，詹姆斯，val()方法实际上是.attr("value")。我不知道为什么他们有两种不同的方法。对我来说，.val()是表单提交字段的值。 - BillRob

@BillRob - jQuery只是简化和标准化了获取值的方式，而不是让你自己去实际元素中获取。 - James Black

有时候你需要一个包含ID和父子关系的复杂选择器，而使用jQuery只需一行代码就能实现，但使用document.getElementById则需要一整天的时间。我同意混合使用库是个坏主意，但有时候不可避免，而从jQuery对象中获取DOM元素的任务非常困难，特别是.get(0)在浏览器兼容性方面存在问题。 - Slavo