jQuery CSS

Avec jQuery, les éléments CSS peuvent être facilement manipulés. Changer de classe CSS

Opérations jQuery CSS

jQuery dispose de plusieurs méthodes pour effectuer des opérations CSS. Nous apprendrons ce qui suit :

addClass() - Ajouter une ou plusieurs classes à l'élément sélectionné
removeClass() - Supprimer de l'élément sélectionné élément sélectionné Sélectionnez un élément pour supprimer une ou plusieurs classes
toggleClass() - effectue une opération de changement de classe d'ajout/suppression sur l'élément sélectionné
css( ) - Définir ou renvoyer les propriétés de style

Méthode jQuery addClass()

L'exemple suivant montre comment ajouter des attributs de classe à différents éléments. Bien sûr, lors de l'ajout d'une classe, vous pouvez également sélectionner plusieurs éléments :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("h1,p").addClass("blue");
                $("div").addClass("important");
            });
        });
    </script>
    <style type="text/css">
        .important
        {
            font-weight:bold;
            font-size:xx-large;
        }
        .blue
        {
            color:blue;
        }
    </style>
</head>
<body>
<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<div>这是一些重要的文本!</div>
<br>
<button>为元素添加 class</button>
</body>
</html>

Exécutez le programme pour l'essayer

Vous pouvez également spécifier plusieurs classes dans la méthode addClass() :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#div1").addClass("important blue");
            });
        });
    </script>
    <style type="text/css">
        .important
        {
            font-weight:bold;
            font-size:xx-large;
        }
        .blue
        {
            color:blue;
        }
    </style>
</head>
<body>
<div id="div1">这是一些文本。</div>
<div id="div2">这是一些文本。</div>
<br>
<button>为第一个 div 元素添加类</button>
</body>
</html>

Exécutez le programme pour l'essayer

Méthode jQuery RemoveClass()

Le L'exemple suivant montre comment supprimer l'attribut de classe spécifié dans différents éléments :

Instance

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("h1,h2,p").removeClass("blue");
            });
        });
    </script>
    <style type="text/css">
        .important
        {
            font-weight:bold;
            font-size:xx-large;
        }
        .blue
        {
            color:blue;
        }
    </style>
</head>
<body>
<h1 class="blue">标题 1</h1>
<h2 class="blue">标题 2</h2>
<p class="blue">这是一个段落。</p>
<p>这是另外一个段落。</p>
<br>
<button>从元素中移除 class</button>
</body>
</html>

Exécutez le programme pour l'essayer

Méthode jQuery toggleClass()

L'exemple suivant montrera comment utiliser la méthode jQuery toggleClass(). Cette méthode effectue l'opération de commutation d'ajout/suppression de classes à l'élément sélectionné :

Instance

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("h1,h2,p").toggleClass("blue");
            });
        });
    </script>
    <style type="text/css">
        .blue
        {
            color:blue;
        }
    </style>
</head>
<body>
<h1 class="blue">标题 1</h1>
<h2 >标题 2</h2>
<p class="blue">这是一个段落。</p>
<p>这是另外一个段落。</p>
<br>
<button>切换 class</button>
</body>
</html>

Exécutez le programme et essayez-le

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("h1,h2,p").toggleClass("blue"); }); }); </script> <style type="text/css"> .blue { color:blue; } </style> </head> <body> <h1 class="blue">标题 1</h1> <h2 >标题 2</h2> <p class="blue">这是一个段落。</p> <p>这是另外一个段落。</p> <br> <button>切换 class</button> </body> </html>

soumettre Réinitialiser le code

Opération automatique

jQuery CSS

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]