티스토리 뷰

jQuery

[jQuery] 보임 필터 선택자

보임 필터 선택자

화면에 보이거나 보이지 않는 요소를 찾습니다.


보임 필터 선택자(Visibility Filters)

visibility:hidden;이나 opacity:0;은 위치가 제거되지 않았기 때문에 :hidden 선택자에게 선택되지 않습니다.

컨텐츠를 보이지 않게 하는 방법
  • display:none;
  • visibility:hidden;
  • opacity:0;
  • width:0; height:0;
  • form 요소 중에 type="hidden"
  • 부모 요소가 보이지 않거나 숨겨져 있을 때
보임 필터 선택자
종류 설명
:hidden 보이지 않는 요소를 선택합니다.
:visible 보이는 요소를 선택합니다.
Sample : 보임 필터 선택자
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>제이쿼리(jQuery)</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script type="text/javascript">
			function show( ){
				$("li:hidden").show(1000);
			};
			setTimeout("show()" ,1000);  
        </script>
    </head>
    <body>
		<h3>기본 태그를 선택하는 방법</h3>
		<div class="list">
			<ul class="list2">
				<li class="one1" style="display: none;">web</li>
				<li class="one2" style="opacity:0;">one2</li>
				<li class="one3" style="visibility:hidden;">one3</li>
				<li class="one4">one4</li>
				<li class="one5">one5</li>
				<li class="one6">one6</li>
				<li class="one7">one7</li>
				<li class="one8">one8</li>
			</ul>
		</div>
	</body>
</html>  
댓글
댓글쓰기 폼