Maison > interface Web > js tutoriel > Résumé des méthodes de fonctionnement des nœuds DOM dans jQuery

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

小云云
Libérer: 2018-01-24 15:40:03
original
1626 Les gens l'ont consulté

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> ]
Copier après la connexion

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>
Copier après la connexion

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> ]
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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> ]
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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>");
Copier après la connexion

ou

$("p").wrapAll(document.createElement("p"));
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal