文档选择器和窗口选择器有什么区别？答案

【问题标题】：What is the difference between the document selector and window selector?文档选择器和窗口选择器有什么区别？
【发布时间】：2011-09-02 20:33:30
【问题描述】：

我有以下 JQuery 函数，它接受用户输入并将其显示在屏幕上。当我同时选择$(document) 和$(window) 时，该功能起作用。使用任一选择器有什么缺点？我在哪里可以阅读更多关于这些选择器及其区别的信息？

提前谢谢你。

  $(document).keypress(function(e) {
      if(e.keyCode == 13) {
          var id = $("input#example").val()
          console.log(id);
          $('#data').append(id);
      }
  });

【问题讨论】：

标签： jquery jquery-selectors window document

【解决方案1】：

$(window) 选择器用于选择视口

$(document) 选择器适用于整个文档（即<html> 标记内的内容，即使它超出视口）。

【讨论】：

同意。在这种情况下，IMO 使用 $(window) 而不是 $(document) 更合乎逻辑，因为从技术上讲，按键不能在视口之外发生。
如果网站使用框架怎么办？
老实说，自 2000 年或者可能在那之前，在 jQuery 发明之前，我就没有使用过框架，但如果我推测，我会说它是一样的，视口框架文档与整个文档的对比。

【解决方案2】：

在jQuery dom selector 中使用window 或document 对象时，大多数情况下您不会注意到两者之间的区别。

但是，重要的是要注意它们不是同一个对象。

window - 指视口。它被用作 JavaScript 中的主要全局对象。
document - window 的直系后代；指的是root of the document tree。

所有 DOM 元素都是 document 的后代，window 的直接后代。

【讨论】：

不开玩笑，有参考吗？
不一样。 $(window) 是指视口，$(document) 是指整个站点。例如，$(window).height() 和 $(document).height() 通常会返回不同的结果。
一个很好的例子是原生的resize事件，你只能在window对象上找到它。

【解决方案3】：

为了回答这个问题，让我从 DOM 的定义开始，我们通常所说的“document”。

文档对象模型 (DOM) 是适用于有效 HTML 和格式良好的 XML 文档的应用程序编程接口 (API)。它定义了文档的逻辑结构以及访问和操作document 的方式。在 DOM 规范中，术语“文档”是广义上使用的。

现在让我解释一下我对browsing contexts 的发现，因为这是Document 和Window 通常具有的关系——尽管重要的是要提到Document 可能存在没有browsing context，但你不应该用 jquery 看到它。

用户与Document 的主视图进行交互。视图被定义为用于将Document 呈现给用户代理的媒体——例如屏幕、印刷品、演讲。主视图是默认视图，由实现Window 接口的AbstractView 对象表示。

简单地说，window 是容器，document 是内容。但我确实建议至少浏览一下文档以便更好地理解。

来源：

【讨论】：