jQuery modifie les attributs de classe et le style CSS arrangement_jquery

Modification des attributs de classe

L'attribut class est l'attribut class, qui spécifie le nom de la classe
. Lorsque vous utilisez un sélecteur de classe pour spécifier un style, vous devez spécifier un nom de classe pour l'élément, c'est-à-dire la valeur de l'attribut de classe
. Notez que chaque élément HTML n'a qu'un seul attribut de classe. Cependant, la valeur de l'attribut de classe peut être plusieurs noms, c'est-à-dire qu'il peut contenir une liste de mots, séparés par des espaces
. Pour les méthodes d'utilisation spécifiques, voir : http://www.w3school.com.cn/css/css_selector_class.asp

Pour modifier le nom de la classe avec jQuery, vous pouvez soit utiliser la méthode attr() pour modifier l'attribut "class", soit utiliser les méthodes addClass(), removeClass(), toggleClass() et d'autres
.

addClass()

API : http://api.jquery.com/addClass/
La méthode addClass() ajoute le nom de classe spécifié (un ou plusieurs) à l'élément correspondant.
Notez que pour les éléments, l'attribut de classe peut avoir plusieurs valeurs. Cette méthode ne supprime pas la valeur existante, mais ajoute un ou plusieurs attributs de classe à celle d'origine
. L'utilisation de la méthode attr() pour définir l'attribut de classe est un processus d'écrasement ; tandis que addClass() est un processus d'ajout
. Les classes sont finalement séparées par des espaces
. Si vous devez ajouter plusieurs classes, séparez les noms des classes par des espaces
. A partir de la version 1.4, les paramètres de cette méthode peuvent également être transmis dans une fonction.

removeClass()

API : http://api.jquery.com/removeClass/
La méthode removeClass() supprime une ou plusieurs classes de l'élément sélectionné. Si vous devez supprimer plusieurs classes, séparez les noms de classe par des espaces
. Si aucun paramètre n'est transmis, cette méthode supprimera toutes les classes de l'élément sélectionné.

toggleClass()

API : http://api.jquery.com/toggleClass/
La méthode toggleClass() change (définit ou supprime) une ou plusieurs classes de l'élément sélectionné.
Cette méthode vérifie la classe spécifiée dans chaque élément, la supprime si elle existe et l'ajoute si elle n'existe pas
. En ajoutant des paramètres, vous pouvez définir uniquement des opérations de suppression ou d'ajout
. Format : $(sélecteur).toggleClass(class,switch)
Lorsque la valeur du commutateur est vraie, elle sera uniquement ajoutée ; lorsqu'elle est fausse, elle sera uniquement supprimée
.

hasClass()

API : http://api.jquery.com/hasClass/
La méthode hasClass() vérifie si l'élément sélectionné contient la classe spécifiée.
Vous pouvez également utiliser la méthode is() pour obtenir la même fonction. Le paramètre de méthode est passé dans une chaîne de sélection, telle que ".className".

Modification du style CSS

Il existe également certaines méthodes dans jQuery qui renvoient ou définissent directement les propriétés CSS des éléments
.

css()

API : http://api.jquery.com/css/
Opération de lecture : obtenez la valeur de style spécifiée (une ou plusieurs) du premier élément de l'ensemble d'éléments correspondant
. Remarque : L'opération de lecture de plusieurs valeurs de style n'a été ajoutée que dans jQuery v1.9.
Opération d'écriture : définissez la valeur d'une ou plusieurs propriétés CSS pour chaque élément de l'ensemble d'éléments correspondant.
Le paramètre transmis peut être une seule paire clé-valeur, plusieurs valeurs spécifiées par PlainObject ou une fonction (v1.4).
.
jQuery gérera certaines situations spécifiques qui sont différentes dans chaque navigateur. Par exemple, le cssFloat du W3C est styleFloat dans IE, vous pouvez utiliser float, puis jQuery vous aidera à le traduire en ce que chaque navigateur devrait avoir. .
De plus, jQuery interprétera raisonnablement les attributs multi-mots dans les formats CSS et DOM, tels que .css ("background-color") et .css ("backgroundColor"), qui peuvent être traités
.

hauteur() et largeur()

API : http://api.jquery.com/height/ et http://api.jquery.com/width/
Attributs de hauteur et de largeur. Cette valeur de largeur et de hauteur n'inclut pas le remplissage, la bordure et la marge, sauf si l'attribut box-sizing
. Notez que lors de l'écriture, ce qui est défini, c'est la largeur et la hauteur du contenu, hors la partie dimensionnement de la boîte
.
L'opération de lecture renvoie toujours la valeur d'attribut du premier élément de la collection.
La différence entre .css("width") et .width() est la suivante : le premier renvoie une valeur avec une unité, telle que 400 px ; le second renvoie une valeur de pixel sans unité, c'est-à-dire 400.
Donc, si la valeur doit être utilisée pour un calcul, .height() et .width() sont recommandés
. La valeur lue n'est pas nécessairement un entier, et si l'utilisateur zoome sur la page, la valeur peut être incorrecte car le navigateur n'expose pas l'API pour cette situation
. Il existe une autre inexactitude. Lorsque l'élément parent de cet élément est masqué, la taille de l'élément peut ne pas être lue avec précision
.
Le type de valeur pris en charge par les opérations d'écriture est une chaîne ou un nombre.
S'il s'agit d'un nombre, jQuery utilise par défaut px comme unité
. S'il s'agit d'une chaîne, en plus des nombres et des unités, toute mesure CSS raisonnable peut être utilisée, telle que 100 %, 50 % ou auto.

position()

API : http://api.jquery.com/position/
Renvoie la position du premier élément correspondant par rapport à l'élément parent (parent décalé).
Lire uniquement les opérations.

décalage()

API : http://api.jquery.com/offset/
Renvoie les coordonnées du premier élément correspondant, ou définit les coordonnées de chaque élément correspondant. Cette coordonnée est relative au document
.

offsetParent()

API : http://api.jquery.com/offsetParent/
Retournez à la classe parent, lisez uniquement les opérations.

scrollLeft() et scrollTop()

API : http://api.jquery.com/scrollLeft/ et http://api.jquery.com/scrollTop/