jQuery ( ": hidden") 정보
jQuery jQuery ( ": hidden")본문
jQuery ( ": hidden")
설명 : 숨겨진 모든 요소를 선택합니다.
요소는 여전히 레이아웃에서 공간을 소비하기 때문에 보이 visibility: hidden거나 opacity: 0보이도록 간주됩니다. 요소를 숨기는 애니메이션 중에 요소는 애니메이션이 끝날 때까지 볼 수있는 것으로 간주됩니다.
문서에없는 요소는 보이지 않는 것으로 간주됩니다. jQuery는 적용 가능한 스타일에 의존하기 때문에 문서에 추가 할 때 표시할지 여부를 알 수있는 방법이 없습니다.
이 셀렉터는 셀렉터와 반대입니다 :visible. 따라서에 의해 선택된 모든 요소는에 의해 :hidden선택되지 않으며 :visible그 반대도 마찬가지입니다.
요소를 표시하는 애니메이션 중에는 요소가 애니메이션의 시작 부분에 표시되는 것으로 간주됩니다.
:hiddenjQuery 1.3.2에서 어떻게 결정 되는가 가 변경되었습니다. 요소 또는 부모 중 하나가 문서에서 공백을 사용하지 않는 경우 요소는 숨겨져 있다고 가정합니다. CSS 가시성은 고려되지 않습니다 (따라서 $( elem ).css( "visibility", "hidden" ).is( ":hidden" ) == false). 릴리즈 노트는 자세히 변경 사항을 설명합니다.
jQuery 3은 :hidden(와 그러므로 :visible) 의 의미를 약간 수정합니다 . 이 버전부터 :hidden레이아웃 상자가없는 경우 요소가 고려 됩니다. 예를 들어 br내용이없는 요소 및 인라인 요소는 :hidden선택기 에서 선택 하지 않습니다 .
추가 참고 사항 :
:hiddenjQuery 확장이며 CSS 사양의 일부가 아니기 때문에 사용하는 쿼리 :hidden는 기본 DOM querySelectorAll()메서드 에서 제공하는 성능 향상을 이용할 수 없습니다 . :hidden요소를 선택 하는 데 사용할 때 최상의 성능을 얻으려면 먼저 순수한 CSS 선택 도구를 사용하여 요소를 선택한 다음를 사용하십시오 .filter(":hidden").
이 선택기를 사용하면 성능에 영향을 미칠 수 있습니다. 브라우저에서 가시성을 결정하기 전에 페이지를 다시 렌더링해야 할 수 있습니다. 예를 들어 클래스를 사용하여 다른 메소드를 통해 요소의 가시성을 추적하면 더 나은 성능을 제공 할 수 있습니다.
예:
모든 숨겨진 div를 표시하고 숨겨진 입력을 계산합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hidden demo</title>
<style>
div {
width: 70px;
height: 40px;
background: #e7f;
margin: 5px;
float: left;
}
span {
display: block;
clear: left;
color: red;
}
.starthidden {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.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...
var hiddenElements = $( "body" ).find( ":hidden" ).not( "script" );
$( "span:first" ).text( "Found " + hiddenElements.length + " hidden elements total." );
$( "div:hidden" ).show( 3000 );
$( "span:last" ).text( "Found " + $( "input:hidden" ).length + " hidden inputs." );
</script>
</body>
</html>
0
댓글 0개