JQuery覚書その1

投稿者: | 2014年4月8日

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 をいじくるような面倒くさいことはない。

#hogeid="hoge".hogeclass="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()とかに投げる。べんり。

コメントを残す

メールアドレスが公開されることはありません。