본문 바로가기

Webstoryboy

Category

Explanation

JQUERY

[jQuery] 보임 필터 선택자

보임 필터 선택자

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


보임 필터 선택자(Visibility Filters)

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

컨텐츠를 보이지 않게 하는 방법
  • display:none;
  • visibility:hidden;
  • opacity:0;
  • width:0; height:0;
  • form 요소 중에 type="hidden"
  • 부모 요소가 보이지 않거나 숨겨져 있을 때
보임 필터 선택자
종류 설명
:hidden 보이지 않는 요소를 선택합니다.
:visible 보이는 요소를 선택합니다.

Sample1

내용 필터 선택자 예제입니다.

결과

속성 선택자

  • 기본 선택자
  • 계층 선택자
  • 속성 선택자
  • 기본 필터 선택자
  • 내용 필터 선택자
  • 보임 필터 선택자
    • :hidden
    • :visible
  • 자식요소 필터 선택자
  • 폼 필터 선택자
jquery
$(".list li:hidden").show().addClass("rLine");
$(".list li:visible").addClass("rLine");
html
<h3>속성 선택자</h3>
<div>
    <ul class="list">
        <li>기본 선택자</li>
        <li>계층 선택자</li>
        <li>속성 선택자</li>
        <li>기본 필터 선택자</li>
        <li>내용 필터 선택자</li>
        <li>보임 필터 선택자
            <ul>
                <li style="display: none;">:hidden</li>
                <li style="display: none;">:visible</li>
            </ul>
        </li>
        <li>자식요소 필터 선택자</li>
        <li>폼 필터 선택자</li>
    </ul>
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        li.select:before {content:'Select'; padding: 4px 4px 2px 4px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
        .rLine {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
        .choice a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
    <h3>속성 선택자</h3>
    <div>
        <ul class="list">
            <li>기본 선택자</li>
            <li>계층 선택자</li>
            <li>속성 선택자</li>
            <li>기본 필터 선택자</li>
            <li>내용 필터 선택자</li>
            <li>보임 필터 선택자
                <ul>
                    <li style="display: none;">:hidden</li>
                    <li style="display: none;">:visible</li>
                </ul>
            </li>
            <li>자식요소 필터 선택자</li>
            <li>폼 필터 선택자</li>
        </ul>
    </div>

    <div class="choice">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 <em>:hidden</em>를 보이게 합니다.</a>
        <a href="#" class="btn2">클릭하면 <em>:visible</em>를 선택합니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice .off1").on("click", function(e){
            e.preventDefault();
            $(".list li").removeClass("rLine");
            $(".list li ul li").css("display","none");
        });
        $(".choice .btn1").on("click", function(e){
            e.preventDefault();
            $(".list li:hidden").show().addClass("rLine");
        });
        $(".choice .btn2").on("click", function(e){
            e.preventDefault();
            $(".list li:visible").addClass("rLine");
        });
    </script>
</body>
</html>

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기