jQuery - Méthodes de sélection CSS

La bibliothèque jQuery prend en charge presque tous les sélecteurs inclus dans les spécifications de feuille de style en cascade (CSS) 1 à 3, comme indiqué sur le site du World Wide Web Consortium.

À l'aide de la bibliothèque JQuery, les développeurs peuvent améliorer leurs sites Web sans se soucier des navigateurs et de leurs versions tant que les navigateurs ont activé JavaScript.

La plupart des méthodes CSS JQuery ne modifient pas le contenu de l'objet jQuery et sont utilisées pour appliquer des propriétés CSS sur les éléments DOM.

Appliquer les propriétés CSS

C'est très simple d'appliquer n'importe quelle propriété CSS à l'aide de la méthode JQuery css( PropertyName, PropertyValue ).

Voici la syntaxe de la méthode -

selector.css( PropertyName, PropertyValue );

Ici, vous pouvez passer PropertyName en tant que chaîne javascript et en fonction de sa valeur, PropertyValue peut être une chaîne ou un entier.

Exemple

Voici un exemple qui ajoute une couleur de police au deuxième élément de la liste.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).css("color", "red");
         });
      </script>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

Cela produira le résultat suivant -

Appliquer plusieurs propriétés CSS

Vous pouvez appliquer plusieurs propriétés CSS à l'aide d'une seule méthode JQuery CSS( {key1:val1, key2:val2....). Vous pouvez appliquer autant de propriétés que vous le souhaitez en un seul appel.

Voici la syntaxe de la méthode -

selector.css( {key1:val1, key2:val2....keyN:valN})

Ici, vous pouvez passer la clé comme propriété et val comme valeur comme décrit ci-dessus.

Exemple

Voici un exemple qui ajoute une couleur de police ainsi qu'une couleur d'arrière-plan au deuxième élément de la liste.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).css({"color":"red", "background-color":"green"});
         });
      </script>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

Cela produira le résultat suivant -

Réglage de la largeur et de la hauteur de l'élément

le width( val ) et height( val ) peut être utilisée pour définir respectivement la largeur et la hauteur de tout élément.

Exemple

Voici un exemple simple qui définit la largeur du premier élément de division où, comme le reste des éléments, la largeur est définie par la feuille de style

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div:first").width(100);
            $("div:first").css("background-color", "blue");
         });
      </script>
		
      <style>
         div { 
            width:70px; height:50px; float:left; 
            margin:5px; background:red; cursor:pointer; 
         }
      </style>
   </head>
	
   <body>
      <div></div>
      <div>d</div>
      <div>d</div>
      <div>d</div>
      <div>d</div>
   </body>
</html>

Cela produira le résultat suivant -

Méthodes CSS JQuery

Le tableau suivant répertorie toutes les méthodes que vous pouvez utiliser pour jouer avec les propriétés CSS -

N ° Sr. Méthode et description
1 css (nom)

Renvoie une propriété de style sur le premier élément correspondant.
2 css (nom, valeur)

Définissez une propriété de style unique sur une valeur sur tous les éléments correspondants.
3 css (propriétés)

Définissez un objet clé / valeur comme propriétés de style pour tous les éléments correspondants.
4 hauteur (val)

Définissez la hauteur CSS de chaque élément correspondant.
5 la taille( )

Obtenez le pixel, la hauteur actuelle calculée du premier élément correspondant.
6 innerHeight ()

Obtient la hauteur intérieure (exclut la bordure et inclut le remplissage) pour le premier élément correspondant.
sept innerWidth ()

Obtient la largeur intérieure (exclut la bordure et inclut le remplissage) pour le premier élément correspondant.
8 décalage( )

Obtenez le décalage actuel du premier élément correspondant, en pixels, par rapport au document.
9 offsetParent ()

Renvoie une collection jQuery avec le parent positionné du premier élément correspondant.
dix externalHeight ([margin])

Obtient la hauteur extérieure (inclut la bordure et le remplissage par défaut) pour le premier élément correspondant.
11 externalWidth ([margin])

Obtenez la largeur extérieure (inclut la bordure et le remplissage par défaut) pour le premier élément correspondant.
12 position( )

Obtient la position supérieure et gauche d'un élément par rapport à son parent offset.
13 scrollLeft (val)

Lorsqu'une valeur est transmise, le décalage de défilement vers la gauche est défini sur cette valeur sur tous les éléments correspondants.
14 scrollLeft ()

Obtient le décalage gauche de défilement du premier élément correspondant.
15 scrollTop (val)

Lorsqu'une valeur est transmise, le décalage supérieur du défilement est défini sur cette valeur sur tous les éléments correspondants.
16 scrollTop ()

Obtient le décalage supérieur de défilement du premier élément correspondant.
17 largeur (val)

Définissez la largeur CSS de chaque élément correspondant.
18 largeur( )

Récupère la largeur actuelle calculée, en pixels, du premier élément correspondant.