DOM 숨기기

Feb 21, 2024

바닐라 JS 코드 (순수 JS 코드)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>숨기기</h1>

			//id를 단게 아니라 onClick 이벤트를 직접 달았다.
			//모든 html 태그에는 onClick을 달 수 있음!
    <button onclick="hideDisplay()">display로 숨기기</button>
    <button onclick="hideVisible()">visible로 숨기기</button>
    <div class="box">
        <div class="box" id="innerBox1">
            내부박스1
        </div>
        <div class="box" id="innerBox2">
            내부박스2
        </div>
    </div>

    <script>
			//onClick 이벤트를 클릭하면 이 hideDisplay 함수가 실행된다
        function hideDisplay(){
            let el = document.querySelector("#innerBox1");
            el.style.display = "none";
        }
        function hideVisible(){
            let el = document.querySelector("#innerBox2");
            el.style.visibility = "hidden";
        }
    </script>
</body>
</html>


현재 바닐라 자바 스크립트
이걸 jQuery로 바꿀 것임
*document의 엘레멘트를 찾았다 = DOM을 찾았다

display와 visible (jQuery XXX) - 바닐라ver

[ display 숨기기 → el.style.display = "none"; ]


공간도 같이 숨겨짐

//화면

[ visible 숨기기 → el.style.visibility = "hidden"; ]


공간은 사라지지 않음

//화면


el.style. 이 뒤에 CSS에서 적을 수 있는 모든 속성값이 들어올 수 있음.
ex) el.style.color 등

display와 visible 바닐라ver를 사장 된 jQuery 코드로 바꾸자!

1. display hide

2. visible → jQuery로 스타일 바꾸려면 css 사용


w3school -> jQuery css()
https://www.w3schools.com/jquery/jquery_css.asp


잘 숨겨짐!

id로 display와 visible 코드 짜기


바로 id를 찾아서 이벤트를 걸자


여러번 쓸 거면 이렇게 재사용 가능한 코드로 만들면 되지만 
함수 이렇게 안 만든다. (재사용할 일이 별로 없음)

함수 이름은 호출할 때 필요한데, 호출을 이름으로 하는게 아니고 위치로 호출되는거라
함수 이름이 필요가 없음 -> 익명함수로 만들어줌


람다 안에 들어가는 순간, function a라는 함수는 이 안에서만 사용할 건데,
굳이 이름일 적을 필요가 있을까? -> 익명 함수!
function이라고 적지 않아도 함수인걸 다 아니까 function도 생략 가능!

이렇게 람다를 사용한다. 이게 최신 문법! 람다를 쓰자!!