주의할 점은 jQuery 스크립트가 자바스크립트의 스크립트 태그보다 위에 위치해야 한다는 것이다.
자바스크립트의 코드 내에서 jQuery를 사용하므로 만약 jQuery가 로딩되지 않은 상태에서 자바스크립트를 불러온다면 자바스크립트의 코드가 제대로 작동하지 않는다.
방법 1)
<body>
html 코드
.
.
.
jQuery 스크립트
javascript 스크립트
</body>
방법2) js 파일에 ready() 코드 추가하기
index.html
index.js
$ = document.querySelectorAll
on=addEventListener
<p class="hello">안녕</p>
<script>
$('.hello').html('바보');
</script>
이렇게 코드 양이 절반으로 줄어들어서 쓰는 것일 뿐입니다.
$ 이건 querySelector와 동일하게 사용하면 됩니다.
<p class="hello">안녕</p>
<script>
$('.hello').css('color', 'red');
</script>
이러면 css 스타일 변경이 가능합니다.
(주의) html 셀렉터로 찾으면 html 함수들을 뒤에 붙여야하고
jQuery 셀렉터로 찾으면 jQuery 함수들을 뒤에 붙여야 잘됩니다.
$('어쩌구').innerHTML 이건 안된다는 소리입니다.
<p class="hello">안녕</p>
<script>
$('.hello').addClass('클래스명');
$('.hello').removeClass('클래스명');
$('.hello').toggleClass('클래스명');
</script>
이러면 됩니다. toggleClass는 왔다갔다 토글해줍니다.
<p class="hello">안녕</p>
<p class="hello">안녕</p>
<p class="hello">안녕</p>
<script>
document.querySelectorAll('.hello')[0].innerHTML = '바보';
document.querySelectorAll('.hello')[1].innerHTML = '바보';
document.querySelectorAll('.hello')[2].innerHTML = '바보';
</script>
<p>
태그 3개 내용을 일괄적으로 '바보'로 바꾸려면
그냥 자바스크립트는 저렇게 3줄 쓰면 됩니다.
<p class="hello">안녕</p>
<p class="hello">안녕</p>
<p class="hello">안녕</p>
<script>
$('.hello').html('바보');
</script>
그런데 $() 셀렉터는 그냥 querySelectorAll처럼 여러개가 있으면 전부 찾아줍니다.
그리고 거기에 [0] 이런 식으로 순서지정해줄 필요없이 냅다 .html() 붙이면
셀렉터로 찾은 모든 요소를 한 번에 조작하고 변경해줄 수 있습니다.
<p class="hello">안녕</p>
<button class="test-btn">버튼</button>
<script>
$('.test-btn').on('click', function(){
어쩌구~
});
</script>
addEventListener 대신 on 쓰면 똑같습니다.
on은 $() 이걸로 찾은 것들에만 붙일 수 있습니다.
<p class="hello">안녕</p>
<button class="test-btn">버튼</button>
<script>
$('.test-btn').on('click', function(){
$('.hello').fadeOut();
});
</script>
.hide() 는 사라지게
.fadeOut() 은 서서히 사라지게
.slideUp() 은 줄어들며 사라지게 만들어줍니다.
간단한 애니메이션은 이런 식으로 쉽게 사용가능합니다.
애니메이션을 반대로 주고 싶으면 show() fadeIn() slideDown() 이런게 있습니다.
아니면 fadeToggle() 이런 것도 있음
시작스타일 만들고 (class로)
최종스타일 만들고 (class로)
원할 때 최종스타일로 변하라고 JS 코드짭니다
시작스타일에 transition 추가
A 상태에서 B 상태로만 움직이는 one-way 애니메이션은 다 이렇게 만들면 됩니다.
애니메이션 동작 전 스타일과 동작 후 스타일을 class로 각각 만들어두라는 소리입니다.
.black-bg {
(생략)
visibility : hidden;
opacity : 0;
}
.show-modal {
visibility : visible;
opacity : 1;
}
기존에 있던 display 어쩌구는 다 버리고 이렇게 코드짰습니다.
그거랑 비슷한 역할을 할 수 있는 visibility : hidden 을 사용했습니다.
<div class="black-bg">
<div class="white-bg">
<h4>로그인하세요</h4>
<button class="btn btn-danger" id="close">닫기</button>
</div>
</div>
<button id="login">로그인</button>
<script>
$('#login').on('click', function(){
$('.black-bg').addClass('show-modal');
});
$('#close').on('click', function(){
$('.black-bg').removeClass('show-modal');
});
</script>
.black-bg {
(생략)
visibility : hidden;
opacity : 0;
transition : all 1s;
}
.show-modal {
visibility : visible;
opacity : 1;
}
transition은 스타일이 변할 때 천천히 변경하라는 뜻입니다.
지금 class 탈부착시 opacity가 변하는데 그걸 천천히 1초에 걸쳐 변경해줍니다.
애니메이션 구현 끝
출처 : 코딩애플