07. jQuery

Get started

---

install

<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>

Usage

---

⚠️ html 셀렉터로 찾으면 html 함수들을 뒤에 붙여야 하고 jQuery 셀렉터로 찾으면 jQuery 함수들을 뒤에 붙여야 잘됩니다. $(’어쩌구’).innerHTML() ············· ( x )

innerHTML() / html()

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

// <script>
//   document.querySelector('.hello').innerHTML('바보');
		 $('.hello').html('바보');
// </script>

스타일변경

$('.hello').css('color', 'red');

클래스명 변경

$('.hello').addClass('클래스명');
$('.hello').removeClass('클래스명');
$('.hello').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 = '바보';

     $('.hello').html('바보');
// </script>

이벤트리스너

<p class="hello">안녕</p>
<button class="test-btn">버튼</button>

<script>
  $('.test-btn').on('click', function(){
    어쩌구~
  });
</script>

UI 애니메이션

<p class="hello">안녕</p>
<button class="test-btn">버튼</button>

<script>
  $('.test-btn').on('click', function(){
    $('.hello').fadeOut();
  });
</script>