Hatena::ブログ(Diary)

いつも先延ばし。

2010-12-01

5分で分かる jQuery

JavaScript Advent Calendar 2010 : ATNDのネタ

jQuery とは何か ( 1分 )

オープンソース(MITライセンスとGPLのデュアルライセンス)のJavaScriptライブラリ

JavaScriptで「AJAXでとってきたデータを挿入したい。終わったらアニメーションでメッセージ出して」みたいなことをCSSセレクタなどを活用しつつ割とラクに実現する。

jQueryインストールとか ( 1分 )

http://scriptsrc.net/

一番左上のコピーを押せ。

押したらHTML内の<head></head>に入れろ。


jQuery の基本的な使い方(セレクタ編) ( 1.5分 )

$('#title').css('color','red');

上記の内容で「id属性に'title' と指定された要素の style属性 に color: red; を指定」することになる。

http://www.geocities.jp/dreamfire77/javascript/

ここに試せる場所を用意したから試してみるべし。*1



jQuery の基本的な使い方(AJAX編) ( 1分 )

さっきのところにコレ突っ込んでみろ。

$.get("./wagahai_first.txt", function(data){
  $('#contents').html(data);
});

解説するまでもないが、

  • ./wagahai_first.txt にアクセスし
  • 成功すると得られたデータを引数にコールバック関数を実行する。
    • その関数内で、#contentsの内容を書き換えている。

まとめ ( 0.5分 )

jQueryのよいところは CSSセレクタを使えるので HTMLCSS さえわかればとっつきやすいところだと思う。

さらに色々みたい人は ( advanced )

蛇足

Advent Calender に参加したことも無いし、こんなんでいいのかもわからないが、12/1なのに参加者が見あたらず勢いで書いた。

http://atnd.org/events/10497

こういうイベントは大好きなので盛り上がるといいいな!

*1: 上記は id:dankogai のコードを一部流用させてもらった。 http://blog.livedoor.jp/dankogai/archives/50940883.html

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/dreamfire/20101201/javascript_advent2010