jQuery-01_basic

jQuery

1. JavaScript를 쉽고 편리하게 사용할 수 있도록 하는 라이브러리이다.
2. 다운로드 : https://jquery.com/
   1) compressed production : 압축된 완성품 (실제 프로젝트에 포함할 라이브러리)
   2) uncompressed development : 압축 안 된 개발용

3. jQuery 사용 방법 (택일)

1) jQuery 라이브러리를 파일로 받아서 <script> 태그로 포함하기
2) CDN을 이용해서 jQuery 라이브러리를 포함하기
4. jQuery 라이브러리는 jQuery를 사용하는 각종 기능(예: jQuery UI 등)보다 먼저 포함해야 한다.

다운로드 받은 jQuery 라이브러리 포함하기

  <script src="../../assets/js/lib/jquery-3.7.1.min.js"></script>

CDN을 이용해서 jQuery 라이브러리 포함하기

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

jQuery wrapper

1. jQuery가 지원하는 메소드를 사용하기 위해서는 jQuery 객체가 필요하다.

2. jQuery 객체를 만들려면 jQuery wrapper로 묶어야 한다.

3. JavaScript 객체를 jQuery wrapper로 묶으면 jQuery 객체가 된다.

4. jQuery wrapper를 이용한 jQuery 객체 만들기

   1) 선택자를 이용한 jQuery 객체
   (1) jQuery(선택자)
   (2) $(선택자)

   2) JavaScript 객체 → jQuery 객체
   (1) jQuery(JavaScript 객체)
   (2) $(JavaScript 객체)

 <div id="box">Hello world</div>
  <script>

    // 1. 선택자를 이용한 jQuery 객체 만들기
    var box = $('#box');
    console.log(box);

    // 2. JavaScript 객체를 jQuery 객체로 바꾸기
    var box = $(document.getElementById('box'));
    console.log(box);

  </script>