Jqueryまとめ

■要素の指定方法
　・セレクタで指定
　　$('#[ID名]')、$('.[クラス名]')、$('[HTML]')

　・親子関係で指定
　　$('基準要素 > 対象')・・・基準要素に対し、
　　　　　　　　　　　　　　　　　　１階層下に対象要素があると返します
　　$('基準要素 対象')・・・・基準要素に対し、
　　　　　　　　　　　　　　　　　　その配下に対象要素があると返します。

■要素の絞り込み
　・絞り込む(1)
　　複数の要素を取得した場合、取得した要素の番号で絞り込む
　　$('[複数の要素]:eq(インデックス番号)')・・・番号に一致する要素を返す
　　$('[複数の要素]:lt(インデックス番号)')・・・番号未満の要素を返す
　　$('[複数の要素]:gt(インデックス番号)')・・・番号より大きい要素を返す
　　$('[複数の要素]:even')・・・偶数番目の要素だけ返す
　　$('[複数の要素]:odd')・・・奇数番目の要素だけ返す
　　$('[複数の要素]:first')・・・最初の要素だけ返す
　　$('[複数の要素]:last')・・・最後の要素だけ返す
　　$('[複数の要素]:not([条件])')・・・条件で指定した要素以外の要素を返す

　・絞り込む(2)
　　複数の要素を取得した場合、子要素の内容でさらに絞り込む
　　$('[複数の要素]:contains([テキスト])')・・・子要素に[テキスト]を持っている場合返す
　　$('[複数の要素]:has([セレクタ])')　　・・・子要素に[セレクタ]を持っている場合返す
　　$('[複数の要素]:has')　・・・子要素に何かある場合返す
　　$('[複数の要素]:empty')・・・子要素に何もない場合返す

　・絞り込む(3)
　　複数の要素を取得した場合、子要素のインデックス番号でさらに絞り込み該当する子要素を返す
　　$('[複数の要素]:first-child')・・・最初の子要素を返す
　　$('[複数の要素]:last-child')・・・最後の子要素を返す
　　$('[複数の要素]:nth-child(インデックス番号)')・・・インデックス番号目の要素を返す。ただし最初の番号は１となる
　　$('[複数の要素]:only-child')・・・１つの子要素を持つ場合その要素を返す

　・絞り込む(4)
　　可視状態で絞る
　　$('[複数の要素]:hidden')・・・display:none/type="hidden"にマッチ
　　$('[複数の要素]:visible')・・・上記以外

　・絞り込む(5)
　　属性で絞る
　　$('[属性]')・・・該当する属性全ての要素を返す
　　$('[属性 = 値]')・・・該当する属性のうち値に一致する全ての要素を返す
　　$('[属性 != 値]')・・・該当する属性のうち値に一致しない全ての要素を返す

　　$('[属性 ^= 値]')・・・該当する属性のうち値に前方一致する全ての要素を返す
　　$('[属性 *= 値]')・・・該当する属性のうち値に部分一致する全ての要素を返す
　　$('[属性 $= 値]')・・・該当する属性のうち値に後方一致する全ての要素を返す

　　$('[属性 |= 値]')・・・該当する属性のうち値に該当または直後にハイフン(-)がつく全ての要素を返す
　　$('[属性 ~= 値]')・・・該当する属性のうち値に該当または直後にスペースがつく全ての要素を返す
　　属性の指定は複数同時可

■[clone]対象要素を複製する
$(対象).clone()

■削除する
　・[detach]対象要素を削除し、変数にとっておく
　　$(対象).detach();
　　$(対象).detach([セレクタ]);

　・[remove]対象要素を削除する
　　$(対象).remove();
　　$(対象).remove([セレクタ]);

　・[empty]対象要素の子ノードを削除する
　　$(対象).empty();

■対象要素(外側)の前後に追加
　・[after]新規にテキスト、HTMLを対象要素の後に追加
　　$(対象).after(内容);
　　$(対象).after(function(){ 処理 });

　・[before]新規にテキスト、HTMLを対象要素の前に追加
　　$(対象).before(内容);
　　$(対象).before(function(){ 処理 });

■対象要素(内側)の前後に追加
　・[append]新規にテキスト、HTMLを対象要素の最後に追加(対象要素の内側最後)
　　$(対象).append(内容);
　　$(対象).append(function(){ 処理 });

　・[prepend]新規にテキスト、HTMLを対象要素の最後に追加(対象要素の内側最後)
　　$(対象).prepend(内容);
　　$(対象).prepend(function(){ 処理 });


■[replaceWith]該当する要素を入れ替える
　　$(対象).replaceWith()
　　$(対象).replaceWith(function(){ 処理 })

■該当要素をwrapする
　・[wrap]対象要素を個別に指定要素で包む
　　$(対象).wrap(要素)
　　$(対象).wrap(function(){ 処理 })

　・[unwrap]対象要素を個別に包んでる要素を削除する
　　$(対象).unwrap(親要素)
　　$(対象).unwrap(function(){ 処理 })

　・[wrapAll]該当する対象要素全てを指定要素で包む
　　$(対象).wrapAll(要素)

　・[wrapInner]対象要素を個別にそれぞれの要素を包む
　　$(対象).wrapInner(要素)

■[html]対象要素のhtmlを操作
　　・対象要素のHTMLを取得
　　　var 変数 = $(対象).html()
　　
　　・対象要素のhtmlを変更
　　　$(対象).html(HTML)
　　　$(対象).html(function(){ 処理 })

■[text]対象要素のテキストを操作
　　・対象要素のtextを取得
　　　var 変数 = $(対象).text()
　　
　　・対象要素のtextを変更
　　　$(対象).text(文字列)
　　　$(対象).text(function(){処理})

