jQuery

jQuery는 html 조작을 쉽게 바꿔주는 javascript의 라이브러리이다.(+ 자바스크립트 문법을 간단하고 짧게 만들어서 쓸 수 있다.)

jQuery 사용법

https://releases.jquery.com/에 들어가서
jQuery 3.x 버전의 minified를 눌러 나오는 코드를 복사하여 body 태그 가장 밑에 붙여넣기 하면 된다.

jQuery 써서 html 변경

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

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

.html을 사용하여 원래의 html "안녕"을 "바보"로 바꿔줄 수 있다.

jQuery를 사용한 스타일 변경

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

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

이 방식을 사용하면, class가 hello인 것의 css를 바꿔줄 수 있다.(color를 red로)

jQuery 써서 class 탈부착

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

<script>
 $('.hello').addClass('ex'); //hello 클래스에 ex클래스 부착
 $('.hello').removeClass('ex'); //hello 클래스에 ex클래스 탈착(ex 클래스가 붙어있는 경우)
 $('.hello').toggleClass('ex'); // hello 클래스에 ex클래스를 탈부착(ex클래스가 없다면 부착, 있다면 탈착) 
</script>

jQuery를 사용한 이벤트리스너

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

<script>
  $('.test-btn').on('click', function(){
    실행해야할 코드     //test-btn 클래스인 버튼을 누르면 다음 코드를 실행시켜준다.
  });
</script>

jQuery에서는 addEventListener 대신 on을 사용하여 같은 효과를 낼 수 있다.

jQuery를 이용한 UI 애니메이션

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

<script>
  $('.test-btn').on('click', function(){
    $('.hello').fadeOut(); //test-btn 클래스인 버튼을 누르면 hello 클래스를 fadeout시켜준다.
  });
</script>

.hide() 는 사라지게 .show()는 보이게
.fadeOut() 은 서서히 사라지게 .fadeIn()은 서서히 보이게
.slideUp() 은 줄어들게 .slideDown()은 커지게 하는 애니메이션 효과를 줄 수 있다.

one-way 일방향 UI 애니메이션 만드는 법

1.시작스타일로 만들고(class로)
2.최종스타일 만들고 (class로)
3.원할 때 최종스타일로 변하라고 JS 코드짭니다
4.시작스타일에 transition 추가
A 상태에서 B 상태로만 움직이는 one-way 애니메이션은 다 이렇게 만들면 됩니다.

시작 스타일과 최종 스타일의 클래스 css 만들기

.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;
  }
.show-modal { // 최종 스타일 
    visibility: visible;
    opacity: 1;
 }

visibility를 안보이는 것에서 시작해서 보이는 것으로 변화시킨다.
opacity(투명도)를 0(투명)에서 시작해서 1(불투명)로 변화시킨다.
transition all 1s : 이 모든 효과를 1초 동안 적용시킨다.

예제코드

//html 소스코드
<div class="black-bg">
        <div class="white-bg">
          <h4>로그인하세요</h4>
          <button class="btn btn-danger" id="close">닫기</button>
        </div>
    </div>
    <button id="login">로그인</button>
    <script>
        $('#login').on('click', function(){
            $('.black-bg').addClass('show-modal'); //로그인 버튼을 누르면, black-bg 클래스에 show-modal 클래스를 추가한다.(black-bg는 안보이고, show-modal은 보이기 때문에 black-bg 창이 보이기 시작한다.)
        });
        $('#close').on('click',function(){
            $('.black-bg').removeClass('show-modal'); //닫기 버튼을 누르면, black-bg 클래스에 show-modal 클래스를 제거한다.(다시 black-bg의 css 상태인 invisible 상태로 돌아간다.)
        });

//css 소스코드
.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;
  }
  .white-bg {
    background: white;
    border-radius: 5px;
    padding: 30px;
  }
.show-modal {
    visibility: visible;
    opacity: 1;
 }

주의 : css파일은 위에서부터 코드를 읽기 때문에 나중에 덮어씌어질 css 효과를 밑에다 적는다.
예) css 파일에서 hidden인 black-bg 클래스를 visible인 show-modal 클래스보다 위에 작성한다.

출처 : 코딩애플(https://codingapple.com/)