jQuery4段活用

jQueryの書籍や、解説サイトを見ると、いろいろな呼び出し方で記述されているので、初めて見る方はわかりづらく感じることがあるかもしれません。代表的な呼び出し方には下記のようなものがあります。今回はそれぞれについて具体的に解説したいと思います。

活用1:セレクターとしての$()

セレクターとしての$()は、最も良く使うjQueryの記述方法です。セレクター文字列にはCSSセレクターをそのまま使えますし、jQueryが拡張しているセレクターも使うことが出来ます。

//p要素の中にあるa要素(アンカーリンク)	タグセレクター
$("p a")
//classが"menu"の要素				クラスセレクター
$(".menu")
//idが"name"の要素				IDセレクター
$("#name")
//idが"name1"と"name2"の要素		グループセレクター
$("#name1,#name2")
//idがimportantの中にあるすべてのタグ	ユニバーサルセレクター
$("#important *")
//ターゲット属性を持つa要素(アンカーリンク)	属性セレクター
$("a[target]")

活用2:ドキュメント(DOM)構築後に処理したい作業の登録用としての$()

要素が出現する前にセレクターで要素を捕まえて処理することは出来ません。そのため、ドキュメント(DOM)が構築された後に処理したい場合、下記のような形でfunctionの中に処理を記述します。パターン1が省略しない形の記述方法です。多くのWebサイトではパターン2で解説されていますが、変な記述な感じを受けるのはパターン1の省略形であるということを知らないためです。正式にはパターン１で、省略形がパターン２なのだと理解していれば違和感も少なくなると思います。パターン3は以前解説しましたが、prototype.jsなど$という関数を使う別のライブラリと混在させたい場合に記述する方法です。この場合、このfunction内に記述される$はjQueryの物であると判断されます。

//書き方1   
$(document).ready(function($){   
    //ここに処理を書く   
});   
//書き方2   
$(function($){   
    //ここに処理を書く   
});   
//書き方3   
jQuery(function($){   
    //ここに処理を書く   
}); 

活用3:DOM要素の生成

DOM要素の生成は、動的にDOM要素を追加したい場合などに使用することが出来ます。例えば、下記のようなリストタグ<li>で作ったメニューに後から「メニュー3」を追加したい場合は下記のように記述します。

//HTMLで記述したメニュー
＜ul id="menu"＞
	＜li＞メニュー1＜/li＞
	＜li＞メニュー2＜/li＞
＜/ul＞

//メニュー3を追加するjQueryコード
$("＜li＞メニュー3＜/li＞").appendTo("#menu");

活用4:セレクターに似た働き

$()のカッコ内にはJavaScriptで取得したDOM要素やjQueryオブジェクトを引き渡すことが出来ます。えっ？わざわざDOM要素で渡さなくてもセレクタで捕まえれば良いじゃん!って思うかもしれませんが、JavaScriptのthisキーワードを使ってクリックされたボタンを取得し、押されたボタンによって処理を変えたい場合など便利な使いどころがあります。

//書き方1(普通の書き方)
$("#id1").css("color","red");
//書き方2(JavaScriptで取得したDOMを渡す)
var element1 = document.getElementById("id1");
$(element1).css("color","red");

次回予告

次回は夏休み企画、ノンプログラミングでModernスタイルアプリが作れるMicrosoft Project SienaとDomino REST連係を書いてみたいと思います。