人気ブログランキング | 話題のタグを見る

jQueryの文法

jQuery の本を買った。『Web制作の現場で使う jQueryデザイン入門』 西畑一馬著だ。jQueryを現場で使うためのノウハウが、論理的な章立てですっきりと解説してある。非常に分かりやすい。サンプルもダウンロードできる。

しかし、自分で入力してその反応を見てみないと、納得した感じがしない。といっても、サンプルをいちいちエディターで文書ファイルにするのも面倒だ。本を読んでみたら、jQueryは、DOM要素の編集もできるようだったので、jQuery をインポートしただけの白紙のページを作ってみた。http.www.mnet.ne.jp/~tnomura/testbed.html がそれだ。Google Chrome で使うと便利だ。アクセスしても白紙のままだが、Shift + Ctrl + J で JavaScript コンソールを立ち上げて、コマンドラインに、

$("body").append("<h1>hello, world</h1>");

と入力すると、hello, world という文字が現れる。作業の結果を保存したいときは、[名前をつけて保存する]メニューで保存できる。ただし、JavaScriptはブラウザーから読み込まないと動かないので、Apacheのパスの通ったフォルダーにいれておく必要がある。

前置きが長くなったが、jQuery の命令は例外なく次の形を取る。

$( selector ). method( args );

$( selector ) の部分が、selector で指定したオブジェクトを取得する部分で、method( args ) が、そのオブジェクトを操作する命令だ。したがって,selector の書式を覚え、メソッドの作用を覚えるだけで、様々なDOM要素に対する操作を行うことができる。selector の書式も css セレクタの書式に準じているので、スタイルシートを扱っている人なら改めて学習する必要もないくらいだ。この、余計なことを覚えなくて済むシンプルさが jQuery の人気のひとつなのだろう。

このシンプルさは、jQuery のプラグインを使うときも同じだ。例えば、テーブルをソートするプラグインは、jQuery の初期化を行う次のプログラムの中で、tablesorter() メソッドを実行するだけだ。

$(function() {
  $("#myTable").tablesorter();
});

JQuery を紹介したページは多くあるし、本を買ったほうが学習曲線の上がり方が速いのでこのブログでの jQuery ねたは終わるが、JavaScript にも素敵なライブラリが出現した。もっとも、jQuery 自体が、習得が容易で機能の多彩な新しいネットワークプログラミング言語であると言えるのかもしれないが。

付録: testbed.html の操作例

$("body").append("<h1>header 1</h1>")
$("body").append("<ul></ul>")
["item 1","item 2", "item 3", "item 4"].map(function(elem) { $('ul').append("<li>"+elem+"</li>") })
a = ["first", "second", "third", "fourth"]
$('li').each(function(i){ $(this).attr("id", a[i]) })
$.each(["red","yellow","green","blue"], function(i, elem) { $('li:nth-child('+(i+1)+')').css('color', elem) })
$("h1").text("text changed")
$("li:first-child").text($("h1").text())
by tnomura9 | 2010-12-23 10:35 | JavaScript | Comments(0)
<< jQuery HTML Editor クロージャー >>