jQuery を使って動的で高品質なウェブサイトを構築する方法を解説しています。なるべく動くサンプルコードを記載しています。
jQuery 入門jQuery 入門
jQuery の使い方
jQuery の基礎
jQuery モバイル
jQuery UI
サンプルのテーマ変更

jQuery の拡張
関連サイト
サイト情報
ホーム > jQuery の基礎 > jQuery コア

jQuery コア

スポンサーリンク

jQuery のカテゴリ "Core" に分類されるのは、jQuery.holdReady()、jQuery()、jQuery.noConflict()、jQuery.sub()、jQuery.when() があります。

ここでは jQuery を利用するときに欠かせない、 jQuery() についてみておきましょう。

DOM 要素を取り出す jQuery()。$ として呼び出せる

次のテキストボックスに何か文字を入力して OK をクリックすると、テキストボックスに入力した文字がポップアップで表示されます。

jQuery を利用すると、これは次のように書けます。まず HTML の部分は・・・

<p>
 <input type='text' id='textbox1' value='Hello, jQuery!'>
 <input type='button' id='button1' value='OK'>
</p>

JavaScript のコードは次のようになります。

$(document).ready( function() {

	jQuery('#button1').click(function(){
		alert(jQuery('#textbox1').val());
	});
	
});

ID が textbox1 である input 要素を意味するオブジェクトは jQuery('textbox1') として取得しています。 そして、その value を val() で取得しています。

また、ここではボタンをクリックした時の動作を設定しています。 ID が button1 である DOM 要素の jQuery オブジェクトは jQuery('button1') で取得しています。 クリックに対する動作は click... で設定しています。

また jQuery() は $() とも書けます。したがって上のコードは次のように書き換えられます。

$(document).ready( function() {

	$('#button1').click(function(){
		alert($('#textbox1').val());
	});
	
});

このように、 jQuery では DOM 要素 (を表す jQuery オブジェクト) を $ で取得して、それに対して操作を行うということがしばしば行われます。

このときに、オブジェクトを取得するために $( セレクター ) とします。 DOM の ID をセレクターにするときは # をつけます。 また ID のようにひとつの jQuery オブジェクトを返すことを期待するだけではなく、複数のオブジェクトを返すことも可能です。

例えば、 class が test である p 要素をセレクターとして指定する場合は、 $('p.test') とできます。

具体例としては、そうして取得した要素それぞれをイテレートする場合は次のようにできます。

$('#button2').click(function(){
	$.each($('p.test'), function(a, b) {
		alert( b.innerHTML );
	});
});

スポンサーリンク
ホーム > jQuery の基礎 > jQuery コア
小山圭介 著者
小山 圭介
4/15/1973生
米国在住のソフトウェアエンジニア。ITコンサルタント.. »プロフィール
スポンサーリンク

© 2011-2013 Keisuke Oyama jQuery 入門