Maison >interface Web >Questions et réponses frontales >jquery cliquez pour faire apparaître la page de modification

jquery cliquez pour faire apparaître la page de modification

WBOYoriginal: 2023-05-18 21:13:07663parcourir

Dans le développement Web moderne, nous avons souvent besoin de modifier dynamiquement des éléments ou des interactions de page. Cette exigence est très pratique dans de nombreuses situations. Cependant, pour réaliser ces fonctions, les technologies traditionnelles HTML, CSS et JavaScript présentent certaines limites, c'est pourquoi de nombreux frameworks et bibliothèques ont vu le jour pour étendre leurs fonctions. Parmi eux, jQuery est une bibliothèque JavaScript très célèbre, qui peut rendre la manipulation du DOM plus pratique et plus simple. Dans cet article, nous présenterons comment utiliser jQuery pour réaliser la fonction de clic pour faire apparaître la page modifiée.

Tout d'abord, nous devons préparer du code HTML et CSS de base afin de pouvoir afficher un bouton et les éléments qui doivent être modifiés sur la page. Vous pouvez considérer la structure de code suivante :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery点击弹出修改页面</title>
    <style>
        /*定义弹出框*/
        .pop-up{
            display: none;
            position: absolute;
            background: white;
            border: 1px solid lightgray;
            padding: 20px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
        }
    </style>
</head>
<body>
    <!--定义按钮-->
    <button id="edit-btn">修改</button>

    <!--定义需要修改的元素-->
    <div id="content">
        <h1>这是一个需要修改的标题</h1>
        <p>这是一段需要修改的文本内容</p>
    </div>

    <!--定义弹出框-->
    <div class="pop-up">
        <h2>修改标题</h2>
        <input type="text" id="title-input">
        <h2>修改内容</h2>
        <textarea id="content-input"></textarea>
        <button id="submit-btn">提交</button>
    </div>

    <!--引入jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>
</html>

Dans le code ci-dessus, nous définissons un bouton (l'id est "edit-btn"), un élément qui doit être modifié (l'id est "content") , et Une boîte pop-up (classe "pop-up"). La boîte contextuelle contient un bouton de soumission (l'identifiant est "submit-btn"), une zone de saisie de texte (l'identifiant est "title-input") et un champ de texte (l'identifiant est "content-input"). Ces éléments seront utilisés dans le code suivant.

Ensuite, nous devons utiliser du code JavaScript pour réaliser la fonction consistant à cliquer sur le bouton pour faire apparaître la boîte de dialogue contextuelle. La méthode d'implémentation spécifique est la suivante :

$(document).ready(function(){
   $("#edit-btn").click(function(){
       $(".pop-up").show();
   });
});

Dans le code ci-dessus, nous lions d'abord la fonction de traitement des événements prêts d'un document pour garantir que le code est exécuté une fois la page complètement chargée. Ensuite, nous utilisons la fonction click() de jQuery pour lier une fonction de gestionnaire d'événements de clic, qui est exécutée lorsque le bouton est cliqué. Dans la fonction, nous utilisons la fonction show() de jQuery pour afficher la boîte pop-up (classe "pop-up").

Enfin, nous devons également lier un événement de clic au bouton de soumission. Lorsque vous cliquez sur le bouton de soumission, le contenu modifié dans la boîte contextuelle sera rempli dans l'élément correspondant. Le code est le suivant :

$(document).ready(function(){
    $("#edit-btn").click(function(){
        $(".pop-up").show();
    });
    $("#submit-btn").click(function(){
        var title = $("#title-input").val();
        var content = $("#content-input").val();
        $("#content h1").text(title);
        $("#content p").text(content);
        $(".pop-up").hide();
    });
});

Dans le code ci-dessus, nous utilisons la fonction val() de jQuery pour obtenir le contenu du texte dans la zone de saisie de texte et le champ de texte, et utilisons la fonction text() de jQuery pour insérer ce contenu dans l'élément correspondant. Enfin, nous utilisons la fonction hide() de jQuery pour masquer la boîte contextuelle.

Pour résumer, en utilisant les fonctions click(), show(), val() et text() de jQuery, nous pouvons facilement réaliser la fonction de cliquer pour faire apparaître la page modifiée. Cette fonctionnalité est très utile dans de nombreux sites Web, en particulier là où une interaction et une mise à jour dynamique du contenu sont requises. Si vous souhaitez en savoir plus sur jQuery, vous pouvez consulter la documentation officielle ou vous référer à d'autres documents pour élargir vos connaissances et compétences.

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!

JavaScript jquery css html class 事件 dom input

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

Article précédent：erreur de script win10 jquery1.3.2Article suivant：erreur de script win10 jquery1.3.2

Articles Liés

Voir plus