Méthode JQuery d'implémentation du paramètre de style, d'ajout, de suppression et de commutation_jquery

Les exemples de cet article décrivent comment JQuery implémente la définition de style, l'ajout, la suppression et le changement. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Avec JQuery, le fonctionnement du style des éléments deviendra très simple. Voyons comment utiliser JQuery pour obtenir, définir, ajouter, supprimer et d'autres opérations sur les styles d'éléments.

Obtention et définition de styles

L'obtention et la définition de la classe peuvent être effectuées à l'aide de la méthode attr(). Par exemple, utilisez la méthode attr() pour obtenir la classe de l'élément p. Le code JQuery est le suivant :

var p_class = $("p").attr("class");
//获取p元素的class

Utilisez la méthode attr() pour définir la classe de l'élément p. Le code JQuery est le suivant :

$("p").attr("'class", "high");
//设置p元素的class为 "high"

Dans la plupart des cas, il remplace la classe d'origine par une nouvelle classe au lieu d'ajouter une nouvelle classe à celle d'origine.

Ajouter du style

Qu'est-ce qu'un cours supplémentaire ? Si la classe d'origine de l'élément p est myClass, alors après avoir ajouté une classe nommée high, l'attribut de classe devient "myClass high", qui est la superposition des deux styles myClass et high. JQuery fournit une méthode spéciale addClass() pour ajouter des styles. Pour rendre l'exemple plus facile à comprendre, ajoutez d'abord un autre ensemble de styles dans la balise style :

.high{ color:red; }
.another{ font-style:italic; color:blue; }

Ajoutez ensuite un bouton "Ajouter une classe" à la page Web. Le code d'événement du bouton est le suivant :

$("#btn_3").click(function(){
  $("#nm_p").addClass("another");
  // 追加样式
});

Enfin, lorsque vous cliquez sur le bouton "Ajouter une classe", le style de l'élément p deviendra italique et la police rouge précédente deviendra également bleue. A cette époque, l'élément p a deux valeurs de classe en même temps, à savoir « high » et « another ». Il existe les deux dispositions suivantes dans CSS.

1. Si plusieurs valeurs de classe sont ajoutées à un élément, cela équivaut à fusionner leurs styles.
2. Si différentes classes définissent le même attribut de style, ce dernier remplace le premier.

Dans l'exemple ci-dessus, cela équivaut à ajouter le style suivant à l'élément p :

color : red;  /* 字体颜色设置红色*/ 
font-style:italic; 
color:blue;

Dans le style ci-dessus, il y a deux attributs « couleur », et ce dernier attribut « couleur » écrasera l'attribut « couleur » précédent, donc la valeur finale de l'attribut « couleur » est « bleu » au lieu de « rouge ».

Supprimer le style

Si l'utilisateur souhaite supprimer une certaine valeur de la classe lorsqu'il clique sur un bouton, il peut utiliser la méthode removeClass(), qui est l'opposé de la méthode addClass(). Sa fonction est de supprimer tout ou partie des éléments spécifiés. à partir de la classe des éléments correspondants. Par exemple, vous pouvez utiliser le code JQuery suivant pour supprimer la classe avec la valeur « high » dans l'élément p :

$("p").removeClass("high");
//移除p元素中值为"high"的class

Si vous souhaitez supprimer les deux classes de l'élément p, vous devez utiliser la méthode removeClass() deux fois. Le code est le suivant :

Copier le code Le code est le suivant :

$("p").removeClass("high").removeClass ("un autre ");

JQuery offre un moyen plus simple. Plusieurs noms de classes peuvent être supprimés avec des espaces. Le code est le suivant :

Copier le code Le code est le suivant :

$("p").removeClass("high another");

De plus, vous pouvez également utiliser une fonctionnalité de la méthode removeClass() pour obtenir le même effet. Lorsqu'il ne prend aucun paramètre, toutes les valeurs de classe seront supprimées. Le code JQuery est le suivant :

$("p").removeClass();
//移除p元素的所有class

Changer de style

Il existe une méthode toggle() dans JQuery. Le code JQuery est le suivant :

toggleBtn.toggle(function(){
  //元素显示 代码③
}, function(){
  //元素隐藏 代码④
})

La fonction de la méthode

toggle() est ici d'exécuter alternativement les deux fonctions de code ③ et de code ④ Si l'élément est initialement affiché, alors cachez-le : si l'élément est initialement caché, alors affichez-le. À l’heure actuelle, la méthode toggle() contrôle principalement les changements répétés de comportement.

De plus, JQuery fournit également une méthode toggleClass() pour contrôler les changements répétés de styles. Supprime le nom de classe s'il existe, l'ajoute si le nom de classe n'existe pas. Par exemple, exécutez la méthode toggleClass() sur l'élément p.

$("p").toggleClass("another");
//重复切换类名“another”

Lorsque vous cliquez continuellement sur le bouton « Changer de style », la valeur de la classe de l'élément p basculera à plusieurs reprises entre « maClasse » et « maClasse autre ».

Déterminer si un certain style est inclus

hasClass() peut être utilisé pour déterminer si un élément contient une certaine classe. Si tel est le cas, il renvoie vrai, sinon il renvoie faux. Par exemple, vous pouvez utiliser le code suivant pour déterminer si l'élément p contient la classe « un autre » :

Copier le code Le code est le suivant :

$("p").hasClass("another");

Cette méthode est produite pour améliorer la lisibilité du code. Dans JQuery, la méthode is() est en fait appelée pour compléter cette fonction. Cette méthode est équivalente au code suivant :

Copier le code Le code est le suivant :

$("p").is(".another"); //est ("." classe);

J'espère que cet article sera utile à la programmation jQuery de chacun.