jQuery チートシート
検索・印刷できる jQuery リファレンス——セレクター、DOM 操作、イベント、エフェクト、トラバース、AJAX、フォームヘルパー。無料。
セレクタ
14$('#id')
idで要素を選択
$('.class')
クラスを持つ全要素を選択
$('div')
タグ名の全要素を選択
$('*')
ページ内の全要素を選択
$('[name="email"]')
属性値で選択
$('a[href^="https"]')
属性が前方一致するセレクタ
$('ul li:first')
最初にマッチした要素
$('ul li:last')
最後にマッチした要素
$('tr:eq(2)')
0始まりインデックスの要素
$('li:not(.done)')
セレクタにマッチする要素を除外
$(':checked')
チェック済み全チェックボックス/ラジオ
$('div:visible')
現在表示中の要素のみ
$('ul li')
子孫結合子
$('ul > li')
直接の子結合子
ドキュメント準備とDOM
10$(function () { /* ... */ });
DOM準備完了時にコードを実行
$(document).ready(fn)
明示的なdocument-readyハンドラ
$(window).on('load', fn)
全アセット読み込み後に実行
$(this)
現在のコンテキスト要素をラップ
$(el)
生のDOMノードをjQueryでラップ
$('<div class="box"></div>')
HTMLから新規要素を作成
$('#box')[0]
内部のDOMノードを取得
$('#box').get(0)
.get()でDOMノードを取得
$('.item').length
マッチした要素数を取得
$('#box').is(':visible')
セットに対しセレクタを判定
DOM操作
12$('#box').html('<b>Hi</b>')
innerHTMLを設定
$('#box').text('Hello')
テキスト内容を設定(エスケープ)
$('#name').val('Ada')
フォームフィールド値を設定
$('#list').append('<li>x</li>')
末尾にコンテンツを挿入
$('#list').prepend('<li>x</li>')
先頭にコンテンツを挿入
$('#box').before('<hr>')
要素の前にコンテンツを挿入
$('#box').after('<hr>')
要素の後にコンテンツを挿入
$('#box').remove()
要素をDOMから削除
$('#box').empty()
全子ノードを削除
$('#box').clone()
要素のコピーを作成
$('#box').wrap('<div>')
要素を新しいHTMLでラップ
$('#box').replaceWith('<p>')
要素を丸ごと置換
属性とCSS
13$('#img').attr('src')
属性値を取得
$('#img').attr('alt', 'Logo')
属性値を設定
$('#cb').prop('checked')
DOMプロパティを取得 (checked/disabled)
$('#cb').prop('checked', true)
DOMプロパティを設定
$('#img').removeAttr('title')
属性を削除
$('.box').addClass('active')
CSSクラスを追加
$('.box').removeClass('active')
CSSクラスを削除
$('.box').toggleClass('open')
CSSクラスのオン/オフを切り替え
$('.box').hasClass('active')
クラスの有無を判定
$('#box').css('color', 'red')
単一のCSSプロパティを設定
$('#box').css({top: 0, left: 0})
複数のCSSプロパティを設定
$('#box').width()
計算後の幅をピクセルで取得
$('#box').height()
計算後の高さをピクセルで取得
イベント
12$('#btn').on('click', fn)
イベントハンドラを登録
$('#btn').off('click')
イベントハンドラを解除
$('#btn').click(fn)
クリックハンドラの省略形
$('#form').submit(fn)
フォーム送信を処理
$('#sel').change(fn)
値の変更を処理
$('#in').keyup(fn)
フィールドのキーアップを処理
$('#list').on('click', '.item', fn)
動的な子要素向けの委譲イベント
$('#btn').trigger('click')
プログラムでイベントを発火
$('#btn').one('click', fn)
ハンドラを最大1回だけ実行
e.preventDefault()
ブラウザのデフォルト動作を停止
e.stopPropagation()
イベントのバブリングを停止
e.target
イベントを発生させた要素
エフェクトとアニメーション
12$('#box').show()
非表示要素を表示
$('#box').hide()
要素を非表示
$('#box').toggle()
表示/非表示を切り替え
$('#box').fadeIn(300)
要素をフェードイン
$('#box').fadeOut(300)
要素をフェードアウト
$('#box').fadeTo(300, 0.5)
指定の不透明度までフェード
$('#box').slideUp()
要素をスライドアップ(折りたたみ)
$('#box').slideDown()
要素をスライドダウン(展開)
$('#box').slideToggle()
スライドアニメーションを切り替え
$('#box').animate({left: 100})
CSSプロパティをアニメーション
$('#box').stop()
現在のアニメーションを停止
$('#box').delay(500).fadeIn()
次のキュー済みエフェクトを遅延
走査
12$('#box').find('.item')
セレクタにマッチする子孫を検索
$('#box').parent()
直接の親を取得
$('#box').parents('.row')
セレクタにマッチする全祖先を取得
$('#box').closest('.row')
最も近いマッチ祖先(または自身)
$('#box').children()
直接の子を取得
$('#box').siblings()
兄弟要素を取得
$('#box').next()
次の兄弟を取得
$('#box').prev()
前の兄弟を取得
$('.item').each(fn)
マッチした各要素を反復
$('.item').filter('.on')
セレクタでセットを絞り込み
$('.item').first()
セットを最初の要素に絞り込み
$('.item').eq(1)
セットを1つのインデックスに絞り込み
AJAX
11$.ajax({url: '/api', method: 'GET'})
完全制御のAJAXリクエスト
$.get('/api', fn)
HTTP GETリクエストの省略形
$.post('/api', data, fn)
HTTP POSTリクエストの省略形
$.getJSON('/api.json', fn)
JSONを期待するGETリクエスト
$('#box').load('/part.html')
HTMLを要素に読み込み
$.ajax({dataType: 'json'})
期待するレスポンス型を設定
$.ajax({data: {q: 'x'}})
リクエストパラメータを送信
.done(function (res) {})
成功時にコールバックを実行
.fail(function (err) {})
失敗時にコールバックを実行
.always(function () {})
完了後にコールバックを実行
$.ajaxSetup({headers: {}})
全リクエストのデフォルトを設定
フォーム
10$('#form').serialize()
フォームデータをクエリ文字列にエンコード
$('#form').serializeArray()
フォームデータを配列にエンコード
$('#name').val()
フィールド値を取得
$('#name').val('Ada')
フィールド値を書き込み
$(':input')
全フォーム入力要素を選択
$('#cb').is(':checked')
チェックボックスのチェック状態を判定
$('#sel option:selected')
選択中のオプションを取得
$('#in').focus()
フィールドにフォーカスを移動
$('#form').on('submit', fn)
フォーム送信イベントを処理
$('#in').prop('disabled', true)
フォームコントロールを無効化
ユーティリティ
11$.each(arr, fn)
配列またはオブジェクトを反復
$.map(arr, fn)
各項目から新規配列を構築
$.grep(arr, fn)
述語で配列をフィルタ
$.extend({}, a, b)
オブジェクトをターゲットに統合
$.trim(' hi ')
前後の空白をトリム
$.inArray(2, arr)
配列内の項目インデックスを検索
$.isArray(x)
値が配列かどうかを判定
$.isFunction(x)
値が関数かどうかを判定
$.parseJSON(str)
JSON文字列をオブジェクトに解析
$.now()
現在のタイムスタンプ(ミリ秒)
$.type(x)
値の内部型を取得
「:q」に一致する項目はありません。
お困りですか？
このツールで問題が見つかりましたか？チームにお知らせください。