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

IT技术 javascript jquery dom
2021-01-26 18:41:22

我很难找到DOMElement从 jQuery 选择器中获取实际值的方法。

示例代码:

<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.

4个回答

您可以通过以下方式访问原始 DOM 元素:

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

或更简单地说:

$("table")[0];

然而(根据我的经验)实际上并没有很多你需要它。以您的复选框为例:

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

更“jquery'ish”和(恕我直言)更简洁。如果你想给它们编号怎么办?

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

其中一些功能也有助于掩盖浏览器中的差异。某些属性可能不同。典型的例子是 AJAX 调用。要在原始 Javascript 中正确执行此操作,对于XmlHttpRequest.

谢谢,但是 get 方法仍然返回一个 jquery 元素,而不是 dom 元素。否则 .checked 属性调用会起作用。
2021-03-19 18:41:22
@BillRob 如果 get() 没有返回 DOM 元素,则有问题。请参阅此处的文档:docs.jquery.com/Core/get#index
2021-03-25 18:41:22
如果您要明确使用 DOM 属性,那么使用 jQuery 有什么意义?拥有一致的代码来防止可能的 TypeErrors 错误不是更好吗?几年前,我曾经是一名精英 ECMAScripter 并避免使用框架,但我对不一致的了解越多,我最终就越依赖。浏览器引擎只会变得越来越快,除非速度很明显,否则您不必担心这一点。使用框架的全部意义在于让可行的一致代码解决许多问题,而不是尽可能快地完成工作。
2021-04-02 18:41:22
$('a').get(0).nodeType==1在此页面上尝试使用 Firebug,它的评估结果为 true 还是失败?
2021-04-04 18:41:22
$('<input type=checkbox>').appendTo('body').get(0).checked
2021-04-08 18:41:22

编辑:似乎我假设您无法获得该元素是错误的。正如其他人在此处发布的那样,您可以通过以下方式获取:

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

我已经验证这实际上返回了匹配的 DOM 元素。

重复我自己,但再次......不是在所有浏览器中。在 IE7 及更早版本中失败。
2021-03-12 18:41:22

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

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

这会给你类似的东西:

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

...作为字符串而不是 DOM 元素。

如果您需要直接与 DOM 元素交互,为什么不直接使用document.getElementById因为,如果您尝试与特定元素交互,您可能会知道 id,因为假设类名仅在一个元素上或其他一些选项倾向于有风险。

但是,我倾向于同意其他人的看法,即在大多数情况下,您应该学习使用 jQuery 提供的功能来做您需要的事情,因为它非常灵活。

更新:基于评论:这是一个很好的解释的帖子:http : //www.mail-archive.com/jquery-en@googlegroups.com/msg04461.html

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

如果选中,这将返回值,否则返回 0。

$(this).val() 只是进入 dom 并获取元素的属性“值”,无论它是否被检查。

@BillRob - jQuery 只是简化和标准化了如何获取值,而不是你必须去实际元素并自己做。
2021-03-18 18:41:22
James 很奇怪 val() 方法实际上是 .attr("value")。我想知道为什么他们有两种不同的方法。对我来说 .val() 是表单帖子字段的值。
2021-03-24 18:41:22
我可以使用 document.getElementById 或 MS ajax $get 方法。由于 MS 认可 jquery,我正试图打破对 ms ajax javascript 的依赖并学习 jquery。jquery 会改变复选框 .val() 方法的行为似乎完全违反直觉。与其他所有 .val() 调用一样,都会返回表单发布字段。jQuery 使用起来非常好,因此更改 val() 方法令人困惑,并希望找到快速解决方法。
2021-03-27 18:41:22
有时您需要一个带有 ID 和父子场景的复杂选择器,您可以通过一行代码通过 jQuery 获得它,但是使用 document.getElementById 需要一天时间。我同意混合库是一个坏主意,但它有时会发生,并且从 jquery 对象获取 DOM 元素的任务很难,尤其是在 .get(0) 没有浏览器兼容性的情况下。
2021-03-27 18:41:22
2021-03-28 18:41:22