Objectifs
- Connaitre les filtres de visibilité en jQuery.
- Savoir utiliser les filtres de visibilité en jQuery.
- Savoir manipuler les filtres de visibilité en jQuery.
É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>
É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 <div> 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>