Les filtres de visibilité en jQuery

Les filtres de visibilité en jQuery

  1. Objectifs

    • Connaitre les filtres de visibilité en jQuery.
    • Savoir utiliser les filtres de visibilité en jQuery.
    • Savoir manipuler les filtres de visibilité en jQuery.



  2. Élément visible

    • :visible: Sélectionne les éléments qui sont visibles.
    • $("p:visible"): sélectionne les paragraphes visibles.
    • Exemple:
      • Sélectionnez les div visibles dans la page suivante.
      <!doctype html>
      <html lang="fr">
      <head>
        <meta charset="utf-8">
      <title>jQuery</title>
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script type="text/javascript">
      $(document).ready(function(){
      $("div:visible").css("background", "#9cf");
      });
      </script>
      <style type="text/css">
      .hidden { display:none;}
      div { width: 40px;
      height: 40px;
      margin: 5px;
      float: left;
      border: 1px solid black;}
      p { text-align: center;}
      </style>
      </head>
      <body>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div class="hidden"></div>
      <div class="hidden"></div>
      </body>
      </html>
  3. Élément caché

    • :hidden:Sélectionne les éléments qui sont cachés.
    • $("p:hidden"): sélectionne les paragraphes cachés.
    • Exemple:
      • Sélectionnez les div cachées dans la page suivante.
      <!doctype html>
      <html lang="fr">
      <head>
        <meta charset="utf-8">
      <title>jQuery</title>
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script type="text/javascript">
      $(document).ready(function(){
      $("button").click(function () {
      $("div:hidden").css("background", "#9cf").show();
      });
      });
      </script>
      <style type="text/css">
      button {margin-left: 50px;}
      .hidden { display:none; }
      div { width: 40px;
      height: 40px;
      margin: 5px;
      float: left;
      border: 1px solid black;}
      </style>
      </head>
      <body>
      <p><button>Montrer les &lt;div&gt; cachés</button></p>
      <div class="box"></div>
      <div class="hidden"></div>
      <div class="hidden"></div>
      <div class="hidden"></div>
      <div class="box"></div>
      </body>
      </html>

Abonnez vous à notre chaîne YouTube gratuitement