La méthode attr() en jQuery

La méthode attr() en jQuery

  1. Objectifs

    • Etre capable d’utiliser la méthode attr() en jQuery
  2. Présentation

    • La méthode attr() est utilisée pour définir ou renvoyer les attributs et les valeurs des éléments sélectionnés.
      • Il existe deux utilisations de la méthode attr() de Query .
        • Pour renvoyer une valeur d’attribut : Cette méthode renvoie la valeur du premier élément correspondant.
        • Pour définir la valeur d’attribut : Cette méthode est utilisée pour définir une ou plusieurs paires attribut / valeur de l’ensemble d’éléments correspondants.



  3. La méthode attr()

    • La méthode attr() définit ou retourne les valeurs d’attributs de l’éléments choisis.
    • Cette méthode fonctionne différemment selon les paramètres.
    • Syntaxe:
      1. Pour renvoyer la valeur d’un attribut:
        • $(sélecteur).attr(attribut)
        • Exemple:Trouver les dimensions d’un élément html
        • $(function(){
                $("button").click(function(){
                  alert("La largeur de cette image est : " 
                  + $("img").attr("width")+" sa hauteur est : " 
                  + $("img").attr("height"));
                });
              });
          Avec image:
              src="images/logo-version02.png" alt="logo apcpedagogie.com" width="538" height="569" />
          
      2. Pour définir un attribut et une valeur:
        • $(sélecteur).attr(attribut, valeur)
        • Exemple:Miniaturiser une image( changer les dimensions d’un élément html)
        • $(function(){
                $("#btn02").click(function(){
                      $("img").attr("width","350");
                });
              });
          
      3. Pour définir un attribut et une valeur à l’aide d’une fonction:
        • $(sélecteur).attr (attribut, fonction (index, valeur actuelle))
        • Exemple:changer les dimensions d’un élément html
        • 
          $(function(){
                $("#btn03").click(function(){
                      $("img").attr("width",function(n,v){
                           return v-50;
                      });
                });
              });
          
      4. Pour définir plusieurs attributs et valeurs:
        • $(sélecteur).attr ({attribut: valeur, attribut: valeur, ...})
        • Exemple:Définir multiples paires attribut / valeur
        • $(function(){
                $("#btn02").click(function(){
                      $("img").attr({width:"300",height:"350"});
                });
              });
          
    • Exemple complet :
      • <!doctype html>
        <html lang="fr">
        <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
          <title>Filtre de base First</title>
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
          <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
              $("#btn01").click(function(){
                alert("La largeur de cette image est : " 
                + $("img").attr("width")+" sa hauteur est : " 
                + $("img").attr("height"));
              });
              $("#btn02").click(function(){
                    $("img").attr("width","350");
              });
              $("#btn03").click(function(){
                $("img").attr("width",function(n,v){
                  return v-50;
                });
              });
              $("#btn04").click(function(){
                    $("img").attr({"width":"350","height":"100"});
              });
        
            });
            </script>
            </head>
            <body>
            <img
            src="images/logo-version02.png" alt="Pulpit Rock" width="538" height="569" />
            <br />
             <button id="btn01">Dimensions de l'image</button></br>
            <button id="btn02">Dimensions de l'image</button></br>
            <button id="btn03">Dimensions de l'image</button></br>
            <button id="btn04">Dimensions de l'image</button></br>
        
            </body>
              <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
              <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
          </body></html>

Laisser un commentaire

Abonnez vous à notre chaîne YouTube gratuitement