jQuery ??? ??
??? ??
??? ??? ???? ????? ???? ?? ??? ?????.
| ?? ?? | jQuery ?? | ?? | Return |
| :hidden | $(':hidden') | ??? ?? ?? ?? ?? | ??? ?? |
| :?? | $(':visible') | ??? ?? ?? ?? | ??? ?? |
$('p:hidden).size(); //p
$('p:visible').size() //p
??? ??? ?? ??? ?? ?????? ????? CSS ???? ??:??, ?? ?? ??? ??="??" ? ???:??? ??? ?????.
Example
jQuery? ??? ???? ??? ??? ??? ?? ??? ?? ?? ??? ?????. ? ?? ?? ??? ????. ??: ?? ? ??? ??: ??. ??? ? ? ???? ??? ?????? ?? ???????. ?? ? ? ???? ???? ?? ?? ? ??? HTML ??? ???????.
<div class="wrap"> <span></span> <div></div> <div style="display:none">Hider!</div> <div style="visibility:hidden">Hider!</div> <div class="startHidden">Hider!</div> <div class="startVisibilityHidden">Hider!</div> <div></div> <form> <input type="hidden" /> <input type="hidden" /> <input type="hidden" /> </form> <span></span> <button>顯示隱然元素</button> </div>
CSS
<style type="text/css">
.wrap {
width: 500px;
padding: 10px;
margin: 20px auto;
border: 1px solid #ccc;
}
.wrap div {
width: 70px;
height: 40px;
background: #0083C1;
margin: 5px;
float: left
}
span {
display: block;
clear: left;
color: #008000;
}
.startHidden {
display: none;
}
.startVisibilityHidden {
visibility: hidden;
}
</style>?? ??
? ? ???? ?? ? ?? ??? ? ??? ???????.
1. ?? ???: :hidden
???
$("E:hidden") //E? ?? ???
??
$(":hidden")? ?????. // ??? ?? ?? ??
??:
E:hidden? ??? E ??? ???? ?? ???? :hidden? ??? ?? ?? ??? ?????? ?? ?????.
?? ?:
Collection ??
Instance:
$(document) .ready(function(){
$("span:first").text("Found " + $(":hidden",document.body).length + " ??? ?? ??.");//???? ? ?? ??? ???? ?????. ??? ??? ?? ? ??
$("div:hidden").show("3000");//??? div ?? ?? ??
$("span:last") text("Found " + $( "input:hidden").length + "hidden inputs");//??? ?? ?? ????? ??? ?? ??? ???? ?????
});
??:
":hidden"? ??? ?? ?? ??? ???????. ?? ?????? <header>? ?? ??? ???? ???, ??? ???? ??? ?? ??? "display:none"? ??? ???? "type="hidden"? ??? ?????. "visibility:hidden? ???? ??? ??? ?? ? ?? ??? ????. ". ??, ":hidden"? ???? <header>? ?? ?? ??? ???? ??? ???? ?? ??? ?? ???? ?? ????.
??:
2. ??? ???: :visible
???:
$("E:visible") //E? ?? ??? ?????. ??? ?? ?? ??? ?????
??
$(":visible")//???? ?? ?? ??
??:
"E:visible"? ???? E ??? ???? ?? ?????. ?? ?? "$("div:visible")"? ???? ?? ?????. ??? ?? div ??, ??? "$(":visible")"? ??? ?? ??? ??????? ????
?? ?:
??? ??
????:
<script type="text/javascript">
$(document).ready(function(){
$("div:visible").click(function(e){ //???? DIV ?? ??? ?? event
$(this).css("border","2px solid red"); //???? DIV ??? 2px ??? ???? ?????
e.stopPropagation() //??? ??? ??
} );
$ ("button").click(function(e){ //??? ?? ??? ???
$("div:hidden").show("fast").css("Background", "red");/ /??? ??? ???? ??? ????? ????
e.stopPropagation();//??? ??? ??
});
});
</script>
?? :
?? ? ?? ?? ?? ?? ??? DIV ??? ???? ???? ?? ??? 2px ??? ??? ???? ????, ? ?? ?? ??? ??? ???? ?? ??? ??? ???? ??? ???? ????? ????. ???? ???? ?? ??? "display:none" ?? ".hide()"? ?? ???? ???? ?? ???? ?? ??? ??? ??? ?????.
??:
??? ??: ":visible"? ??? ?? ??? ???????? ??? ??? ?? "display:none"?? ".hide()" ??? ???? ??? ???? ?????. ??; ":hidden"? ??? ??? ?? ?????. ????? ???? ?? ??? ?? "???: ??"? ???? ?? ??? "display:none" ?? "type="hidden""? ?? ??? ?????.
??? jQuery? ??? ?? ???? ?? ??? ?????. ?? ?? ??? ???? ????? ??? ?? ? ????.
