현대엘리베이터 실습_javascript
2022.09.01
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>현대엘리베이터 실습 02 - javascript</title>
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/swiper-bundle.min.css">
<link rel="stylesheet" href="./css/main.css">
<script src="./js/swiper-bundle.min.js"></script>
<script src="./js/main.js" defer></script> 👈위에 js스크립트 소스 써줄 경우 dom읽을 수 있게 defer라고 쓰기
</head>
<body>
</body>
</html>
window.addEventListener('DOMContentLoaded', () => { })
$(function){ }과 같음document.querySelector('.Wrap').style.color = 'red'
$('.Wrap').css("color", "red") 또는 .css({color:'red'})
와 같음
document.querySelectorAll('.Wrap').style.color = 'red';
console.log(document.querySelectorAll('.Wrap'))
all은 노드리스트를 가지기 때문에 순회해야함document.querySelector('.top_close_btn').addEventListener('click', function () { })
와 같은 방법의 제이쿼리
$('.top_close_btn').on('click', function(){})document.querySelector('.top_close_btn').addEventListener('click', () => {
console.log(this)
}); 로
❗ 화살표 함수의 단점은 this가 없다.
classList.add = addClass
classList.romeve = removeClass
classList.toggle = toggleClass
classList.contain
'수업내용' 카테고리의 다른 글
| [수업내용] 현대엘리베이터 실습_react (0) | 2022.09.20 |
|---|---|
| [수업내용] 2022.09.05. (0) | 2022.09.20 |
| [수업내용] 현대엘리베이터 실습_jquery(feat. float) (0) | 2022.09.20 |
| [수업내용] 2022.08.17. ~ 2022.08.18. (풀페이지 맛보기) (0) | 2022.09.20 |
| [수업내용] 2022.08.16.(+스크롤이벤트) (1) | 2022.09.20 |
