:hidden 선택자는 화면에 보이지 않는 요소들을 찾아줍니다.
원문 링크 
http://api.jquery.com/hidden-selector/
- jQuery(':hidden')
요소들은 몇가지 원인에 의해 숨겨져 있게 됩니다.
- ◎ CSS display 속성값이 none 일때
- ◎ form 요소 중에 type='hidden' 일때
- ◎ 요소의 width 와 height 가 0 일때
- ◎ 부모 요소가 보이지 않거나 숨겨져 있을 때
visibility:hidden 이나 opacity:0 속성을 가진 요소들은 레이아웃(layout)을 위해 일정 공간을 차지하고 있기 때문에 보이는 것으로 간주(considered to be visible)됩니다. 요소가 사라지고 있는 동안에는 그 움직임(animation)이 끝날때 까지는 보이는(visible) 것으로 간주됩니다. 요소가 나타나고 있는 동안에는 그 움직임(animation)이 시작되면 보이는 것으로 간주됩니다. 뭔 얘기인지 헷갈리시죠. ^^;; 저도 좀.. 의역을 해봐도 잘 와닿지는 않습니다. 아마 어떤 상태이든 보이고 있는 것은 동일하다는 뜻을 표현하려 한게 아닌가 합니다. 그래서 눈에 보이지 않는다고 그 요소가 실제로 없다고 여길 수는 없다. 뭐 이런정도 아닐까요? 하하;;;
예 제
보이지 않는 div 를 3초 후에 보이게 하고 hidden input 들을 모두 찾아서 개수(숫자를 세다)합니다.
<!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="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<span></span>
<div></div>
<div style="display:none;">Hider!</div>
<div></div>
<div class="starthidden">Hider!</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>
미리보기 [새로고침]
미리보기가 움직이는게 나오니까 좀 그럴듯 하네요 :-) 이번 내용 중에 hidden input 찾는 예가 아마 쓸만해 보입니다. 보이지 않는 영역 찾는 부분은 그닥 쓸일이 없을 것 같이 보입니다. 사견입니다. ^^;;
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 마지막 자식 요소들 찾기 : last-child (2) | 2011.02.11 |
|---|---|
| jQuery API 정복 - 폼에 속한 input 들 선택하기 : jQuery(':input') (0) | 2011.02.11 |
| jQuery API 정복 - image 폼 요소 찾기 : jQuery(":image") (0) | 2011.02.10 |
| jQuery API 정복 - ID 로 찾아내기 : jQuery("#id") (7) | 2011.02.10 |
| jQuery API 정복 - 제목 태그(h1)를 찾자 : jQuery(':header') (8) | 2011.02.09 |
| jQuery API 정복 - 자식 중에 태그 찾기 : jQuery(':has(selector)') (30) | 2011.02.09 |
| jQuery API 정복 - 속성이 있는지 찾기 : jQuery('[attribute]') (10) | 2011.02.08 |
| jQuery API 정복 - 내용이 빈 태그 찾기 : jQuery(':empty') (7) | 2011.02.08 |