📌  JQuery

🧩 jQuery란?

• 무료로 사용할 수 있는 JavaScript 라이브러리
• DOM 탐색, 이벤트 처리, Ajax 요청 등 복잡한 작업을 간단하게 처리

🤔 프레임워크? 라이브러리?

• 라이브러리는 필요한 기능을 가져다 쓰는 도구
  (개발자가 주도적으로 개발)
• 프레임워크는 전체 구조를 주도하고 개발 방식에 제약을 둠 (ex. Angular)
  (개발자가 프레임워크에 맞추어 개발)

---

🔧 주요 기능

• DOM 요소 찾기 및 탐색/수정
• CSS 셀렉터 기반 DOM 조작
• 크로스 브라우징 이벤트 처리
• 특수 효과 및 애니메이션
• Ajax 요청 처리
• JSON 파싱
• 플러그인을 통한 기능 확장

---

🛠️ jQuery 객체 생성 방식

jQuery(document).ready(fn);  // 긴 방식
$(document).ready(fn);       // 축약형

$('#my');           // id 선택자
$('#my > p');       // 자식 요소 선택
$('<h1>테스트</h1>'); // 새로운 요소 생성
$(function() { });   // 문서 로딩 완료 시 실행 (DOMContentLoaded)

🔍 Getter / Setter 메서드

• Getter: 값 얻기
• Setter: 값 설정하기

메서드	설명
val() , val(값)	<input> 요소의 값 가져오기/설정하기
html() , html(값)	요소 내부 HTML 가져오기/설정하기
text() , text(값)	요소 내부 텍스트 가져오기/설정하기

// Getter
const value = $('#input').val();

// Setter
$('#input').val('Hello');

🎨 스타일 및 속성 조작

✅ css()

$('#box').css('color');                      // 값 얻기
$('#box').css('color', 'red');              // 값 설정
$('#box').css('color', i => i % 2 ? 'blue' : 'green'); // 함수로 설정
$('#box').css({ color: 'blue', fontSize: '20px' }); // 여러 개 설정

✅ attr()

• HTML 속성 제어

$('img').attr('src');                         // 값 얻기
$('img').attr('src', 'img.jpg');              // 값 설정
$('img').attr({ alt: '설명', title: '타이틀' }); // 여러 개 설정

🔁 반복

✅ jQuery.each(배열, 함수)

$.each([1, 2, 3], function(index, value) {
  console.log(index, value);
}

✅ .each(함수)

• jQuery 객체 자체를 순회

$('li').each(function(index, element) {
  console.log(index, $(element).text());
});

---

🔗 체이닝 방식

• 대부분 jQuery 메서드는 jQuery 객체를 반환
• 체이닝이 가능해서 코드가 간결해짐

$('#myBox')
  .css('color', 'blue')
  .text('안녕')
  .fadeIn();

🎯 이벤트 바인딩

✅ on() 사용 (이벤트 등록)

// 단일 이벤트
$('#btn').on('click', function() {
  alert('clicked!');
});

// 다중 이벤트
$('#btn').on({
  click: function() { console.log('클릭됨'); },
  mouseenter: function() { console.log('마우스 진입'); }
});

✅ 축약형 메서드 (전용 메서드)

$('#btn').click(function() {
  console.log('클릭!');
});

$('#input').focus(function() {
  console.log('포커스 됨');
});