바닐라 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와 visible 바닐라ver를 사장 된 jQuery 코드로 바꾸자!
id로 display와 visible 코드 짜기
바로 id를 찾아서 이벤트를 걸자
여러번 쓸 거면 이렇게 재사용 가능한 코드로 만들면 되지만 함수 이렇게 안 만든다. (재사용할 일이 별로 없음) 함수 이름은 호출할 때 필요한데, 호출을 이름으로 하는게 아니고 위치로 호출되는거라 함수 이름이 필요가 없음 -> 익명함수로 만들어줌
람다 안에 들어가는 순간, function a라는 함수는 이 안에서만 사용할 건데,
굳이 이름일 적을 필요가 있을까? -> 익명 함수!
function이라고 적지 않아도 함수인걸 다 아니까 function도 생략 가능!
이렇게 람다를 사용한다. 이게 최신 문법! 람다를 쓰자!![ display로 숨기기, visible로 숨기기 코드 ]
[ 화면에서 확인 ]
정상 작동 됨!
btn 같은게 DOMShare article