jQuery 치트시트

jQuery의 DOM 탐색, 사용자 정의 의사 선택자, DOM 조작 훅에 대한 빠른 참조 가이드입니다.

DOM 탐색 (Traversal)

$(.box)
  .children(p)        // 선택자와 일치하는 직계 자식 요소
  .closest(div)       // 선택자와 일치하는 가장 가까운 조상 요소
  .filter(:selected)  // 일치하는 요소로 컬렉션 축소
  .find(span)         // 선택자와 일치하는 하위 자손 요소
  .has(ul)            // 일치하는 자손을 포함하는 요소
  .first()              // 일치하는 요소 집합의 첫 번째 요소
  .next(div)          // 바로 다음 형제 요소
  .nextUntil(footer)  // 선택자 전까지의 모든 후속 형제 요소
  .parent()             // 직계 부모 요소
  .siblings()           // 모든 형제 요소

고급 사용자 정의 선택자

jQuery의 의사 클래스 표현식을 확장합니다:

// 사용자 정의 ":inline" 선택자
$.expr[:].inline = function (el) {
  return $(el).css(display) === inline
}

// 사용법
$(span:inline).addClass(highlight)

사용자 정의 CSS 훅

$.cssHooks를 사용하여 속성 읽기 및 쓰기를 가로챕니다:

$.cssHooks.someCustomProp = {
  get: function (elem, computed, extra) {
    return $.css(elem, transform)
  },
  set: function (elem, value) {
    elem.style.transform = value
  }
}

// 기본 "px" 단위 없이 사용자 정의 속성 처리
$.cssNumber["someCustomProp"] = true

애니메이션 단계 훅

$.fn.step.myEffect = function (fx) {
  // 애니메이션 중간 프레임 사용자 정의 로직
}