[JS] 말로만 듣던 jQuery 👀 간단 정리

Nino_ 2022. 10. 5. 12:12

html 조작을 쉽게 바꿔주는 라이브러리에는 React, Vue, jQuery 등이 있는데..

React와 Vue는 자바스크립트 어느 정도 문법을 알아야 사용 가능하니🥲 jQuery를 먼저 알아보자!
(jQuery는 자바스크립트 querySelectorAll, classList.add 이런 것들을 이름만 훨씬 짧게 바꿔주는 라이브러리다)

jQuery 설치하기

구글링 후 jQuery 3.x 버전 <script> 태그를 찾아서 html 파일에 복붙하면 설치 끝이다 (초 - 간단)

그것마저 귀찮으면 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 문법을 사용할 수 있다

위치가 바뀌면 오류가 나니 주의하기!

+ 거의 모든 자바스크립트 라이브러리는 </body> 전에 넣는 걸 권장한다고 한다

이 강의에서는 (로딩 속도는 느려지지만) 가독성을 위해 <head> 태그 안에다가 작성했다

jQuery 를 써보자 😼

jQuery 를 쓰면 코드 양이 절반 가량으로 줄어든다!

ex) 기존에 작성해 놓았던 코드를 바꿔보자

$ === querySelector / querySelectorAll

on === addEventListener

<!-- javascript -->
<script>
        document.querySelectorAll('.navbar-toggler')[0].addEventListener('click', 
            function(){
                document.querySelectorAll('.list-group')[0].classList.toggle('show');
        });        
</script>

<!-- jQuery -->
<script>
	 $('.navbar-toggler').on('click', function(){
                $('.list-group').toggleClass('show');
        });  
</script>

**주의

html 셀렉터로 찾으면 html 함수를 뒤에 붙여야하고
jQuery 셀렉터로 찾으면 jQuery 함수를 뒤에 붙여야 잘 된다.

ex)
$('어쩌구').innerHTML → X

$('어쩌구').html(' ') → O

1️⃣ html 변경하기

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

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

2️⃣ css 변경하기

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

<script>
  $('.hello').css('color', 'red');
</script>

3️⃣ class 탈부착하기

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

<script>
  $('.hello').addClass('클래스명');
  $('.hello').removeClass('클래스명');
  $('.hello').toggleClass('클래스명');
</script>

4️⃣ html 여러 개 바꾸기

자바스크립트에서 태그 3개 내용을 일괄적으로 '바보'로 바꾸려면,

아래와 같이 3줄을 써야 한다

<!-- javascript 사용 -->

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

그러나 jQuery 에서는..

$() 셀렉터는 그냥 querySelectorAll처럼 여러개가 있으면 전부 찾아준다

그리고 거기에 [0] 이런 식으로 순서를 지정할 필요 없이 .html() 을 붙이면
셀렉터로 찾은 모든 요소를 한 번에 조작하고 변경해줄 수 있다

<!-- jQuery 사용 -->

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

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

5️⃣ 이벤트리스너 사용하기

addEventListener 대신 on 쓰면 된다

on은 $() 이걸로 찾은 것들에만 붙일 수 있다

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

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

5️⃣ 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로 변환했다

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

- 로그인 버튼을 클릭하면 모달창 띄우기

- 닫기 버튼을 누르면 모달창 숨기기

- show 클래스(css로 작성한 부분)는 이전에 자바스크립트 강의에서 실습할 때 사용한 게 있어서 새로 만들지 않고,

해당 코드를 불러오는 방식으로 재사용했다

<!-- jQuery-->
<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>
<script>
   $('.login-btn').on('click', function(){
           $('.black-bg').toggleClass('show');
   });
   $('.btn-danger').on('click', function(){
           $('.black-bg').css('display', 'none');
   })
</script>

로그인 버튼을 누르면 .black-bg 클래스에 .show 클래스가 추가되어

display: block 이 되도록 설정했다

/* css */
.black-bg {
    display: none;
    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;
} 

.show {
    display: block;
}

'Web > JavaScript' 카테고리의 다른 글

[JS] if else 연습문제 풀이 📖 (1)	2022.10.19
[JS] 폼 만들며 배워보는 if else 🧐 (1)	2022.10.19
[JS] 서브메뉴를 만들자! classList 🗂 다루기 (2)	2022.10.04
[JS] 이벤트리스너: 들을게 👂 (2)	2022.10.04
[JS] function에 구멍을 뚫어보자 🔫 파라미터 (2)	2022.10.04

Nino's DevLog