La librairie GD creation d'une image
JQuery sélecteur :visible Sélectionner tous les éléments visibles
Le sélecteur :visible sélectionne tous les éléments qui sont actuellement visible.
Les éléments visibles sont des éléments :
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 : Copier 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.
Exemple : Copier 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