JQueryをまともに使わなければなー、ということで自分用の覚え書きを書いておきます。
セットアップ
通常の JavaScript のようにホストに設置しても良いし、JQuery の公式や Google が提供している API 経由で読み込ませてもOK。
<script src="jquery-1.11.0.min.js"></script>
基本
エレメントには、$() でアクセスする。
<div id="hoge"></div>
$("#hoge").text("hello, world");
$("#hoge").css("background", "#FFFF00");
getElementById をとってきて innerHTML をいじくるような面倒くさいことはない。
#hoge は id="hoge"、.hoge は class="hoge" というふうに ID や Class で指定可能。
タグで指定する場合は $('div') となる。また、複数のエレメントを指定するには、$('#foo,#bar') のようにカンマ区切りも可能。
メソッド
引数なしで呼ぶと取得、引数を渡せばその引数で設定。
text()
div内などのプレーンテキストhtml()
生HTMLval()
input タグなどの保持している値css(属性名, [値])
css だけ属性名は必須。値は設定時のみ。
エレメントつくるよー
作るだけなら $('<p>hoge</p>') と HTML 直書きで良い。
突っ込むには、
elementA.append(elementB)
elementAの中にelementBを突っ込む。elementA.wrap(elementB)
elementAをelementBで囲む。elementAが複数要素だったら個別に囲む。elementA.wrapAll(elementB)
elementAをelementBでまとめて囲む。elementA.before(elementB)
elementAの前にelementBをおく。elementB.after(elementB)
elementAの後にelementBをおく。
データを保持させとくよー
element.data(キー, 値)
var = element.data(キー)
エレメント自身にデータを持たせておいて、必要な時に使える。ページが更新されるまで生きてる。
イベント
エフェクト
非同期通信
var param = {key:”value”};
element.load(“hoge.txt”[, param])
これで element.text に結果を突っ込める。
post/getメソッドを使って、取得後の処理を行いたい場合は
$.get(“hoge.cgi”, param, func);
$.post(“hoge.cgi”, param, func);
function func(result) { … }
のfuncのようにコールバック関数を指定する。result にとってきた値が入る。この場合生テキスト。
$.getJSON(“hoge.json”, param, func)
で JSON 形式で取得。result は JSON オブジェクトとして使えるので、
{ "foo": "bar" }
が内容だった場合、var str = result.foo; とすると str に “bar” が入る。
シリアライズ
フォームの内容をまとめてシリアライズ！
var param = $('#form1').serialize();
こいつをpost()とかget()とかに投げる。べんり。