231230 | Notion

JQuery사용법 간단 정리

자바스크립트 코드를 html코드내 삽입하다가… 이를 쉽게 가능케 해주는 라이브러리들이 등장했다. 이들이 jQuery, React, Vue등이다.

우리는 비교적 쉬운 jQuery를 사용할 것임. jQuery에서는 저번에 작성한 아래 코드를 예로 들면,

<script>

    document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){
      document.getElementsByClassName('list-group')[0].classList.toggle('show');
    })

  </script>

쿼리 셀렉터는 $ 으로, addEventListner같은 경우는 on으로 키워드가 단순해진다.

<script>

    $('navbar-toggler')[0].on('click', function(){
      document.getElementsByClassName('list-group')[0].classList.toggle('show');
    })

  </script>

jQuery어떻게 쓰는지 알아보자. 자바스크립트와 문법이 달라지는건 아니고, 키워드가 더 짧아질 뿐임.

jQuery CDN – Latest Stable Versions

구글에 jQuery CDN을 검색해

Untitled

제이쿼리 3.x버전의 minified를 클릭하면 나오는 스크립트 파일을 html문서 바디에 추가하자.

이제 html도큐먼트에서 해당 스크립트가 설치(?)된 곳 하단부터 jQuery 문법을 사용가능하다.

이제 제이쿼리의 장점을 알아보자.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="04Submenu.css">
  </head>
  <body>
    <script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js>" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    <script src="<https://code.jquery.com/jquery-3.7.1.min.js>" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>  
	<!-- 이 하단부터 jQuery문법 사용 가능 -->

    **<p class = "hello">안녕</p>**
    
</body>
</html>

여기서 <p>태그 내의 콘텐츠를 ‘안녕’에서 ‘바보’로 바꿔보자.

// document.querySelector('.hello').innerHTML = '바보';
$('.hello').html('바보')

이런 아주 단순한 문법이 된다.