Visibility Filter

Ads
 

Visibility Filter

This filter filters the element according to their visibility. Means it filters by either hidden or visible

This filter filters the element according to their visibility. Means it filters by either hidden or visible

Visibility Filter

     

Visibility Filter

This filter filters the element according to their visibility. Means it filters by either hidden or  visible

: hidden Selector

It filters all the element that are hidden .

Example :( VisibiltyFilter.html)

<!DOCTYPE html>
<html>
<head>
<style>
div { width:70px; height:40px; background:#ee77ff; margin:5px; float:left; }
span { display:block; clear:left; color:red; }
.starthidden { display:none; }
</style>
<script src="jquery-1.4.2.js"></script>
</head>
<body>
<span></span>
<div></div>
<div style="display:none;">It was hidden! appears for 3000ms</div>
<div></div>
<div class="starthidden">It was Hidden! appears for 3000ms</div>
<div></div>
<form>
<input type="hidden" />
<input type="hidden" />
<input type="hidden" />
</form>
<span>
</span>
<script>
// in some browsers :hidden includes head, title, script, etc... so limit to body
$("span:first").text("Found " + $(":hidden", document.body).length +
" hidden elements total.");
$("div:hidden").show(3000);
$("span:last").text("Found " + $("input:hidden").length + " hidden inputs.");
</script>
</body>
</html>

Output :

: visible Selector

It filters all the elements that are visible .

Example :( VisibilityFilter2.html)

<!DOCTYPE html>
<html>
<head>
<style>
div { width:50px; height:40px; margin:5px; border:3px outset green; float:left; }
.starthidden { display:none; }
</style>
<script src="jquery-1.4.2.js"></script>
</head>
<body>
<button>Show hidden to see they don't change</button>
<div></div>
<div class="starthidden"></div>
<div></div>

<div></div>
<div style="display:none;"></div>
<script>
$("div:visible").click(function () {
$(this).css("background", "yellow");
});
$("button").click(function () {
$("div:hidden").show("fast");
});

</script>
</body>
</html>

 Output :

After execution :

After clicking each box :

 After clicking button :

 

Learn from experts! Attend jQuery Training classes.

Ads

Ads