Explication détaillée de la méthode jQuery d'ajout dynamique de divs et de définition des valeurs d'attribut

jQuery est une bibliothèque JavaScript rapide et concise. Il est nécessaire pour créer des pages Web interactives, faciles à utiliser, flexibles et évolutives. Dans le développement Web, l’ajout dynamique d’éléments div est une exigence courante. Cet article explique comment utiliser jQuery pour ajouter dynamiquement des div et définir des valeurs d'attribut.

1. Préparation

Avant d'utiliser jQuery, vous devez introduire la bibliothèque jQuery dans le fichier HTML. Dans cet exemple, nous utiliserons la version jQuery 3.5.1 :

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. Ajouter dynamiquement des div

Dans jQuery, vous pouvez utiliser la méthode append() pour ajouter dynamiquement des éléments. Cette méthode accepte un paramètre qui spécifie le contenu à ajouter. Il peut s'agir de balises HTML, d'éléments DOM, de texte ou d'objets jQuery.

Par exemple, nous pouvons ajouter un div à l'élément body en utilisant le code suivant :

$("body").append("<div>这是一个新的div</div>");

Dans le code ci-dessus, nous utilisons la fonction $() pour sélectionner l'élément body et la méthode append() pour ajouter un nouveau div élément. La chaîne de contenu ajoutée peut être n'importe quel balisage HTML ou texte brut.

Si vous souhaitez ajouter plusieurs éléments de manière dynamique, vous pouvez les mettre dans une chaîne et les séparer par des virgules. Par exemple :

$("body").append("<div>这是第一个div</div>, <div>这是第二个div</div>");

Cela ajoutera deux éléments div à l'intérieur de l'élément body.

3. Définir les valeurs d'attribut

Une fois qu'un nouvel élément div est ajouté, vous pouvez utiliser la méthode attr() pour définir la valeur de l'attribut. La méthode attr() accepte deux paramètres, le premier paramètre est le nom de l'attribut à définir et le deuxième paramètre est la valeur de l'attribut. Par exemple :

$("body").append("<div>这是一个新的div</div>");
$("div").attr("id", "new-div");

Le code ci-dessus définira l'attribut id de l'élément div nouvellement ajouté et définira sa valeur sur "new-div".

Vous pouvez utiliser la méthode prop() pour définir la valeur d'un attribut booléen, par exemple :

$("input").prop("checked", true);

Le code ci-dessus définit l'attribut vérifié de tous les éléments d'entrée sur true.

En plus d'utiliser les méthodes attr() et prop(), vous pouvez également utiliser la méthode css() pour définir les valeurs des propriétés CSS. Par exemple, vous pouvez définir la couleur d'arrière-plan d'un élément div nouvellement ajouté sur bleu :

$("div").css("background-color", "blue");

Utilisez la méthode css() pour définir n'importe quelle propriété CSS, y compris la couleur, la police, la taille, la bordure, etc.

4. Exemple de code complet

Ce qui suit est un exemple de code complet, qui ajoute dynamiquement deux éléments div et définit leurs attributs d'identification et leur couleur d'arrière-plan :

    
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $("body").append("<div>这是第一个新的div</div>");
            $("body").append("<div>这是第二个新的div</div>");
            $("div").eq(0).attr("id", "div1").css("background-color", "blue");
            $("div").eq(1).attr("id", "div2").css("background-color", "green");
        });
    </script>

Dans le code ci-dessus, nous utilisons $(document The ready(). ) garantit que le code JavaScript est exécuté une fois la page entièrement chargée. Nous avons d’abord ajouté deux nouveaux éléments div à l’intérieur de l’élément body, puis avons utilisé la méthode eq() pour en sélectionner un. Enfin, nous utilisons la méthode attr() pour définir l'attribut id de div1 et la méthode css() pour définir la couleur d'arrière-plan sur bleu. Sélectionnez ensuite l'élément div2, utilisez la méthode attr() pour définir son attribut id et utilisez la méthode css() pour définir la couleur d'arrière-plan sur vert.

5. Résumé

L'ajout dynamique d'éléments div et la définition de valeurs d'attribut dans jQuery sont une exigence courante. Nous pouvons utiliser la méthode append() pour ajouter de nouveaux éléments div, et les méthodes attr(), prop() et css() pour modifier les attributs et les styles de l'élément. Afin de garder le code lisible et maintenable, il est recommandé de mettre le code JavaScript dans un fichier séparé et de le référencer dans le fichier HTML.

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!