Résumé des méthodes de fonctionnement des nœuds DOM dans jQuery

Cet article présente principalement la méthode complète d'exploitation des nœuds DOM dans jQuery. Les amis intéressés devraient y jeter un œil. J'espère que cela pourra aider tout le monde à mieux apprendre à utiliser les nœuds DOM dans jQuery.

append(content | fn) : Ajouter du contenu à chaque élément correspondant.

Par exemple : ajoutez des balises HTML à tous les paragraphes.

<p>I would like to say: </p>
$("p").append("<b>Hello</b>");
[ <p>I would like to say: <b>Hello</b></p> ]

appendTo() : Cette méthode inverse l'opération conventionnelle $(A).append(B), c'est-à-dire qu'elle n'ajoute pas B à A, mais ajoute A à B

Par exemple : ajoutez tous les paragraphes à l'élément avec la valeur ID foo.

<p>I would like to say: </p>
<p></p><p></p>
$("p").appendTo("p");
<p><p>I would like to say: </p></p>
<p><p>I would like to say: </p></p>

prepend() : ajoutez du contenu au début de chaque élément correspondant

Par exemple : ajoutez du code de balisage HTML à tous les paragraphes.

<p>I would like to say: </p>
$("p").prepend("<b>Hello</b>");
[ <p><b>Hello</b>I would like to say: </p> ]

prependTo(content) :

Préparez tous les éléments correspondants dans un autre ensemble d'éléments spécifié. En fait, l'utilisation de cette méthode inverse l'opération conventionnelle $(A).prepend(B), c'est-à-dire qu'au lieu d'ajouter B à A, A est ajouté à B.

Par exemple : ajoutez tous les paragraphes à l'élément avec la valeur ID foo.

<p>I would like to say: </p><p id="foo"></p>
$("p").prependTo("#foo");
<p id="foo"><p>I would like to say: </p></p>

after() : Insérez du contenu après chaque élément correspondant. L'élément inséré et l'élément inséré appartiennent au même niveau, relation non parent-enfant

Par exemple : insérez du code de balisage HTML après tous les paragraphes.

<p>I would like to say: </p>
$("p").after("<b>Hello</b>");
<p>I would like to say: </p><b>Hello</b>

before() : Insérez du contenu avant chaque élément correspondant.

Par exemple : insérez du code de balisage HTML avant tous les paragraphes.

<p>I would like to say: </p>
$("p").before("<b>Hello</b>");
[ <b>Hello</b><p>I would like to say: </p> ]

insertAfter() : insérez tous les éléments correspondants après un autre ensemble d'éléments spécifié. En fait, l'utilisation de cette méthode inverse l'opération conventionnelle $(A).after(B), c'est-à-dire qu'au lieu d'insérer B après A, insérez A après B

Par exemple : mettre tous les paragraphes sont insérés après un élément. Identique à $("#foo").after("p")

<p>I would like to say: </p><p id="foo">Hello</p>
$("p").insertAfter("#foo");
<p id="foo">Hello</p><p>I would like to say: </p>

insertBefore() : insère tous les éléments correspondants devant un autre ensemble d'éléments spécifié. En fait, l'utilisation de cette méthode inverse l'opération conventionnelle $(A).before(B), c'est-à-dire qu'au lieu d'insérer B avant A, A est inséré avant B.

Par exemple : insérer tous les paragraphes avant un élément. Identique à $("#foo").before("p").

<p id="foo">Hello</p><p>I would like to say: </p>
$("p").insertBefore("#foo");
<p>I would like to say: </p><p id="foo">Hello</p>

wrap() : enveloppez tous les éléments correspondants avec le balisage structuré des autres éléments.

Cet habillage est très utile pour insérer un balisage structuré supplémentaire dans le document sans détruire la qualité sémantique du document original. Le principe de cette fonction est d'examiner le premier élément fourni (qui est généré dynamiquement à partir du code de balisage HTML fourni) et de trouver l'élément ancêtre de niveau supérieur dans sa structure de code - cet élément ancêtre est l'élément d'habillage. Cette fonction ne peut pas être utilisée lorsque l'élément du code de balisage HTML contient du texte. Par conséquent, si vous souhaitez ajouter du texte, vous devez l’ajouter une fois le package terminé.

Par exemple : élément DOM utilisé pour envelopper l'élément cible

<p class="container">
 <p class="inner">Hello</p>
 <p class="inner">Goodbye</p>
</p>
$('.inner').wrap(function() {
 return '<p class="&#39; + $(this).text() + &#39;" />';
});
<p class="container">
 <p class="Hello">
  <p class="inner">Hello</p>
 </p>
 <p class="Goodbye">
  <p class="inner">Goodbye</p>
 </p>
</p>

unwrap() : Cette méthode supprimera l'élément parent de l'élément. Cela peut rapidement annuler l'effet de la méthode .wrap(). Les éléments correspondants (et leurs frères et sœurs) remplacent leurs éléments parents dans la structure DOM.

Par exemple : Enveloppez chaque paragraphe avec p avec l'ID "content"

<p>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
</p>
$("p").unwrap()
<p>Hello</p>
<p>cruel</p>
<p>World</p>

wrapAll() : Enveloppez tous les éléments correspondants avec un seul élément

Ceci est différent de '.wrap()' est enveloppé une fois pour chaque élément correspondant. . Ce type d'habillage est particulièrement utile pour insérer un balisage structuré supplémentaire dans un document sans détruire la qualité sémantique du document original. Le principe de cette fonction est d'examiner le premier élément fourni et de trouver l'élément ancêtre supérieur dans sa structure de code - cet élément ancêtre est l'élément d'habillage.

Par exemple : enveloppez tous les paragraphes avec un p généré

$("p").wrapAll("<p></p>");

ou

$("p").wrapAll(document.createElement("p"));

Recommandations associées :

Exemple de partage d'exercices sur le sélecteur JQuery et le fonctionnement des nœuds DOM

Méthodes courantes d'insertion à l'intérieur des nœuds DOM

Exemples pour expliquer l'interprétation des balises HTML dans Nœud DOM

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!