oujood.com

jQuery sélecteur [attribute] Sélectionner les éléments qui ont un attribut

jQuery sélecteur [attribute] Sélectionner les éléments qui ont un attribut spécifié

search |

Définition et utilisation sélecteur [attribute]

jQuery cours tutorial

Le sélecteur [attribut] sélectionne chaque élément avec l'attribut spécifié.

Le sélecteur [attribut]  sélectionne les éléments qui ont l'attribut spécifié avec une valeur égale à une chaîne donnée ou départ

Syntaxe

$("[attribute ="valeur"]")

Paramètre Description
attribute Obligatoire. Spécifie l'attribut à rechercher
valeur Facultatif. Spécifie une valeur d'attribut. Si omis touts les éléments avec le paramètre attribute Seront sélectionnés.

Exemple 1 : Sélectionner les éléments avec un id spécifié

Sélectionner le code

  <!DOCTYPE html>
   <html lang="fr">
   <head>
     <title>jQuery sélecteur attribut </title>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
  $(document).ready(function(){
     $('a[hreflang|="en"]').css('border','2px solid green');
     $('a[hreflang|="fr"]').css('border','2px solid #0000ff');
     $('a[hreflang|="english"]').css("background-color","#ddaa00");
  });
  </script>
  <style>
  a { display: inline-block; margin:5px; padding: 5px;}
    </style>
  </head>
  <body>
    <a href="example.html" hreflang="fr">texte du lien
  1</a>
    <a href="example.html" hreflang="en">texte du lien
  2</a>
    <a href="example.html" hreflang="english">texte du lien
  3</a>
  </body>
  </html>

 

Exemple 2 : Colorer les éléments avec un id quelconque

Sélectionner le code

  <!DOCTYPE html>
   <html lang="fr">
   <head>
        <meta charset="utf-8">
     <title>jQuery éléments avec un id quelconque </title>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
  $(document).ready(function(){
    $("[id]").css("background-color","#22dd55");
  });
  </script>
  </head>
  <body>
  <h1>Bien venu</h1>
  <p class="intro">Voici un paragraphe sans id</p>
  <p id="a1">Et voici un paragraphe avec un id</p>
  <p>Un aure paragraphe sans id</p>
  <div>Voici une liste avec un id:
  <ol id="chose">
  <li>élément de liste 1</li>
  <li>élément de liste 2</li>
  <li>élément de liste 3</li>
  </ol>
  </div>
  </body>
  </html>

 



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 gettimeofday

Retourne l'heure actuelle

vertical-align

Définit l'alignement vertical d'un élément

Texte et typographie de Bootstrap Typographie

Bootstrap définit des styles et le formatage de contenu de texte par default comme les titres, paragraphes, blocs de citation, etc



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