タグ: JavaScript

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()
  生HTML
• val()
  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()とかに投げる。べんり。