Question

关于javascript/jquery，我是初学者。所以，如果这个问题听起来很愚蠢，请原谅我。

在浏览this tutorial时，我尝试写入javascript console，函数中某些变量的值 - 以便我可以更好地理解函数的工作原理

$(document).ready(function(){
    $("div.post h2 a").click(function () {
    var a    = $(this),
    href = a.attr('href'),
    content  = a.parent().next();
    console.log('a='+a);
    console.log('a.get(0)='+a.get(0));
    console.log('a parent='+a.parent());
    console.log('a parent.get(0)='+a.parent().get(0));
    console.log("href="+href);
    console.log('content='+content);
    content.load(href + " #content");
    return false; 
});

我稍微修改了html

<div class="post">
    <h2 id="h21"><a href="other/mypage.html">My Page</a></h2>
    <div class="content">
        Teaser text1...
    </div>
</div>
<div class="post">
    <h2 id="h22"><a href="other/myotherpage.html">My Other Page</a></h2>
    <div class="content">
        Teaser text2...
    </div>
</div>
});

当我点击第一个链接时，我得到了这个控制台日志输出

a=[object Object]
a.get(0)=file:///home/me/dev/misc/other/mypage.html
a parent=[object Object]
a parent.get(0)=[object HTMLHeadingElement]
href=other/mypage.html
content=[object Object]

我认为函数中的$(this)表达式是被点击的元素（即第一个<a element）。为什么它出现为[object Object]。我无法弄清楚a.get(0)变为file:///home/me/dev/misc/other/mypage.html

同样，变量content不应该等于第一个div（包含Teaser text1）吗？为什么它显示为[object Object]？

Answer 1

这两行之间存在差异：

console.log(content);
console.log('content=' + content);

第一个只记录content变量。第二个进行连接操作，在记录之前连接字符串和对象。连接字符串和对象会导致调用对象的toString方法，从而生成[object Object]。为避免这种情况，请不要进行连接，只需直接记录content即可。作为mindandmedia注释，您可以通过将值作为单独的参数传递给console.log：

来完成此操作

console.log('content=', content);

最后，具有href属性的任何本机DOM链接元素都具有toString方法。这将返回href值。因此console.log('a.get(0)=' + a.get(0))获取href集中第一个元素的a值。

Answer 2

我认为函数中的$（this）表达式将是元素被点击的（即第一个＆lt; a元素）。为什么它显示为 [object Object]。

变量a包含一个jQuery对象，并且不会覆盖toString方法，因此它使用返回对象类型的默认实现。

我无法弄清楚a.get（0）如何变成文件：///home/me/dev/misc/other/mypage.html

get方法从jQuery对象返回DOM元素对象，toString元素的<a>方法返回链接指向的URL。

同样，变量内容不应该等于第一个div （包含Teaser text1）？为什么它显示为[object Object]？

变量content包含一个包含<div>元素的jQuery元素。使用content.get(0)将为您提供DOM元素。

Answer 3

$（this）是一个jQuery对象，这就是它显示为[object Object]的原因。所有jQuery select函数都返回一个jQuery对象。如上所述，您可以使用.html（）来获取jQuery对象的HTML，或使用.text（）来获取文本。

这是因为jQuery是可链接的，所以你可以做像$（this）.next（）。parent（）等等。每个“链”返回一个jQuery对象，然后可以运行另一个函数。

编辑：

作为旁注，您可以使用$（this）[0]返回我相信的DOM元素

Answer 4

尝试从每个控制台中删除字符串，以便只输出实际变量。

e.g。替换：

console.log('a='+a);

与

console.log(a);

等等。

混淆了javascript控制台日志输出的函数变量

4 个答案: