oujood.com

JQuery sélecteur :visible Sélectionner tous les éléments visibles

JQuery sélecteur :visible Sélectionner tous les éléments visibles

search |

Définition et Utilisation sélecteur :visible

Le sélecteur :visible sélectionne tous les éléments qui sont actuellement visible.

Les éléments visibles sont des éléments  :

  • Dont la valeur à afficher diffent de aucun
  • ou Ils sont des éléments de formulaire avec type diffent de "hidden".
  • ou La largeur et la hauteur définie sur une valeur diffent de 0
  • ou Un élément parent n'est pas cachés (Cela masque également les éléments enfants)
  • ou Ils ont une valeur display de CSS diffent de none.

Note :

Les éléments avec visibility: hidden ou opacity: 0 sont considérés comme étant visibles, car ils consomment toujours l'espace dans la mise en page.

Durant les animations qui cachent un élément, l'élément est considéré comme soit visible jusqu'à la fin de l'animation.

Au cours de l'animation pour afficher un élément, l'élément est considéré comme  êtant visible au début de l'animation.

Syntaxe

$(":visible")

Exemple 1: Colorer les éléments p visibles

Sélectionner le code

  <!DOCTYPE html>
   <html lang="fr">
   <head>
        <meta charset="utf-8">
     <title>jQuery selecteur élément visible </title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("p:visible").css("background-color","#ddaa00");
  });
  </script>
  </head>
  <body>
  <h1>Bien venu </h1>
  <p>Mon nom est Gerywa</p>
  <p>J'apprend Jquery</p>
  voici un paragraphe vide
  <p></p>
  <p>J'aime javascripte</p>
  </body>
  </html>

 

Exemple :

Copier le code de l’exemple , quand vous affichez la page dans votre explorateur, cliquez sur chacun des div qui seront affichés,

Puis cliquez sur le bouton afficher les cachés.

Sélectionner le code

  <!DOCTYPE html>
   <html lang="fr">
   <head>
        <meta charset="utf-8">
     <title>jQuery demo </title>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    div { width:50px; height:40px; margin:5px; border:3px outset
  green; float:left; }
    .starthidden { display:none; }
    </style>
    <script type="text/javascript">
  $(document).ready(function(){
     $("div:visible").click(function () {
        $(this).css("background-color","#00aa00");
      });
      $("button").click(function () {
        $("div:hidden").show("slow");
        $("div:not(:Empty)").css("background-color","#00ff22");
      }); 
  });
  </script>
  </head>
  <body>
    <button>Afficher les cachés</button>
    <div></div>
    <div class="starthidden">1</div>
    <div></div>
    <div></div>
    <div style="display:none;">2</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 :

Balise élément de lite dt

Définit un terme (un élément) dans une liste de définition

Introduction au multimédia

Introduction au multimédia
Ce chapitre décrit quelle multimédia et comment le multimédia peut être géré par les navigateurs web.

fonction strripos, strripos

Trouve la position de la derniére occurrence d'une chaîne dans une autre, de fa on insensible la casse



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