Exemple d'utilisation de la définition du style d'un élément à l'aide de jQuery_jquery

L'exemple de cet article décrit l'utilisation de jQuery pour définir les styles d'éléments. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

CSS est une partie de la page qui ne peut être séparée. jQuery fournit également quelques méthodes pratiques liées au CSS. Dans l'article précédent, addClass() était utilisé pour ajouter des styles CSS aux éléments. Ici, nous présentons principalement comment jQuery définit le style de la page. Y compris l'ajout, la suppression, la commutation dynamique, etc.

1. Ajouter et supprimer des catégories CSS.

Copier le code Le code est le suivant :

$(function() {
//Ajouter plusieurs catégories CSS en même temps
$("img").addClass("css1 css2");
});

Par exemple, le code ci-dessus ajoute deux styles, css1 et css2, à l'élément img

removeClass correspond à la méthode addClass, et les exemples ne seront pas répétés ici.

2. Basculez dynamiquement entre les catégories.

Souvent, en fonction de l'état de fonctionnement de l'utilisateur, vous souhaitez que le style de certains éléments bascule entre une certaine catégorie, parfois la catégorie addClass(), parfois la catégorie RemoveClass(), Jq fournit un toggleClass(name) direct pour ce faire. Opérations similaires.

Copier le code Le code est le suivant :

$(function() {
$("p").click(function() {
$(this).toggleClass("css1");
})
});

Le code ci-dessus implémente la commutation continue des styles CSS1 lorsque vous cliquez sur l'élément P. La méthode toggleClass(name) ne peut définir qu’une seule catégorie CSS. Plusieurs CSS ne peuvent pas être commutés.

3. Obtenez et définissez les styles directement.

Exactement similaire à la méthode attr(), jQuery fournit la méthode css() pour obtenir et définir directement le style d'un élément, par exemple en utilisant css(name) pour obtenir la valeur de style d'un certain style. Définissez plusieurs styles en même temps via la liste CSS (propriétés) et définissez un certain style de l'élément via CSS (nom, valeur).

Par exemple : modifiez la marque de couleur en définissant les événements mouseover et mouseout pour déclencher css (nom, valeur).

Copier le code Le code est le suivant :

$(function() {
$("p").mouseover(function() {
$(this).css("color", "red");
});
$("p").mouseout(function() {
$(this).css("couleur", "noir");
});
});

La méthode CSS fournit l'attribut opacité. Et compatible avec différents navigateurs.

Modifiez l'exemple ci-dessus et définissez la valeur de transparence de l'élément p via des événements de souris.

Copier le code Le code est le suivant :

$(function() {
$("p").mouseover(function() {
$(this).css("opacité", "0.5");
});
$("p").mouseout(function() {
$(this).css("opacité", "1");
});
});

De plus, la méthode hasClass(name) est fournie en CSS pour déterminer si un élément possède un certain ensemble de catégories CSS. Renvoie une valeur booléenne. Par exemple :

Copier le code Le code est le suivant :

$("li:last").hasClass("css1")

Exprime si l'attribut css du dernier li contient la classe css1. et

Copier le code Le code est le suivant :

$("li:last").is(".css1" )

Le code a exactement le même effet.

En regardant le code source de jQuery, la méthode hasClass est la méthode is().

Copier le code Le code est le suivant :

hasClass : function(selector) {
return this.is("." sélecteur);
>

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