JQuery 기초1

▶️ jQuery 설치

  <script
    src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
    crossorigin="anonymous"></script>

  <script src="파일경로"></script>

HTML에 해당 코드를 복붙한다. 혹은 제이쿼리 홈페이지에서 파일을 다운 받은 후 아래와같이 HTML에 복붙한다.

---

▶️ jQuery 기본 문법

  document.getElementById('title').innerHTML = 'hello';
  $('#title').html('hello');

윗줄은 js, 아래는 jQuery이다. 페이지 내의 ID가 title이라는 요소를 찾아서 내용을 'hello'로 바꾸라는 뜻이다.

---

▶️ jQuery 셀렉터

  $('#title'); 
  $('.box')

jQuery는 HTML찾는 셀렉터를 $() 를 이용해 사용한다. 그리고 따옴표 안에 CSS 스타일의 셀렉터를 적어준다. 요소명 앞에.을 붙이면 class, #을 붙이면 id이다.

---

▶️ jQuery 함수/메소드

  $('#title').text('hi'); 
  $('#title').html('<p>hi</p>'); 
  $('#title').css('color', 'red'); 

.text 는 안에있는 모든 텍스트를 변경하라
.html 은 안에있는 모든 내용을 변경하라 (HTML 태그 포함)
.css 는 스타일속성을 변경하라
라는 뜻이다.

---

▶️ 제이쿼리의 장점 1.

  <p class="greeting">안녕하세요</p>
  <p class="greeting">안녕하세요</p>
  <p class="greeting">안녕하세요</p>

  document.getElementsByClassName('greeting')[0].innerHTML = '안녕';
  document.getElementsByClassName('greeting')[1].innerHTML = '안녕';
  document.getElementsByClassName('greeting')[2].innerHTML = '안녕';

$('.greeting').html('안녕')

jQuery를 쓸 경우 자바스크립트를 사용할 때에 비해 코드가 매우 짧아진다.
(jQuery로 찾은 여러 요소 중 맨 위의 것만 바꾸고 싶은 경우 $('.greeting').eq(0)를 입력한다.

---

▶️ 제이쿼리의 장점 2.

  $('menu').hide(); 
  $('menu').show(); 
  $('menu').slideUp(); 
  $('menu').slideDown();
  $('menu').slideToggle();
  $('menu').fadeOut(); 
  $('menu').fadeIn(); 
  $('menu').fadeToggle(); 
  $('menu').toggle(); 

다음과 같이 애니메이션을 쉽게 부착 가능하다.

---