■[val]対象要素(input)の値を操作
　　・対象要素(input)の値を取得
　　　var 変数 = $(対象).val()

　　・対象要素(input)の値を変更
　　　$(対象).val(値)
　　　$(対象).val(function(){処理})


■クラスについて
　・[addClass]対象要素にクラスを追加する
　　$(対象).addClass(内容);
　　$(対象).addClass(function(){ 処理 });

　・[removeClass]対象要素にクラスを削除する
　　$(対象).removeClass(内容);
　　$(対象).removeClass(function(){ 処理 });

　・[hasClass]対象要素にクラスがあるか調べる
　　$(対象).hasClass(クラス名); //true, falseを返す

■属性値について
　・[attr]属性値を取得
　　$(対象).attr(属性)

　・[attr]属性値を設定
　　$(対象).attr(属性, 値)
　　$(対象).attr(属性, function(){})
　　$(対象).attr({属性1: 値1, 属性2: 値2})

　・[removeAttr]属性値を削除
　　$(対象).removeAttr(属性)


■イベント
　・クリック
　　$(対象).click(function(e){ 処理 });
　　　$(対象).click();で強制的にクリックを発生できる

　・ダブルクリック
　　$(対象).dblclick(function(e){ 処理 });
　　　$(対象).dblclick();で強制的にダブルクリックを発生できる

　・マウス移動
　　$(対象).mousemove(function(e){ 処理 });

　・マウスボタン
　　$(対象).mousedown(function(e){ 処理 });
　　$(対象).mouseup(function(e){ 処理 });

　・マウスインアウト
　　$(対象).mouseenter(function(e){ 処理 });
　　$(対象).mouseleave(function(e){ 処理 });
　　$(対象).hover(function(e){ 入る処理 },function(e){ 出る処理 });

　・キー
　　$(対象).keydown(function(e){ 処理 });
　　$(対象).keyup(function(e){ 処理 });

　・フォーカス
　　$(対象).focus(function(e){ 処理 });
　　$(対象).blur(function(e){ 処理 });
　　$(対象).focusin(function(e){ 処理 }); イベントがバブリングする
　　$(対象).focusout(function(e){ 処理 });イベントがバブリングする

　・フォーム変更
　　$(対象).change(function(e){ 処理 });
　　input/textarea/select

　・テキスト選択
　　$(対象).select(function(e){ 処理 });
　　input type="text"/textarea
　　キャレット等はプラグインでも探すっと。

　・送信
　　$(対象).submit(function(e){ 処理 });

　・エラー
　　$(対象).error(function(e){ 処理 });

　・リサイズ
　 $(対象).resize(function(e){ 処理 });

　・スクロール
　　$(対象).scroll(function(e){ 処理 });

　・ロード
　　$(対象).load(function(e){ 処理 });
　　$(window).unload(function(e){ 処理 });
　　$(document).read(function(e){ 処理 });

　・イベントセット
　　$(対象).bind(たいぷ、[データ]、処理);
　　$(対象).bind({たいぷ: 処理, たいぷ: 処理})

　・イベント解除
　　$(対象).unbind(たいぷ、処理);
　　$(対象).unbind(たいぷ);
　　$(対象).unbind();


e.target・・・発生時点の要素
e.timestamp・・・発生時刻(秒)
e.pageX・・・X座標
e.pageY・・・Y座標
e.type・・・イベントの種類
e.which・・・キー情報

e.preventDefault()・・・・・・・・・デフォルト操作キャンセル
e.stopPropagation()・・・・・・・・ バブリングキャンセル、イベント実行
e.stopImmediatePropagetion()・・・・バブリング、イベントキャンセル
e.isDefaultPrevented()・・・・・・・preventDefaultを実行したか判定
e.isPropagationStopped()・・・・・・PropagationStoppedを実行したか判定
e.isImmediatePropagationStopped()・・ImmediatePropagationStoppedを実行したか判定

■CSS
　・取得/変更
　　var 変数 = $(対象).css(プロパティ名);
　　$(対象).css(プロパティ, 値);
　　$(対象).css({プロパティ:値, プロパティ:値, プロパティ:値});
　　プロパティ名にハイフンはあるものは、ハイフンとって大文字にする

　・高さ/幅(1)[height/widthを返す]
　　var 変数 = $(対象).height();
　　$(対象).height(値);
　　var 変数 = $(対象).width();
　　$(対象).width(値);

　・高さ/幅(2)[height/width + paddingを返す]
　　var 変数 = $(対象).innerHeight();
　　var 変数 = $(対象).innerWidth();

　・高さ/幅(3)[height/width + padding + borderを返す]
　　var 変数 = $(対象).outerHeight();
　　var 変数 = $(対象).outerWidth();

　・高さ/幅(4)[height/width + padding + border + marginを返す]
　　var 変数 = $(対象).outerHeight(true);
　　var 変数 = $(対象).outerWidth(true);

　・絶対位置/相対位置(基準は、親要素)
　　var 変数 = $(対象).offset(); //変数.top, 変数.leftを持つ
　　$(対象).offset({top:値, left:値});
　　var 変数 = $(対象).position(); //変数.top, 変数.leftを持つ
　　$(対象).position({top:値, left:値});

　・スクロール 縦/横
　　var 変数 = $(対象).scrollTop();
　　$(対象).scrollTop(値);

　　var 変数 = $(対象).scrollLeft();
　　$(対象).scrollLeft(値);

　・クラスのトグル
　　$(対象).toggleClass(クラス);

■$.each(配列, 関数)
途中で抜ける時は、return false;