j-Query 시험 공부

1️⃣ jQuery 개요

• jQuery: 브라우저마다 다른 JS 코드를 통합, DOM 조작/이벤트/비동기 처리 쉽게.
• 장점:
  1. DOM 요소 조작 용이
  2. AJAX, 이벤트 처리 간편
  3. 다양한 플러그인, Open API 지원
• 연결 방법:

---

2️⃣ 문서 준비 완료 후 실행

• 순수 JS: window.onload = function(){ ... } → 문서 완전히 로딩 후 1회 실행
• jQuery:

 

$(document).ready(function(){ ... }); $(function(){ ... }); // 가장 간단

• 특징: 여러 번 사용 가능, DOM 로딩 즉시 실행.

---

3️⃣ 선택자 기본

1. 아이디 선택자: $("#id") → 특정 요소 1개 선택
2. 태그 선택자: $("tag") → 문서 상 모든 태그 선택
3. 클래스 선택자: $(".class") → 같은 클래스 모든 요소 선택
4. 자식/후손 선택자:
   • $("부모 > 자식") : 바로 자식
   • $("부모 자손") : 모든 하위 후손
5. 속성 선택자:
   • [속성=값], [속성~=값], [속성^=값], [속성$=값], [속성*=값], [속성]
6. 입력양식 선택자: :text, :radio, :button, :checkbox, :password, :file, :submit, :reset
7. 상태 선택자:
   • :checked, :selected, :enabled, :disabled

---

4️⃣ 필터링 메소드

• 특정 요소 선택 필터:

 

.first() // 첫번째 .last() // 마지막 .filter() // 조건 만족 .not() // 조건 불만족 .eq(n) // n번째(0부터)

• 짝수/홀수 선택: :even, :odd
• 첫/마지막 행: :first, :last

---

5️⃣ 탐색 순회 메소드

1. 조상 탐색

 

.parent() // 바로 부모 .parents() // 모든 상위 .parentsUntil() // 특정 요소까지

1. 후손 탐색

 

.children() // 바로 자식 .children("선택자") // 바로 자식 중 선택 .find("선택자") // 모든 후손 중 선택

1. 동위 요소 탐색

 

.siblings() // 모든 동위 .siblings("선택자") // 조건 만족 동위 .next() / .nextAll() / .nextUntil() .prev() / .prevAll() / .prevUntil()

---

6️⃣ DOM 내용 관련 메소드

• .html() : HTML 태그 포함 content 가져오기/변경
• .text() : 텍스트만 가져오기/변경
• .val() : value 속성 가져오기/설정
• .attr() : 속성값 가져오기/설정
• .prop() : 상태 관련 속성 제어

---

7️⃣ 요소 생성 및 제거

• 생성:

 

$("<p></p>").text("내용") // jQuery 방식 $("#area").append(el1, el2) // 추가

• 추가 메소드:
  • 내부: .append(), .prepend()
  • 외부: .before(), .after()
  • 반대: .appendTo(), .prependTo(), .insertBefore(), .insertAfter()
• 복제: .clone(true/false) → 이벤트 포함 여부 선택
• 제거/잘라내기:
  • .empty() : 후손 요소 제거
  • .remove() : 요소 제거(이벤트 소멸)
  • .detach() : 요소 제거(이벤트 유지)

---

8️⃣ 시각적 효과

• 표시/숨김:

 

.show() / .hide() / .toggle() .fadeIn() / .fadeOut() / .fadeToggle() .slideUp() / .slideDown() / .slideToggle()

---

9️⃣ jQuery 반복 처리

• each: 배열/객체 순차 접근

 

$.each(array_or_object, function(index/key, value){ ... }); array.each(function(index, value){ ... });

• 배열 → 인덱스, 값
• 객체 → 속성명, 값