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

search |

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

Trafic Booster
hebergement web

SCREEBER - Logiciel de copywriting

SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


HTML5, CSS3, JavaScript pour débutants Tome 1
HTML5, CSS3, JavaScript
pour débutants Tome 1

Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

Regarder aussi nos cours :

fonction date_default_timezone_get

Récupère le décalage horaire par défaut utilisé par toutes les fonctions date/heure dans un script

Inline SVG

Inline SVG Plus de dessin avec html5

HTML les attributs globaux

Certains attributs sont définis de manière globale et peuvent être utilisés sur n'importe quel élément, tandis que d'autres sont définis pour des éléments spécifiques seulement....



Rentabilisez efficacement votre site

Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci