Back

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>
Les filtres de contenu en jQuery
Sommaire du cours jQuery
author avatar
Riadh HAJJI

Riadh HAJJI

You may also like

Correction application animate() V2
4 juillet, 2020

Animation avec jQuery La méthode animate() de jQuery (Correction des applications) La méthode animate() de jQuery v2 (Correction des applications) Animation d’images en Jquery Animation de formulaire avec Jquery TP1 Animation JQuery (Correction) La méthode animate() de jQuery Objectifs Connaitre …

La méthode animate() de jQuery v2
4 juillet, 2020

Animation avec jQuery La méthode animate() de jQuery (Correction des applications) La méthode animate() de jQuery v2 (Correction des applications) Animation d’images en Jquery Animation de formulaire avec Jquery TP1 Animation JQuery (Correction) La méthode animate() de jQuery Objectifs Connaitre …

Correction application animate()
3 juillet, 2020

Animation avec jQuery La méthode animate() de jQuery (Correction des applications) La méthode animate() de jQuery v2 (Correction des applications) Animation d’images en Jquery Animation de formulaire avec Jquery TP1 Animation JQuery (Correction) La méthode animate() de jQuery Objectifs Connaitre …