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 :
: visible Selector
It filters all the elements that are visible .
After execution :
After clicking each box :
After clicking button :
Properties:
: hidden Selector
It filters all the element that are hidden .
Example :
| <!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 :
| <!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 clicking each box :
After clicking button :
No comments:
Post a Comment