Exemples d'utilisation de jQuery pour traiter la page elements_jquery

L'exemple de cet article décrit l'utilisation de jQuery pour traiter les éléments de la page. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Pour les éléments de page, ils peuvent être gérés via diverses méthodes de requête et de modification dans la programmation DOM, ce qui est très gênant. jQuery fournit tout un ensemble de méthodes pour manipuler les éléments de la page. Y compris le contenu, la copie, le déplacement et le remplacement des éléments. En voici quelques-uns couramment utilisés.

1. Obtenez et modifiez le contenu directement.

Dans jQuery, le contenu de la page est obtenu et édité principalement via les deux méthodes html() et text(). Parmi eux, html() équivaut à obtenir l'attribut innerHTML du nœud. L'ajout du paramètre html(text) définit le innerHtml ; est utilisé pour obtenir le texte brut de l'élément, et text(content) définit le texte brut. texte.

Ces deux méthodes sont parfois utilisées ensemble. text() est utilisé pour filtrer les balises dans la page, tandis que html(text) est utilisé pour définir le innerHtml dans le nœud. Par exemple :

Copier le code Le code est le suivant :

$(function() {
var sString = $("p:first").text(); //Obtenir du texte brut
$("p:dernier").html(sString);
});

Utilisez la méthode text() pour obtenir le texte du premier P, puis utilisez la méthode html() pour l'attribuer au dernier

.

Utilisation ingénieuse des méthodes text() et html().

Copier le code Le code est le suivant :

textparagrapheshowexemple

Un clic, deux clics et trois clics de souris peuvent être utilisés pour obtenir et transférer des codes.

2. Déplacer et copier des éléments

Dans le DOM ordinaire, si vous souhaitez ajouter un élément après un élément, vous utilisez généralement la méthode appendChild() ou insertBefore() de l'élément parent. Dans de nombreux cas, vous devez rechercher à plusieurs reprises la position du nœud. C'est très gênant. jQuery fournit la méthode append(), qui peut ajouter directement de nouveaux sous-éléments à un élément.

Copier le code Le code est le suivant :

1122...

3344...

En plus d'ajouter directement du code html, la méthode append() peut également être utilisée pour ajouter des nœuds fixes, tels que

Copier le code Le code est le suivant :

$("p").append($("a") );

Cette situation sera un peu différente. Si le

ajouté est le seul élément, alors $("a") sera déplacé à l'arrière de tous les éléments enfants de l'élément, et si la cible

Plusieurs éléments, puis $("a") ajoutera un élément enfant à chaque P sous forme de copie, tout en restant inchangé. Exemple : utilisez la méthode append() pour copier et déplacer des éléments.

Copier le code Le code est le suivant :

Lien 1
Lien 2

Texte 1

Texte 2

Le code ci-dessus définit deux hyperliens pour les appels append(). Pour le premier lien hypertexte, ajoutez la cible $("p"), qui comporte deux éléments

. Pour le deuxième lien hypertexte, ajoutez la cible comme seul élément

Vous pouvez voir que le premier lien hypertexte est ajouté en copiant, et le deuxième lien hypertexte est ajouté en déplaçant.

De plus, comme le montre ce qui précède, la balise après append() est appliquée au style de la cible

, tout en conservant son propre style. En effet, append() ajoute comme sous-balise de

, en plaçant derrière tous les nœuds de sous-balise (texte) de

.

En plus de la méthode append(), jQuery fournit également la méthode appendTo(target), qui est utilisée pour ajouter l'élément cible à l'élément enfant de la cible spécifiée. Son utilisation et ses résultats sont complètement similaires à append().

Copier le code Le code est le suivant :

$(function() {
$("img:eq(0)").appendTo($("p")); //Ajouter plusieurs cibles

$("img:eq(1)").appendTo($("p:eq(0)")); //La cible ajoutée est unique

});

---

Pour la première photo, mon collègue l'a ajoutée à trois balises p, et pour la deuxième photo, il l'a ajoutée à un élément P. D'après les résultats d'exécution, nous pouvons voir que la première photo copiée est ajoutée aux trois. P éléments sous la forme de , tandis que la deuxième image est ajoutée de manière mobile.

Correspondant aux méthodes append() et appendTo(), JQ fournit également les méthodes prepend() et prependTo(). Ces deux méthodes permettent d'ajouter des éléments avant tous les éléments enfants de la cible, et suivent également : copier et déplacer les ajouts. en principe.

En plus des quatre méthodes ci-dessus, Jq fournit également before(), insertBefore(), after() et insertAfter(), qui sont utilisés pour ajouter des éléments directement avant ou après un nœud plutôt qu'en tant qu'élément enfant. insertion.

Before() est exactement le même que insertBefore(), et after() et insertAfter() sont également exactement les mêmes. Ici, nous prenons after() comme exemple

Copier le code Le code est le suivant :

Lien 1
Lien 2

Contenu 1

Contenu 2

Suite à l'exécution du code ci-dessus, vous pouvez voir que la méthode after() suit également le principe de déplacement d'une seule cible et de copie de plusieurs cibles, et n'est plus ajoutée en tant qu'élément enfant. Au lieu de cela, il s'agit de l'élément frère qui suit immédiatement l'élément cible.

3. Supprimer des éléments.

En programmation DOM, pour supprimer un élément, vous utilisez souvent la méthode RemoveChild() de l'élément parent, et jQuery fournit la méthode Remove() pour supprimer l'élément directement.

Par exemple, $("p").remove(); supprime toutes les balises d'élément p de la page entière.

remove() accepte également les paramètres.

Copier le code Le code est le suivant :

Lien 1
Lien 2

Contenu 1

Contenu 2

Dans le code ci-dessus, remove() utilise un sélecteur de filtre et l'élément P dont le contenu texte contient 1 est supprimé.

Bien que Remove() puisse accepter des paramètres, il est généralement recommandé de déterminer l'objet à supprimer lors de l'étape de sélection, puis d'utiliser Remove() pour tout supprimer d'un coup. ("p:contains('1')").remove(); L'effet est exactement le même et l'effet est cohérent avec le style des autres codes.

Dans le DOM, si vous souhaitez supprimer tous les éléments enfants d'un élément, vous utilisez souvent une boucle for avec hasChildNodes() pour juger, et utilisez removeChildNode() pour les supprimer un par un Jquery fournit le vide (. ) méthode pour supprimer directement tous les éléments enfants.

Copier le code Le code est le suivant :

Lien 1
Lien 2

Contenu 1

Contenu 2

4. Cloner des éléments.

La deuxième section mentionne la copie et le déplacement d'éléments, mais cela dépend du nombre de cibles. Souvent, les développeurs espèrent que même s'il n'y a qu'un seul objet cible, l'opération de copie peut toujours être effectuée.

jQuery fournit la méthode clone() pour accomplir cette tâche.

Copier le code Le code est le suivant :

---

Les résultats obtenus par la méthode appendTo() dans la section précédente sont également complétés.

De plus, la fonction clone() accepte également un objet de valeur booléenne comme paramètre. Lorsque le paramètre est vrai, en plus du clone lui-même, la méthode time qu'il transporte sera copiée ensemble.

Copier le code Le code est le suivant :

Le code ci-dessus clone le bouton lui-même lorsque le bouton est cliqué, et clone l'événement de clic en même temps. Le bouton cloné a également pour fonction de se cloner.

J'espère que cet article sera utile à la programmation jQuery de chacun.