被javascript控制台日志混淆的函數變量輸出

Question

我是javascript/jquery的初學者..所以，如果這個問題聽起來很傻，請原諒我。

在閱讀本教程的過程中 ，我嘗試向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）表達式將是被單擊的元素（即第一個<a元素）。為什么它顯示為[object Object]。

變量a包含一個jQuery對象，並且toString方法不會被覆蓋，因此它使用返回對象類型的默認實現。

我無法確定a.get（0）如何變成file：///home/me/dev/misc/other/mypage.html

get方法從jQuery對象返回DOM元素對象，而<a>元素的toString方法返回鏈接指向的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

嘗試從每個控制台中刪除字符串，以便僅輸出實際變量。

例如替換：

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

同

console.log(a);

等等。