Les filtres de visibilité en jQuery
Les filtres de visibilité en jQuery
-
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.
-
É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(){
$("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><!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>