jQuery 사용법 간단정리

0:36 jQuery 설치 

3:24 여러가지 jQuery 기본 함수

9:38 오늘의 숙제 (모달창 만들기)

오늘의 숙제 : 

버튼하나 아무데나 만들고 버튼 누르면 모달창을 띄워오십시오. 

<div class="black-bg">
  <div class="white-bg">
    <h4>로그인하세요</h4>
    <button class="btn btn-danger" id="close">닫기</button>
  </div>
</div> 

.black-bg {
  width : 100%;
  height : 100%;
  position : fixed;
  background : rgba(0,0,0,0.5);
  z-index : 5;
  padding: 30px;
}
.white-bg {
  background: white;
  border-radius: 5px;
  padding: 30px;
} 

자바스크립트 특징인데 코드가 매우 길고 더럽습니다.

그게 불만이면 html 조작을 쉽게 바꿔주는 라이브러리들을 사용가능합니다.

React, Vue, jQuery 이런 것들이 전부 html 조작 쉽게 바꿔주는 라이브러리들입니다. 

React와 Vue는 자바스크립트 어느정도 문법을 알아야 사용가능하기 때문에 나중에 도전해보시고 

우선 jQuery를 사용해봅시다.

Q. 어 저는 jQuery 말고 자바스크립트 언어를 배우고 싶은데요?

- 아직도 이런 질문하는 분들이 있는데

jQuery는 querySelectorAll, addEventListener 등 이런 html 조작 기능을

훨씬 짧은 이름으로 쓸 수 있게 바꿔주는 라이브러리일 뿐 "다른 언어" 그딴거 아닙니다. 

코드 읽기에 짧고 좋아서 초보자에게 최고의 코딩입문 도구라 일부러 사용합니다.

굳이 싫다면 querySelectorAll로 알아서 길게 쓰면 되겠습니다.

실은 요즘은 React만 오지게 쓰는데 React 쓰면 querySelectorAll 이딴 쌩자바스크립트도 아예 안씁니다.

그래서 어짜피 코딩 입문용으로 배우는건데 마음에 드는거 쓰도록 합시다.

jQuery 설치는

구글에 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() 이런 것도 있음