confus par la sortie du journal de la console javascript des variables de fonction

Question

Je suis un débutant quand il s'agit de javascript/jquery alors si cette question vous semble idiote, veuillez me pardonner.

En passant par ce tutoriel J'ai essayé d'écrire en javascript console les valeurs de certaines variables des fonctions afin de mieux comprendre le fonctionnement de la fonction.

$(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; 
});

J'ai légèrement modifié le 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>
});

Quand je clique sur le premier lien, j'obtiens cette sortie de journal de console

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]

Je pensais que le $(this) dans la fonction serait l'élément sur lequel on a cliqué (c'est-à-dire le premier élément sur lequel on a cliqué). <a element ). Pourquoi apparaît-il sous la forme [objet Objet] ? a.get(0) devient file:///home/me/dev/misc/other/mypage.html

De même, la variable content être égale à la première div (contenant le texte de l'accroche1) ? Pourquoi apparaît-il comme [objet Objet] ?

Answer 1

Il y a une différence entre ces deux lignes :

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

Le premier enregistre simplement le content variable. La seconde effectue une opération de concaténation, en concaténant la chaîne et l'objet, avant de les enregistrer. La concaténation d'une chaîne de caractères et d'un objet a pour résultat que la variable toString qui est appelée, ce qui donne lieu à [object Object] . Pour éviter cela, ne faites pas la concaténation et enregistrez simplement content directement. Comme l'indique mindandmedia, vous pouvez le faire en passant les valeurs comme des arguments séparés à console.log :

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

Enfin, tout élément de lien DOM natif avec un href a un attribut toString méthode. Elle renvoie le href valeur. Ainsi, console.log('a.get(0)=' + a.get(0)) obtient le href de la valeur du premier élément du a set.

Answer 2

Je pensais que l'expression $(this) dans la fonction serait l'élément qui a été cliqué (c'est-à-dire le premier élément <a). [objet Objet].

La variable a contient un objet jQuery, et l'élément toString n'est pas surchargée pour elle, elle utilise donc l'implémentation par défaut qui renvoie le type de l'objet.

Je n'ai pas réussi à comprendre comment a.get(0) devient file:///home/me/dev/misc/other/mypage.html

El get renvoie des objets d'éléments DOM à partir de l'objet jQuery, et la méthode toString méthode pour un <a> renvoie l'URL vers laquelle le lien pointe.

De même, le contenu variable ne devrait-il pas être égal à la première div. (contenant le texte de l'accroche 1) ? Pourquoi apparaît-il sous la forme [object Object] ?

La variable content contient un élément jQuery qui contient l'élément <div> élément. Utilisation de content.get(0) vous donnerait l'élément DOM.

Answer 3

$(this) est un objet jQuery, c'est pourquoi il apparaît sous la forme [object Object]. Toutes les fonctions de sélection de jQuery renvoient un objet jQuery. Comme ci-dessus, vous pouvez utiliser .html() pour obtenir le code HTML d'un objet jQuery, ou .text() pour obtenir uniquement le texte.

C'est parce que jQuery est chaînable et que vous pouvez faire des choses comme $(this).next().parent() etc etc. Chaque "chaîne" renvoie un objet jQuery sur lequel une autre fonction peut être exécutée.

Editar:

Par ailleurs, vous pouvez utiliser $(this)[0] pour retourner l'élément du DOM, je crois.

Answer 4

Essayez de supprimer les chaînes de chacune de vos consoles pour ne sortir que la variable réelle.

Par exemple, remplacer :

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

avec

console.log(a);

et ainsi de suite.