🧩 jQuery DOM 조작

📦 요소 이동 vs 복제

메서드	설명
$(요소).appendTo(target)	해당 요소를 target으로 이동시킴 (기존 위치 → 새 위치로 이동)
$(target).append(요소)	target에 요소를 추가함 (요소가 이동함)
.prepend()	target의 맨 앞에 요소 추가
.before()	target 바깥 이전 형제로 요소 삽입
.after()	target 바깥 다음 형제로 요소 삽입

☁️ 예시

$('p').first().appendTo('body');

📑 요소 복제

메서드	설명
.clone()	요소를 복제함 (기본적으로 이벤트는 복사되지 않음)
.clone(true)	이벤트 포함해서 복제

const copy = $('#myBtn').clone(true);
$('body').append(copy);

⚡ 이벤트 강제 발생 - .trigger()

$('button').trigger('click'); // 클릭 이벤트 강제로 실행
$('input').trigger('focus');  // 포커스 강제 부여

// trigger에 데이터 전달도 가능
$('#btn').trigger('customEvent', [1, 2, 3]);
$('#btn').on('customEvent', (e, a, b, c) => console.log(a, b, c)); // 1 2 3

🌐 JQuery AJAX

🍓 $.ajax() 기본 구조

$.ajax({
  url: '요청주소',
  type: 'GET' | 'POST',
  data: { key: 'value' },
  dataType: 'json',   // 응답 형식 (html, json, script, text, xml 등)
  timeout: 3000,      // 응답 제한시간 (ms)
  async: true,        // true(비동기), false(동기)
  success: function (res) {
    console.log(res); // 성공시 처리
  },
  error: function (err) {
    console.error(err); // 실패시 처리
  },
});

옵션명	설명
url	요청 보낼 서버 주소
type	요청 방식 (GET, POST 등)
data	서버로 전송할 데이터 객체
dataType	응답받을 데이터 형식 (기본은 text)
timeout	요청 제한시간 (ms)
async	비동기 여부 (기본 true)
success	성공 시 실행할 콜백 함수
error	실패 시 실행할 콜백 함수

🥝  $.getJSON()

• JSON을 주고받기 쉽게 만든 축약 메서드
• JSON 응답을 자동으로 파싱해서 객체로 넘겨줌

$.getJSON('data.json', { name: '둘리' }, function (result) {
  console.log(result); // 파싱된 객체
});

입력 인자	설명
url	요청 주소
data	서버에 보낼 데이터
callback	응답 성공 시 실행할 함수

🍉 $.load() - HTML 파트 불러오기

• 특정 URL의 특정 요소만 가져오기 가능

$('#result').load('test.html #main'); // test.html의 #main 요소만 불러옴

입력 인자	설명
url	로드할 html 파일 또는 서버 주소
data (선택)	서버에 전송할 데이터
callback (선택)	응답 완료 후 실행할 함수

---

☀️ 알아두기

• url 빠지면 → 현재 페이지로 요청 들어감 (보통 실수)
• fetch()는 JSON 직접 파싱 필요하지만, $.getJSON()은 자동 파싱됨
• dataType을 지정하지 않아도 jQuery가 응답의 MIME 타입을 보고 자동 파싱