2

私は初心者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)関数内の式は、クリックされた要素 (つまり、最初の) になると思い ました。[object Object] と表示されるのはなぜですか。どうなる<a elementかわかりませんでした。a.get(0)file:///home/me/dev/misc/other/mypage.html

同様に、変数contentは最初のもの div(Teaser text1 を含む) と同じであるべきではありませんか? [object Object] と表示されるのはなぜですか?

4

4 に答える 4

3

これらの2つの行には違いがあります。

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

content1つ目は、変数をログに記録するだけです。2つ目は、ログに記録する前に、文字列とオブジェクトを連結する連結操作を実行します。文字列とオブジェクトを連結すると、オブジェクトのtoStringメソッドが呼び出され、結果として。になり[object Object]ます。これを回避するには、連結を行わずにcontent直接ログに記録します。mindandmediaのコメントとして、これを行うには、値を個別の引数としてconsole.log：に渡します。

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

href最後に、属性を持つネイティブDOMリンク要素にはtoStringメソッドがあります。これは値を返しhrefます。したがって、セットの最初の要素console.log('a.get(0)=' + a.get(0))の値を取得します。hrefa

于 2012-05-28T08:16:04.950 に答える
2

関数内の$（this）式は、クリックされた要素（つまり、最初の<a要素）になると思いました。なぜ[オブジェクトオブジェクト]として表示されるのですか。

変数aにはjQueryオブジェクトが含まれており、toStringメソッドはオーバーライドされないため、オブジェクトのタイプを返すデフォルトの実装を使用します。

a.get（0）がどのようにfile：///home/me/dev/misc/other/mypage.htmlになるのかわかりませんでした

getメソッドはjQueryオブジェクトからDOM要素オブジェクトを返し、要素のメソッドtoStringは<a>リンクが指すURLを返します。

同様に、変数の内容は最初のdiv（Teaser text1を含む）と同じである必要がありますか？[オブジェクトオブジェクト]として表示されるのはなぜですか？

変数contentには、要素を含むjQuery要素が含まれてい<div>ます。を使用content.get(0)すると、DOM要素が得られます。

于 2012-05-28T08:19:07.933 に答える
0

実際の変数のみを出力するように、各コンソールから文字列を削除してみてください。

例：置換：

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

と

console.log(a);

等々。

于 2012-05-28T08:15:23.380 に答える
0

$(this) は jQuery オブジェクトであるため、[object Object] と表示されます。すべての jQuery 選択関数は、jQuery オブジェクトを返します。上記のように、.html() を使用して jQuery オブジェクトの HTML を取得したり、.text() を使用してテキストを取得したりできます。

これは、jQuery がチェーン可能であるため、$(this).next().parent() などを実行できるためです。各「チェーン」は、別の関数を実行できる jQuery オブジェクトを返します。

編集：

補足として、 $(this)[0] を使用して、私が信じているDOM要素を返すことができます

于 2012-05-28T08:14:32.100 に答える