Question

基本选择器具有以下形式：

jQuery( element )
jQuery( selector [, context ] )

如果引用，HTML元素可以正常工作：

$("div").length    // value is 2
$("body").length   // value is 1
$(body).length     // Uncaught ReferenceError: body is not defined

然而，文档和document.body都没有引号：

$(document).length         // value is 1
$(document.body).length    // value is 1
$("document").length       // value is 0
$("document.body").length  // value is 0

问题1：是否还有其他jQuery元素/选择器没有引号？

问题2：为什么document和document.body失败并带引号？

我理解“文档”不是像<body>这样的HTML元素，可能是一个特例。这引出了我的最后一个问题。

问题3：为什么document.body可以工作，但以下返回的长度为0？

$(document.body.div).length         // value is 0
$("document.body.div").length       // value is 0

jQuery选择器语法：http://api.jquery.com/jQuery/#jQuery-elementArray

CSS 3选择器：http://www.w3.org/TR/css3-selectors/#type-selectors

Answer 1

document不是DOM中的元素。它是 DOM。并且JavaScript在范围内有一个对象可供使用。所以这个选择器：

$(document)

引用该对象，将其包装在jQuery函数中，以基于原始对象创建jQuery对象。同样的事情发生了很多。例如，您可以这样做：

var someElement = document.getElementById('someId');

现在someElement是一个对象。（巧合的是，它恰好指向DOM中的HTML元素，但这并不重要。）它可以包装为jQuery对象：

$(someElement)

此外，document.body有效，因为body是document对象上的属性。此对象及其属性作为整体引擎的一部分存在于纯JavaScript中，并且不是jQuery的一部分。

另一方面，$("document")不起作用，因为它告诉jQuery在DOM内部找到一个名为“document” 的HTML元素。类似的东西：

<document>some text</document>

当然，这不存在。这也不是：

$("document.body")

因为再次使用jQuery选择器而不是现有对象。这个选择器再次查找一个名为“document”的元素，特别是一个名为“body”的class，如下所示：

<document class="body">some text</document>

它不存在，因此选择器找不到这样的元素。

您的第一个示例只是使用存在的JavaScript对象。你的第二个例子是使用jQuery选择器，它们试图在DOM中找到不存在的元素。他们非常不同。

Answer 2

当您使用$(body)时，它会尝试访问名为body的变量，但它未在任何地方声明，因此会引发引用错误。但document是在全局范围内声明的变量，它引用当前文档对象，这就是它工作的原因。 document.body是document对象的属性，因此也可以。
当您使用'document'或'document.body'时，会将其视为元素选择器，并在dom中查找无法找到的<document>等元素
document.body.div返回undefined，因此$(document.body.div)不会返回任何结果

Answer 3

您可以将DOM对象传递给jQuery选择器，没问题。 document是页面上所有DOM对象的根节点。
页面上没有名为“document”的元素，因此为选择器引用它会失败。
虽然document具有属性body，但document.body没有属性div，因此第一个（未引用的）版本失败。第二个（引用的）版本失败的原因与“文档”单独失败的原因相同。

JQuery选择器：使用文档，正文和引号不一致

3 个答案: