jQuery
주의할 점은 jQuery 스크립트가 자바스크립트의 스크립트 태그보다 위에 위치해야 한다는 것이다.
자바스크립트의 코드 내에서 jQuery를 사용하므로 만약 jQuery가 로딩되지 않은 상태에서 자바스크립트를 불러온다면 자바스크립트의 코드가 제대로 작동하지 않는다.
방법 1)
<body>
html 코드
.
.
.
jQuery 스크립트
javascript 스크립트
</body>방법2) js 파일에 ready() 코드 추가하기
index.html
index.js
$ = document.querySelectorAll
on=addEventListener
jQuery 써서 html 변경하려면
<p class="hello">안녕</p>
<script>
$('.hello').html('바보');
</script>이렇게 코드 양이 절반으로 줄어들어서 쓰는 것일 뿐입니다.
$ 이건 querySelector와 동일하게 사용하면 됩니다.
jQuery 써서 스타일 변경하려면
<p class="hello">안녕</p>
<script>
$('.hello').css('color', 'red');
</script>이러면 css 스타일 변경이 가능합니다.
(주의) html 셀렉터로 찾으면 html 함수들을 뒤에 붙여야하고
jQuery 셀렉터로 찾으면 jQuery 함수들을 뒤에 붙여야 잘됩니다.
$('어쩌구').innerHTML 이건 안된다는 소리입니다.
jQuery 써서 class 탈부착하려면
<p class="hello">안녕</p>
<script>
$('.hello').addClass('클래스명');
$('.hello').removeClass('클래스명');
$('.hello').toggleClass('클래스명');
</script>이러면 됩니다. toggleClass는 왔다갔다 토글해줍니다.
html 여러개를 바꾸려면
<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은 $() 이걸로 찾은 것들에만 붙일 수 있습니다.
UI 애니메이션은
<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() 이런 것도 있음
one-way 일방향 애니메이션 만드는 법
-
시작스타일 만들고 (class로)
-
최종스타일 만들고 (class로)
-
원할 때 최종스타일로 변하라고 JS 코드짭니다
-
시작스타일에 transition 추가
A 상태에서 B 상태로만 움직이는 one-way 애니메이션은 다 이렇게 만들면 됩니다.
1. 시작스타일 2. 최종스타일을 class로 만들어봅시다.
애니메이션 동작 전 스타일과 동작 후 스타일을 class로 각각 만들어두라는 소리입니다.
.black-bg {
(생략)
visibility : hidden;
opacity : 0;
}
.show-modal {
visibility : visible;
opacity : 1;
}기존에 있던 display 어쩌구는 다 버리고 이렇게 코드짰습니다.
- display : none을 주면 애니메이션이 잘 동작하지 않기 때문에
그거랑 비슷한 역할을 할 수 있는 visibility : hidden 을 사용했습니다.
3. 원할 때 최종스타일로 변하라고 자바스크립트 코드짬
<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>4. 시작스타일에 transition 추가
.black-bg {
(생략)
visibility : hidden;
opacity : 0;
transition : all 1s;
}
.show-modal {
visibility : visible;
opacity : 1;
}transition은 스타일이 변할 때 천천히 변경하라는 뜻입니다.
지금 class 탈부착시 opacity가 변하는데 그걸 천천히 1초에 걸쳐 변경해줍니다.
애니메이션 구현 끝
출처 : 코딩애플
