🖋️ JQuery 튜토리얼

• 이름만 훨씬 짧게 바꿔주는 라이브러리

• jquery 설치

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" 
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous"></script>

...

• html 구조

<p class="text">안녕</p>

• script 사용

// 일반 Script
document.querySelector('.text').innerHTML = '바이';

// JQuery html 설정
$('.text').html('바이');

• JQuery 그 외 사용

// CSS 설정
$('.text').css('color', 'blue');

// Class 탈부착 코드
$('.text').addClass('show');
$('.text').removeClass('show');
$('.text').toggleClass('show');

• $(.className) 은 querySelectAll 과 같음

<p class="text">안녕</p>
<p class="text">안녕</p>
<p class="text">안녕</p>

// javascript
<script>
$('.text').html('바이');
</script>  

• 결과

바이
바이
바이

• JQuery eventListener

<button class="enter-btn">등록버튼</button>

<script>
// click event
$('.enter-btn').on('click', () => {
   // 간단한 UI 용 애니메이션
   $('.text').slideUp();   
   $('.text').hide();
});
</script>