Question

我知道这可能听起来很简单，但不知怎的，我无法理解下面一段代码背后的逻辑

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="./js/jquery-1.7.2.min.js"></script>
    </head>
    <body>
        <script>
            alert("Dom Length:"+$('*').length);
            var a = "hi";
            alert($.type(a));
        </script>
    </body>
</html>

我得到输出为Dom Length：5但我不明白长度是如何填充的。

UPDATE1：

我认为它会选择DOM中的所有元素，计数会误导我。如果我在体内添加<p> hi </p>，还有一个补充：它仍显示长度为5.是正确还是应该是6？

Answer 1

嗯，你有这些标签：

1 <html>
1 <head>
1 <body>
2 <script>

所以1 + 1 + 1 + 2 = 5。

Answer 2

$('*')使用all-selector，您的页面中有5个元素：

HTML
头
脚本
体
脚本

我建议你在控制台中运行它：

$('*').get().map(function(e){ return e.tagName })

编辑你的第二个问题：

在正文中添加hi不会添加元素，而是添加文本节点，这就是计数不会更改的原因。阅读more about nodes and elements。

编辑您的评论：

请注意，脚本不会看到自身之后的元素。如果您希望它看到整个DOM，请将其更改为

$(function(){
    alert("Dom Length:"+$('*').length);
});

Answer 3

'*' 代表jQuery中的所有内容，因此当我们说$('*')时，它意味着所有DOM元素。

Answer 4

您基本上是选择HTML的所有元素。

在这种情况下，您总共有5个元素。

确实，这是一个简单的问题。但是，你并不孤单。

我一直面临同样的问题，但使用参考卡很容易回答。

您可以从以下链接中获取一个：

http://marieraney.com/webclass/docs/jquery_selectors_refcard.pdf

Jquery *选择器查询

4 个答案: