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 );
  });
});