상세 컨텐츠

본문 제목

jQuery 사용법 간단정리

자바스크립트

by front-hyun 2024. 2. 3. 09:02

본문

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

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

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

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

우선 jQuery를 사용해봅시다.

 

 

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

A. jQuery는 자바스크립트 querySelectorAll, addEventListener, classList.add 이런 것들을

이름만 훨씬 짧게 바꿔주는 라이브러리일 뿐 다른 언어 그런거 아닙니다. 

굳이 싫다면 쌩자바스크립트로 알아서 길게 쓰도록 합시다. 

초보들 코드읽기에 짧고 좋아서 쓰는 것임 

 

 

 

 

 

 

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

 

 

오늘의 숙제 : 

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

 

모달창 디자인은

 

  <button class="open-btn">열기</button>

    <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, css를 복사붙여넣기 하면 모달창이 보입니다.

html은 <body>태그 내부 가장 위에 붙여넣기 하면 잘보입니다. 

평소엔 숨겨놓았다가 버튼 누르면 모달창을 띄워보십시오.

 

 

내 코드

닫기 버튼 누르면 모달창이 사라지고, 열기 버튼 누르면 모달창 보이도록 씀

 <script>
      $("#close").on("click", function () {
        $(".black-bg").css("display", "none");
      });
      $(".open-btn").on("click", function () {
        $(".white-bg").show();
      });
    </script>

 

 

 

모달창이 위에서 내려오도록 / 서브메뉴 접었다 폈다 할 수 있도록

 

.alert-box {
  background-color: skyblue;
  padding: 20px;
  color: white;
  border-radius: 5px;
  display: none;
}
.list-group {
  height: 0px;
  overflow: hidden;
  transition: all 1s;
}

.show {
  height: 400px;
}

.black-bg {
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  z-index: 5;
  padding: 30px;
  visibility: hidden;
  opacity: 0;
  transition: all 1s;
  top: -100%;
}
.white-bg {
  background: white;
  border-radius: 5px;
  padding: 30px;
}

.show-modal {
  visibility: visible;
  opacity: 1;
  top: 0;
}

 

 

앞서 설명한 텍스트랑 버튼 애니메이션 제작 코드 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="css/animation.css" rel="stylesheet" />
    <script
      src="https://code.jquery.com/jquery-3.7.1.min.js"
      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <p class="text">안녕하세요 12기 아기사자입니다~</p>
    <button class="btn">성장중</button>

    <script>
      //3. 원할 때 최종스타일로 변하라는 JS 코드 작성
      $(".btn").on("click", function () {
        $(".text").addClass("size-up");
        $(".btn").addClass("move");
      });
    </script>
  </body>
</html>
/* 1. 시작 스타일 class
4. 시작 스타일에 transition 추가하기 */
.text {
  font-size: 15px;
  color: #3498db;
  font-weight: 800;
  transition: all 1s;
}
.btn {
  margin-left: 10px;
  padding: 10px 20px;
  background-color: #3498db;
  color: #fff;
  border: none;
  border-radius: 5px;
  transition: all 1s;
}

/* 2. 최종 스타일 class */
.size-up {
  /* 글자 크기 애니메이션 */
  font-size: 20px;
}
.move {
  /* 버튼 애니메이션 */
  margin-left: 300px;
}

'자바스크립트' 카테고리의 다른 글

폼만들며 배워보는 if else  (0) 2024.02.14
모달창만들기와 간단한 애니메이션  (0) 2024.02.03
서브메뉴 만들어보기와 classList 다루기  (0) 2024.01.29
자바스크립트 이벤트리스너  (0) 2024.01.27
동적 UI 만드는 스텝 (Alert 박스 만들기)  (0) 2024.01.27

관련글 더보기

티스토리툴바