Jquery를 배워야 하는 이유
자바스크립트 특징인데 코드가 매우 길고 더럽다.
그게 불만이면 html 조작을 쉽게 바꿔주는 라이브러리들을 사용가능하다.
React, Vue, jQuery 이런 것들이 전부 html 조작 쉽게 바꿔주는 라이브러리들입니다.
만약에 외부 라이브러리의 코드가 변경되서, 내부 코드에 영향을 주는 것이 싫다면,
=> 즉, 라이브러리에 대한 의존성을 낮추고 싶다면, 자체적으로 DOM API 코드를 추상화해서 코드량을 줄일 수도 있다.
아무튼, 오늘은 jQuery 정리 시간이니까 jQuery에 대해서 더 알아보도록 하자!!
Q. 어 저는 jQuery 말고 JS를 배우고 싶은데요??
A. jQuery는 자바스크립트 querySelectorAll, addEventListener, classList.add 이런 것들을
이름만 훨씬 짧게 바꿔주는 라이브러리일 뿐 다른 언어가 아니다.
굳이 싫다면 쌩자바스크립트로 알아서 길게 써도 된다.
초보들 코드읽기에 짧고 좋아서 쓰는 것이 jQuery 이다.
그리고 특정 기능 구현도 좀 더 쉽게 된다. 다만, JS가 너무 많은 일이 해야 된다는 단점도 분명있다.
jQuery 설치
가장 간단한 CDN 설치법에 대해서 알아보자!!
구글에 jQuery cdn 이런거 검색하면 나오는 사이트가 있다.
거기서 jQuery 3.x 버전 <script> 태그를 찾아서 여러분들 html 파일에 복붙하면 설치 끝!!
- 검색하기 싫으면, 이거 복붙하면 됨
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
이제 jQuery 설치한 곳 하단에서 jQuery 문법을 사용가능합니다.
jQuery 설치한 곳 상단에 코드짜면서 뭔가 안된다고 그러면 안된다!!
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() 이런 것도 있음!!
jQuery는 사용법이 어렵지 않으니, 필요한 게 있으면 그때 그때 찾아서 사용하자!!
