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é

chercher |

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é

Exemple :       Copier 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

Exemple :       Copier 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



Voir aussi nos tutoriel :

list-style-image

Spécifie une image comme marqueur list-item

fonction stripslashes, stripslashes

Supprime les antislashs d'une chaîne

Elément XSLT xsl:choose

Elément XSLT xsl:choose