자바스크립트는 코드가 매우 길고 복잡한 특징이 있다. 그래서 html 조작을 쉽게 바꿔 주는 라이브러리들을 사용할 수 있다.
React, Vue, jQuery 등이 html 조작을 쉽게 바꿔 주는 라이브러리들이다.
React, Vue는 자바스크립트 문법을 어느 정도 알아야 사용 가능하기 때문에 우선 jQuery를 사용해 보자.
jQuery는 언어가 아니라 라이브러리일 뿐으로 자바스크립트랑 다른 문법을 쓰는 것이 아니라 함수명, 셀럭터 이름들을 짧게 바꿔 주는 것이다.
jQuery 설치
구글에 jQuery cdn 검색하면 나오는 사이트(https://releases.jquery.com/)에서 jQuery 3.x 버전 <script> 태그를 찾아 html 파일에 복사 붙여넣으면 설치는 끝이다.
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="crossorigin="anonymous"></script>
이제 jQuery 설치한 곳 하단에서 jQuery 문법을 사용할 수 있다.
(거의 모든 자바스크립트 라이브러리는 <body> 끝나기 전에 넣는 것을 권장한다.)
jQuery로 HTML 변경
<p class="hello">안녕</p>
<script>
$('.hello').html('반가워');
</script>$("selector")는 요소 선택자로 querySelector와 동일하게 사용하면 된다.
jQuery로 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> 태그 2개 내용을 일괄적으로 '안녕하세요'로 바꾸르면 자바스크립트는 이렇게 3줄을 작성해야 하지만
<p class="hello">안녕</p>
<p class="hello">안녕</p>
<p class="hello">안녕</p>
<script>
$('.hello').html('안녕하세요');
</script>$("selector") 셀렉터는 querySelectorAll처럼 여러개가 있으면 전부 찾아 준다.
거기에 [0] 이런 식으로 순서를 지정해 줄 필요 없이 .html()을 붙이면 셀렉터로 찾은 모든 요소를 한 번에 조작하고 변경할 수 있다.
jQuery로 스타일 변경
<p class="hello">안녕</p>
<script>
$('.hello').css('color', 'red');
</script>(주의) html 셀렉터로 찾으면 html 함수들을 뒤에 붙여야 하고, jQuery 셀렉터로 찾으면 jQuery 함수들을 위데 붙여야 한다.
$("selector").innerHTML 이렇게는 안 된다는 말이다.
jQuery로 class 탈부착
<p class="hello">안녕</p>
<script>
$('.hello').addClass('클래스명');
$('.hello').removeClass('클래스명');
$('.hello').toggleClass('클래스명');
</script>
jQuery로 이벤트 리스너는
<p class="hello">안녕</p>
<button class="test-btn">버튼</button>
<script>
$('.test-btn').on('click', function(){
$('.hello').html('반가워');
});
</script>addEventListener 대신 on을 사용하면 된다.
on은 $()로 찾은 것들에만 붙일 수 있다.
jQuery로 UI 애니메이션은
<p class="hello">안녕</p>
<button class="test-btn">버튼</button>
<script>
$('.test-btn').on('click', function(){
$('.hello').fadeOut();
});
</script>.hide() - 선택 요소 숨김
.fadeIn() / .fadeOut() - 선택 요소 페이드 인/아웃 실행
.slideUp() / .slideDown() - 선택 요소에 슬라이드 업/다운 애니메이션 실행
등 간단한 애니메이션은 이런 식으로 쉽게 사용 가능하다.
* 이 포스팅은 코딩애플 강의를 토대로 작성하였습니다.
