[JS] Level 1(3)

jQuery 사용법 간단정리

---

• HTML 조작문법을 쉽게 바꿔주는 라이브러리: jQuery, React, Vue 등
• 설치
  • jQuery cdn 검색, 3.x 버전 복붙

      <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 기본 함수
  • document.querySelector > $
  • innerHTML > html
  • style.어쩌구 > css
  • addClass
  • removeClass
  • toggleClass
  • addEventListener > on
  • UI 애니메이션
    • hide() fadeOut() slideUp() show() fadeIn() slideDown() fadeToggle() 등
• jQuery 셀렉터 뒤엔 jQuery 함수를, 자바스크립트 셀렉터 뒤엔 자바스크립트 함수를.

버튼 누른 뒤 모달창 띄우기(숙제)

• 닫기 기능 추가

모달창만들기와 간단한 애니메이션

---

UI 애니메이션 추가

• 간단한 함수로 가능

    $('.btn-modal').on('click', function(){
        $('.black-bg').fadeIn();
    })
    $('#close').on('click', function(){
        $('.black-bg').fadeOut();
    })
  

• 성능저하 피하기 위해 CSS만으로 처리하는 것이 좋음
• one-way UI 애니메이션
  • A상태 > B상태. 일방향 애니메이션
  • 1.시작스타일 2.최종스타일을 CSS로 각각 만든 뒤 3.원할 때 최종스타일로 변경하는 JS 코드 작성 4.시작스타일에 transition 추가
• 애니메이션 줄 때 display:none 대신 visibility: hidden 사용
  • 용도는 비슷하나 none은 아예 없애는 것, hidden은 숨기는 것
• transition: all 1s: 모든 CSS 요소가 변경이 될 때 1초 걸림

모달 창 위에서 내려오는 애니메이션, Nav 바 펼치고 접히는 애니메이션 구현(숙제)

• 위에서 내려오는 애니메이션은 transform: translateY(-10%) 사용
• 접히는 애니메이션은 height를 px로 조절 / overflow : hidden 사용

폼만들며 배워보는 if else

---

모달창 안에 form 만들기

• <form>안의 <button>주의
  • 전송버튼은 type="submit" 일반버튼은 type="button"
• form은 서버로 전송하기 위해 사용

전송버튼 클릭시 첫번째 input에 입력된 값이 공백이면 아이디 입력하라고 알림 띄우기(숙제)

• 공백체크 위해 조건문 사용
• .val().trim() == ''으로 공백체크
• e.preventDefault()로 폼 전송 막기
• 브라우저 기본 기능으로 alert 사용시 팝업 생성
• 비밀번호 공백체크 기능 추가