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)
|
カテゴリ
新型コロナウイルス 主インデックス Haskell 記事リスト 圏論記事リスト 考えるということのリスト 考えるということ ラッセルのパラドックス Haskell Prelude Ocaml ボーカロイド 圏論 jQuery デモ HTML Python ツールボックス XAMPP Ruby ubuntu WordPress 脳の話 話のネタ リンク 幸福論 キリスト教 心の話 メモ 電子カルテ Dojo JavaScript C# NetWalker ed と sed HTML Raspberry Pi C 言語 命題論理 以前の記事
最新のトラックバック
最新のコメント
ファン
記事ランキング
ブログジャンル
画像一覧
|
ファン申請 |
||