jQuery - Manipulation DOM
JQuery fournit des méthodes pour manipuler le DOM de manière efficace. Vous n'avez pas besoin d'écrire du gros code pour modifier la valeur de l'attribut d'un élément ou pour extraire du code HTML d'un paragraphe ou d'une division.
JQuery fournit des méthodes telles que .attr (), .html () et .val () qui agissent comme des getters, récupérant des informations à partir d'éléments DOM pour une utilisation ultérieure.
Manipulation de contenu
le html( ) La méthode obtient le contenu html (innerHTML) du premier élément correspondant.
Voici la syntaxe de la méthode -
selector.html( )Exemple
Voici un exemple qui utilise les méthodes .html () et .text (val). Ici .html () récupère le contenu HTML de l'objet, puis la méthode .text (val) définit la valeur de l'objet en utilisant le paramètre passé -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").click(function () {
var content = $(this).html();
$("#result").text( content );
});
});
</script>
<style>
#division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on the square below:</p>
<span id = "result"> </span>
<div id = "division" style = "background-color:blue;">
This is Blue Square!!
</div>
</body>
</html>Cela produira le résultat suivant -
Remplacement de l'élément DOM
Vous pouvez remplacer un élément DOM complet par les éléments HTML ou DOM spécifiés. lereplaceWith( content ) Cette méthode sert très bien cet objectif.
Voici la syntaxe de la méthode -
selector.replaceWith( content )Ici, le contenu est ce que vous voulez avoir à la place de l'élément d'origine. Cela peut être du HTML ou du texte simple.
Exemple
Voici un exemple qui remplacerait l'élément de division par "<h1> JQuery is Great </h1>" -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").click(function () {
$(this).replaceWith("<h1>JQuery is Great</h1>");
});
});
</script>
<style>
#division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on the square below:</p>
<span id = "result"> </span>
<div id = "division" style = "background-color:blue;">
This is Blue Square!!
</div>
</body>
</html>Cela produira le résultat suivant -
Suppression d'éléments DOM
Il se peut que vous souhaitiez supprimer un ou plusieurs éléments DOM du document. JQuery fournit deux méthodes pour gérer la situation.
le empty( ) méthode supprime tous les nœuds enfants de l'ensemble des éléments correspondants où comme méthode remove( expr ) La méthode supprime tous les éléments correspondants du DOM.
Voici la syntaxe de la méthode -
selector.remove( [ expr ])
or
selector.empty( )Vous pouvez passer le paramètre optionnel expr pour filtrer l'ensemble des éléments à supprimer.
Exemple
Voici un exemple où les éléments sont supprimés dès qu'ils sont cliqués -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").click(function () {
$(this).remove( );
});
});
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on any square below:</p>
<span id = "result"> </span>
<div class = "div" style = "background-color:blue;"></div>
<div class = "div" style = "background-color:green;"></div>
<div class = "div" style = "background-color:red;"></div>
</body>
</html>Cela produira le résultat suivant -
Insertion d'éléments DOM
Il se peut que vous souhaitiez insérer un ou plusieurs éléments DOM dans votre document existant. JQuery fournit diverses méthodes pour insérer des éléments à divers emplacements.
le after( content ) méthode insérer du contenu après chacun des éléments correspondants où comme méthode before( content ) La méthode insère le contenu avant chacun des éléments correspondants.
Voici la syntaxe de la méthode -
selector.after( content )
or
selector.before( content )Voici le contenu que vous souhaitez insérer. Cela peut être du HTML ou du texte simple.
Exemple
Voici un exemple où des éléments <div> sont insérés juste avant l'élément cliqué -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").click(function () {
$(this).before('<div class="div"></div>' );
});
});
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on any square below:</p>
<span id = "result"> </span>
<div class = "div" style = "background-color:blue;"></div>
<div class = "div" style = "background-color:green;"></div>
<div class = "div" style = "background-color:red;"></div>
</body>
</html>Cela produira le résultat suivant -
Méthodes de manipulation DOM
Le tableau suivant répertorie toutes les méthodes que vous pouvez utiliser pour manipuler les éléments DOM -
| Sr.No. | Méthode et description |
|---|---|
| 1 | après (contenu) Insérez du contenu après chacun des éléments correspondants. |
| 2 | ajouter (contenu) Ajoutez du contenu à l'intérieur de chaque élément correspondant. |
| 3 | appendTo (sélecteur) Ajoutez tous les éléments correspondants à un autre ensemble d'éléments spécifié. |
| 4 | avant (contenu) Insérez le contenu avant chacun des éléments correspondants. |
| 5 | clone (booléen) Clonez les éléments DOM correspondants, et tous leurs gestionnaires d'événements, et sélectionnez les clones. |
| 6 | cloner () Clonez les éléments DOM correspondants et sélectionnez les clones. |
| sept | vide( ) Supprimez tous les nœuds enfants de l'ensemble des éléments correspondants. |
| 8 | html (val) Définissez le contenu html de chaque élément correspondant. |
| 9 | html () Obtenez le contenu html (innerHTML) du premier élément correspondant. |
| dix | insertAfter (sélecteur) Insérez tous les éléments correspondants après un autre ensemble d'éléments spécifié. |
| 11 | insertBefore (sélecteur) Insérez tous les éléments correspondants avant un autre ensemble d'éléments spécifié. |
| 12 | préfixer (contenu) Ajoutez du contenu à l'intérieur de chaque élément correspondant. |
| 13 | prependTo (sélecteur) Ajoutez tous les éléments correspondants à un autre ensemble d'éléments spécifié. |
| 14 | supprimer (expr) Supprime tous les éléments correspondants du DOM. |
| 15 | replaceAll (sélecteur) Remplace les éléments mis en correspondance par le sélecteur spécifié par les éléments correspondants. |
| 16 | replaceWith (contenu) Remplace tous les éléments correspondants par les éléments HTML ou DOM spécifiés. |
| 17 | texte (val) Définissez le contenu du texte de tous les éléments correspondants. |
| 18 | texte( ) Obtenez le contenu textuel combiné de tous les éléments correspondants. |
| 19 | wrap (elem) Enveloppez chaque élément correspondant avec l'élément spécifié. |
| 20 | wrap (html) Enveloppez chaque élément correspondant avec le contenu HTML spécifié. |
| 21 | wrapAll (elem) Enveloppez tous les éléments de l'ensemble correspondant dans un seul élément wrapper. |
| 22 | wrapAll (html) Enveloppez tous les éléments de l'ensemble correspondant dans un seul élément wrapper. |
| 23 | wrapInner (elem) Enveloppez le contenu enfant interne de chaque élément correspondant (y compris les nœuds de texte) avec un élément DOM. |
| 24 | wrapInner (html) Enveloppez le contenu enfant interne de chaque élément correspondant (y compris les nœuds de texte) avec une structure HTML. |