hidden 선택자
선택자 :hidden는 페이지에서 숨겨져 있는
모든 요소를 선택합니다.
visibility: hidden 또는
opacity: 0으로 설정된 요소는 레이아웃에서 공간을 차지하기 때문에
보이는 것으로 간주됩니다. 요소가 보이지 않는 것으로 간주되는 이유는 여러 가지입니다:
CSS 속성 display의 값이 none이거나,
속성 type="hidden"을 가진 요소이거나,
높이 또는 너비가 0으로 설정되었거나,
부모 요소가 숨겨져 있는 경우입니다.
:hidden는 CSS 사양에 속하지 않기 때문에,
최신 브라우저에서 성능을 향상시키려면 먼저 순수 CSS 선택자를 사용하여
요소를 필터링한 다음
.filter(':hidden')을 적용하는 것이 좋습니다.
클래스를 사용하는 것과 같은 다른 방법으로
요소의 가시성을 추적하는 것이
더 나은 성능을 제공할 수 있습니다.
문법
이렇게 숨겨진 요소를 선택합니다:
$(':hidden');
예시
버튼 #test를 클릭하면
보이지 않는 작은 사각형들을 표시해 봅시다:
<button id="test">보이기</button>
<div></div>
<div style="display:none;"></div>
<div></div>
<div></div>
<div style="display:none;"></div>
div {
width: 40px;
height: 40px;
margin: 5px;
border: 2px outset green;
float: left;
}
$('#test').click(function() {
$('div:hidden').show('slow');
});
