Jquery 기본 문법

Jquery란?

• HTML 요소들을 조작하는 Javascript를 미리 작성해둔 라이브러리

★라이브러리이기 때문에 사용 전에 head 태그 안에 import 필요

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Javascript vs Jquery 코드 비교

<!-- javascript -->
document.getElementById('target').style.color = 'red';

<!-- jquery -->
$('#target').css('color', 'red');

- Javascript 보다 직관적으로 표현 가능
- 대상을 지정하기 위해 id값을 사용

HTML 요소 변경하기

• 태그를 한 개만 변경하는 경우
  

  let a = '수박'
  $('#fruit').text(a)

$('#fruit').text(a) : fruit라는 id값을 가지고 있는 태그의 내용을 a에 담긴 수박으로 변경

• 태그를 여러개 변경하는 경우
  

  $('#person').empty();
  people.forEach(a => {
    let name = a['name'];
    let age = a['age'];
    let temp_html = `<p>${name}는 ${age}살입니다.</p>`;
    $('#person').append(temp_html);
  });

$('#person').empty() : person의 id값을 가지고 있는 태그의 내부를 비움
people.forEach() : 데이터가 여러개이기 때문에 반복문 사용
let temp_html = `<p>${name}는 ${age}살입니다.</p>`; :
- 변수에 html 내용을 담고 싶다면 `` (백틱) 을 사용
- html 내용 안에 다른 변수에 설정된 값을 사용하고 싶다면 ${변수명}을 사용

• 버튼으로 입력창 열고 닫기(toggle)
  

$('#inputbox').toggle() : 두 가지 상태 사이를 전환하는 동작, 즉 어떤 속성이나 상태를 켜거나 끄는 동작

• 버튼으로 새로운 요소를 추가하는 경우
  

<button onclick="addCard()"> 카드 추가 </button>
$('#버튼 id').click()

: 버튼에 클릭 이벤트(onclick) 설정 또는 Jquery로 클릭 이벤트 설정