Une interface indépendante du navigateur, de la plateforme et de la langue. Cette interface offre un accès facile à tous les composants standards de la page.
DOM Core : DOM Core n'est pas exclusif à JavaScript, tout langage de programmation prenant en charge DOM peut l'utiliser. Son utilisation ne se limite pas au traitement de pages Web, mais peut également être utilisée pour traiter tout document écrit dans un langage de balisage, tel que XML.
HTML DOM : lors de l'écriture de scripts pour des fichiers HTML à l'aide de JavaScript et du DOM, il existe de nombreuses propriétés spécifiques au HTML-DOM.
CSS-DOM : Pour les opérations CSS, en JavaScript, CSS-DOM est principalement utilisé pour obtenir et définir divers attributs de l'objet de style.
1. Rechercher un nœud
2. Créer un nœud
Utilisez la fonction d'usine de JQuery pour créer un nouveau nœud : var $newNode = $("
Hello
3. Insérer un nœud
Insérez le nœud nouvellement créé ou acquis dans la position spécifiée.
« $node.append($newNode) », ajoute la fin à la fin de chaque élément correspondant. Par exemple, "$("p").append("Hello");" ajoutera "Bonjour" à la fin de "p".
« $newNode.appendTo($node) », ajoute le nouvel élément à la fin de chaque élément correspondant.
« $node.prepend($newNode) », ajoute le début à la fin de chaque élément correspondant. Par exemple, "$("p").prepend("Hello");" ajoutera "Hello" au début à l'intérieur de "p".
« $newNode.prependTo($node) », ajoute le nouvel élément au début de chaque élément correspondant.
« $node.after($newNode) » insère du contenu après chaque élément correspondant, qui est un frère parallèle. Par exemple, "$("p").after("Hello");" insère "Bonjour" après "p". Ce sont des frères.
« $newNode.insertAfter($node) », insère le nouvel élément après chaque élément correspondant.
« $newNode.before($node) » insère du contenu avant chaque élément correspondant. Par exemple, "$("p").before("Hello");" insère "Bonjour" devant "p". .
« $node.insertBefore($newNode) », insère un nouvel élément avant chaque élément correspondant.
Remarque : Si le nœud inséré n'est pas nouvellement créé, l'insertion deviendra une opération de déplacement. Par conséquent, les nœuds clonés doivent être utilisés avant d’insérer de tels nœuds.
4. Supprimer le nœud
Supprimez tous les éléments correspondants du DOM. Par exemple, "$("p").remove(".hello");" supprime l'élément p dont la valeur d'attribut de classe est bonjour, ainsi que tous les éléments situés en dessous.
Effacez tous les éléments correspondants du DOM. Par exemple, "$("p").empty();" efface tous les éléments p et tous les éléments en dessous.
5. Copier le nœud
Cloner l'élément DOM correspondant. Par exemple, "$("p").clone();" renvoie la copie clonée, mais n'a aucun comportement. Si vous souhaitez cloner des événements DOM ensemble, vous devez utiliser "$("p").clone(true);".
6. Remplacer le nœud
Remplacez tous les éléments correspondants par les éléments HTML ou DOM spécifiés. Par exemple, $("p").replaceWith("Paragraph. "); remplace tous les éléments p par "Paragraph. ".
‐‐' ‐ ‐ ‐‐ ‐‐‐‐‐‐ Retourner avec remplacer par : $("Paragraphe
7. Wrap node
wrap() : Enveloppe le nœud spécifié avec d'autres balises. Cette méthode est utile lorsqu'un balisage structuré supplémentaire doit être inséré dans le document sans détruire la sémantique du document original. Par exemple, "$("p").wrap("
");". Chaque élément p est enveloppé dans unwrapAll() : enveloppe tous les éléments correspondants avec un seul élément. La méthode wrap() encapsule tous les éléments individuellement. Par exemple, "$("p").wrapAll("
");" encapsule tous les éléments p danswrapInner() : enveloppez le sous-contenu (y compris les nœuds de texte) de chaque élément correspondant avec d'autres balises structurées. Par exemple, "$("p").wrapInner("");", est enveloppé par chaque élément p.
8. Paramètre d'attribut
attr() : obtenir des attributs et définir des attributs.
Lorsqu'un paramètre est passé à cette méthode, l'attribut spécifié est obtenu pour un élément. Par exemple, "$("img").attr("src");" obtient la valeur de l'attribut src de l'élément img.
Lorsque deux paramètres sont passés à cette méthode, la valeur de l'attribut spécifié est définie pour un élément. Par exemple, "$("img").attr("src","test.jpg");", définissez la valeur de l'attribut src de l'élément img sur test.jsp.
Il existe de nombreuses méthodes dans jQuery qui sont des fonctions à obtenir et à définir. Tels que : attr(), html(), text(), val(), height(), width(), css(), etc.
removeAttr() : Supprime l'attribut spécifié de l'élément spécifié.
9. Opération de style
Vous pouvez définir ou obtenir le style CSS via "attr()".
Styles supplémentaires : addClass(). Par exemple, "$("p").addClass("selected");" ajoute le style "selected" à tous les éléments P.
Supprimer le style : removeClass() --- Supprime toutes les classes ou celles spécifiées des éléments correspondants. Par exemple, "$("p").removeClass("selected");" supprime "selected" dans tous les éléments P.
Changement de style : toggleClass() --- Contrôle l'activation répétée des styles. Supprime le nom de classe s'il existe, l'ajoute si le nom de classe n'existe pas. Par exemple, "$("p").toggleClass("selected");", parmi tous les éléments P, si le style "selected" existe, supprimez le style "selected", sinon ajoutez le style "selected".
Déterminez s'il contient un certain style : hasClass() --- Déterminez si l'élément contient une certaine classe, et retournez true sinon, retournez false ; Par exemple, "$(this).hasClass("protected")" détermine si le nœud actuel a le style "protected".
10. Définir ou obtenir le HTML, le texte et la valeur
Lire et définir le contenu HTML dans un élément : html(), cette méthode peut être utilisée pour XHTML , mais pas pour les documents XML.
Lire et définir le contenu du texte dans un élément : text() Cette méthode peut être utilisée à la fois pour les documents XHTML et XML.
Lire et définir la valeur d'un élément : val() Cette méthode est similaire à l'attribut value en JavaScript. Pour les zones de texte, les zones de liste déroulante et les zones de boutons radio, cette méthode peut renvoyer la valeur de l'élément (les zones à sélection multiple ne peuvent renvoyer que la première valeur). S'il s'agit d'une zone de liste déroulante à sélection multiple, renvoie un tableau contenant toutes les valeurs sélectionnées.
11. Méthodes couramment utilisées pour parcourir les nœuds
Obtenez une collection de tous les éléments enfants de l'élément correspondant : children(). Cette méthode ne prend en compte que les éléments enfants de premier niveau et non les éléments descendants.
Obtenir l'ensemble des éléments frères qui suivent immédiatement l'élément correspondant (mais il n'y a qu'un seul élément dans l'ensemble) : next().
Obtenir l'ensemble des éléments frères immédiatement avant l'élément correspondant (mais il n'y a qu'un seul élément dans l'ensemble) : prev().
Obtenir tous les éléments frères et sœurs avant et après l'élément correspondant : siblings().
12. Opération CSS-DOM
Obtenez et définissez l'attribut de style de l'élément : css().
Obtention et définition de la transparence des éléments : attribut opacity().
Obtenir et définir la hauteur et la largeur de l'élément : height(), width(). Lors de la définition d'une valeur, si seuls des nombres sont transmis, l'unité par défaut est px. Si vous devez utiliser d'autres unités, vous devez transmettre une chaîne, telle que "$("p:first").height("2em""
obtient la hauteur); de l'élément dans la fenêtre courante Déplacement relatif : offset(). L'objet qu'il renvoie contient deux attributs : top et left. Cette méthode ne fonctionne que sur les éléments visibles.
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!
Que sont les plug-ins jquery ?
Comment faire fonctionner json avec jquery
Comment supprimer des éléments dans jquery
Utilisation de la méthode jQuery hover()
jquery implémente la méthode de pagination
Qu'est-ce qu'un élément caché dans jquery
Qu'est-ce qui est mis en évidence dans jquery
Que dois-je faire si mon iPad ne peut pas être chargé ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
