jQuery チートシート

jQuery の DOM トラバーサル、カスタム疑似セレクター、DOM 操作フックのクイックリファレンスです。

DOM トラバーサル（要素探索）

$(.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 を使用して CSS プロパティの読み書きをインターセプト：

$.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) {
  // アニメーションの中間フレームで実行するカスタムロジック
}