oujood.com

jQuery : Le sélecteur :header

jQuery le sélecteur header permet de sélectionner tous les éléments en-têtes (titre) H1, H2, H3, H4, H5 et H6

chercher |

Définition et utilisation sélécteur :header

Le sélecteur : header sélectionne tous les éléments en-tête (<h1> à <h6>).

Syntaxe

$(":header")

Exemple : Sélectionnez tous les éléments en-tête (H1 à H6):

Sélectionner le code

  <!DOCTYPE html>
   <html lang="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery Sélectionnez tous les éléments en-tête  </title>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $(":header").css("background-color","#aaff00")
  })
  </script>
  </head>
  <body>
  <h1>Bien venu sur mon site</h1>
  <p>Ceci est un élément P avec index (0)</p>
  <p>Ceci est un élément P  avec index (1)</p>
  <p class="intro">Ceci est un élément P avec index
  (2)</p>
  <p>Ceci est un élément P avec index (3)</p>
  <p>Ceci est un élément P avec index (4)</p>
  <p>Ceci est un élément P avec index (5)</p>
  </body>
  </html>

 

Exemple : Ajoute une couleur d'arrière-plan et de texte à tous les en-têtes sur la page.

Sélectionner le code

  <!DOCTYPE html>
   <html lang="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery demo </title>
     <style>
    body { font-size: 10px; font-family: Arial; }
    h1, h2 { margin: 3px 0; }
    </style>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script>$(document).ready(function(){
  $(":header").css({ background:'#CCC', color:'blue' });
  });
  </script>
  </head>
  <body>
    <h1>Mon titre 1</h1>
   
    <p>Paragraphe 1 Paragraphe 1 Paragraphe 1 Paragraphe 1
  Paragraphe 1 </p>
    <h2>Mon titre 2</h2>
    <p>Paragraphe 2 Paragraphe 2 Paragraphe 2 Paragraphe 2
  Paragraphe 2 </p>
   
  </body>
  </html>

 

Notes  :

  • Parce que le sélecteur :header est une extension de jQuery et ne fait pas partie de la spécification CSS, les requêtes utilisant :header ne peuvent pas profiter de cette poussée de performance fournie par la méthode querySelectorAll() .
  • Pour obtenir les meilleures performances lors de l'utilisation du sélecteur :header , tout d'abord sélectionner les éléments à l'aide d'un sélecteur CSS pur, puis utiliser .filter(":header") .



Par gerywa 25 juillet 2014

MARKETPOWER-IA
Logiciel d'I.A.
Logiciel d'I.A. 100% Français pour lancer son business en ligne

La méthode secrète likes sans fin sur Facebook

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe