Maison  >  Article  >  interface Web  >  À propos des méthodes de fonctionnement et des enregistrements d'attributs des nœuds jquery et DOM

À propos des méthodes de fonctionnement et des enregistrements d'attributs des nœuds jquery et DOM

不言
不言original
2018-07-02 15:34:201370parcourir

L'article suivant vous propose un article sur les méthodes de fonctionnement et les enregistrements d'attributs des nœuds jquery et DOM. L'éditeur pense que c'est plutôt bien, alors je vais le partager avec vous maintenant et le donner comme référence

J'ai trouvé en ligne une liste des méthodes de fonctionnement des nœuds jquery. Comme suit :

方法

源包装集/字串

目标包装集体

特性描述

A.append(B)

 

 

 

B

 

 

 

A

若目标包装集只匹配一个元素,则源(也包括同源包装集匹配的所有元素)将被移动到目标位置;若目标包装集包含多个元素,则源将保留在原来的位置,但同时复制一份相同的副本到目标位置。

由此,若目标只匹配一个元素时,使用前述方法后源将被删除。

B.appendTo(A)

A.prepend(B)

B.prependTo(A)

A.before(B)

B.insertBefore(A)

A.after(B)

B.insertAfter(A)

Méthode

td >

Ensemble/chaîne d'emballage source

Collectif d'emballage de destination

Description des fonctionnalités

A.append(B)

B

A

Si l'ensemble de wrapper cible ne correspond qu'à un seul élément, la source (y compris également le wrapper homologue set All matching elements) sera déplacé vers l'emplacement cible ; si l'ensemble d'habillage cible contient plusieurs éléments, la source restera à l'emplacement d'origine, mais une copie identique sera copiée à l'emplacement cible.

Ainsi, si la cible ne correspond qu'à un seul élément, la source sera supprimée après avoir utilisé la méthode ci-dessus.

B.appendTo(A)

A.prepend(B)

B.prependTo(A)

A.before(B)

B.insertBefore(A)

A.after(B)

B.insertAfter( A)

Exemple : Dans le tableau ci-dessus, A.append(B) signifie ajouter B à tous les éléments correspondant à A derrière le contenu existant, donc B est la source et A est l'ensemble de wrappers de destination.

Le résumé est le suivant : après avoir utilisé la méthode ci-dessus, les deux nœuds deviennent des nœuds frères du même niveau

Ce qui suit est un résumé des méthodes pour faire fonctionner les nœuds dans le DOM :

(1)appendChild Méthode pour ajouter un nœud à la fin de la liste childNodes //Ajouter newNode à la fin de la liste childNodes de someNode

var returnNode = someNode.appendChild(newNode);

//Changer le premier nœud enfant de someNode par le dernier nœud enfant
var returnNode = someNode.appendChild(someNode.firstChild);

(2)insertBefore méthode, vous pouvez mettre Le nœud est placé à une position spécifique dans la liste childNodes

//Il devient le dernier nœud enfant après l'insertionreturnedNode = someNode.insertBefore(newNode, null);// Le même effet que appendChild

//Devient le premier nœud enfant après l'insertionreturnedNode = someNode.insertBefor(newNode, someNode.firstChild);(3) méthode replaceChild est utilisé pour remplacer le nœud enfant, accepte deux paramètres : le nœud enfant à insérer et le nœud enfant à remplacer. Le nœud enfant à remplacer sera supprimé de l'arborescence du document, et sa position sera occupée par le nœud enfant à insérer //Remplacer le premier nœud enfant returnedNode = someNode. replaceChild( newNode, someNode.firstChild);(4) La méthode RemoveChild est utilisée pour supprimer les nœuds enfants//Supprimer le premier nœud enfantvar formerFirstChild = someNode .removeChild(someNode.firstChild);Pour résumer, les méthodes ci-dessus sont toutes utilisées par les nœuds parents pour faire fonctionner les nœuds enfantsLa figure suivante montre la relation de recherche entre le parent, l'enfant et le frère. nodes Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois ! Recommandations associées : Utilisez jQuery pour implémenter l'affichage flottant @ ID dans WordPress Ajax bootstrap pour embellir la page Web et Code pour implémenter le chargement, la suppression et l'affichage des détails de la page

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!

Déclaration:
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