[JavaScript] 자바스크립트 모달창 만들기(jQuery 사용)

See the Pen
자바스크립트 모달창 by dozzs (@dozzs)
on CodePen.

💫 jQuery

write less, do more.

HTML 속 클라이언트 사이드 스크립트 언어를 단순화하도록 설계된 브라우저 호환성이 있는 JavaScript 라이브러리이다. 존 레식(John Resig)에 의해 2006년 뉴욕 시 바캠프(Barcamp NYC)에서 공식적으로 소개되었다.

특장점은 바로 무지하게 쉽고 간편하다는 점이다.

💫 설치

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

위 코드를 HTML 파일에 복붙하면 사용 가능하다.

💫 기본 사용법

1. querySelector

<p class="hello">Dozzing</p>

<script>
    //JavaScript
    document.querySelector('.hello').innerHTML = 'World';
    //jQuery
    $('.hello').html('World'); 
</script>

2. 스타일 변경

<p class="hello">Dozzing</p>

<script>
    //JavaScript
    document.querySelector('.hello').style.color = 'purple';
    //jQuery
    $('.hello').css('color', 'purple');
</script>

3. class 탈부착

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

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

4. HTML 여러 개 바꾸기

<p class="hello">Dozzing</p>
<p class="hello">Dozzing</p>
<p class="hello">Dozzing</p>

<script>
    //JavaScript
    document.querySelectorAll('.hello')[0].innerHTML = 'World';
    document.querySelectorAll('.hello')[1].innerHTML = 'World';
    document.querySelectorAll('.hello')[2].innerHTML = 'World';
    //jQuery
    $('.hello').html('World'); 
</script>

5. 이벤트 리스너

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

<script>
    //JavaScript
    document.querySelector('.test-btn').addEventListener('click', function () {
        document.querySelector('.hello').style.color = 'purple';
    });
    //jQuery
    ('.test-btn').on('click', function(){('.hello').css('color', 'purple');
    });
</script>

6. UI 애니메이션

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

<script>
  ('.test-btn').on('click', function(){('.hello').fadeOut(); //서서히 사라지게
    ('.hello').fadeIn(); //서서히 생기게('.hello').hide(); //사라지게
    ('.hello').show(); //생기게('.hello').slideUp(); //올라가면서 사라지게
    $('.hello').slideDown(); //내려가면서 생기게
  });
</script>