链接到返回的 JQuery 对象的方法

Posted 2023-02-25

【中文标题】链接到返回的 JQuery 对象的方法

【英文标题】：Chaining methods to returned JQuery objects

【发布时间】：2016-05-20 17:57:51

【问题描述】：

在尝试更好地理解 JQuery 时，我遇到了这个 question

我从中得到的是JQuery 选择器返回一个类似数组的结构，您可以像数组一样对其进行迭代。我的问题是在什么情况下我可以做这样的事情：

  $('.foo')[1].someFunction();

不会导致错误：$(...)[1].someFunction is not a function（someFunction 指的是已定义的JQuery 函数，如appendTo()或text()）。

另外为什么会导致错误以及在使用[] 表示法后链接函数的最佳方法（如果可能）是什么？

【参考方案1】：

什么情况下我可以这样做：

$('.foo')[1].someFunction();

在任何情况下。 “数组”中的对象是原生 DOM 对象，它们不支持 jQuery 函数。

【讨论】：

我见过人们这样做：$('.foo')[0].play() 并且有效。我知道play()是一个js函数。这就是它起作用的原因吗？

我不知道你看到了什么。

***.com/questions/2988050/…。寻找@edwardsharp 的回复

@webDev 一个 <audio> DOM 元素本身有一个 .play() 方法，没有 jQuery 或其他任何东西

【参考方案2】：

您可以执行 $('.foo').first() 或 $('.foo').eq(1) 之类的操作，这是访问 jQuery 选择器结果的更惯用方式。

正如@Amit 所说，底层数组结构中的对象是原生 DOM 元素。在 jQuery 方法链中使用它们的一种愚蠢但可能具有启发性的方式是 $($('.foo')[1]).whatever()

解决 cmets 中提出的问题，本机 DOM 元素有自己的（相当大的）一组可以调用的方法。例如，所有 html 元素都有可用的this very much worth knowing interface，并且每种特定类型的元素都有它自己的 this 扩展。

【讨论】：

你能看看我在评论区问@Amit的问题吗？

一个 元素包含此页面上的方法，作为其本机接口的一部分：developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement

@webDev 在我的回答中添加了更多文档。整个网站是真正了解 HTML/CSS/JS、它们如何交互以及您能做什么和不能做什么的巨大资源。

【参考方案3】：

当您使用数组选择器访问 jQuery 对象时，将返回 DOM 元素。由于它不再是一个 jQuery 对象，它将不再能够访问 jQuery 的方法和属性。

您可以尝试使用 $('.foo').eq(1) 之类的东西，然后将 jQuery 方法链接起来。