読んで覚える,触って体験!JavaScript&CSS3~gihyo.jp×jsdo.it presents

第2回 jQueryの基本(お題編)

この記事を読むのに必要な時間:およそ 3.5 分

jQueryの基本

jQueryでのプログラムは基本的にHTMLの要素を取得して,それに対して何か操作をするというだけです。複雑なプログラムもそれの組み合わせなので,まずはその基本を覚えてましょう。まずはHTMLの要素を取得するというところとそれに対して操作するというところをわけて解説します。

HTMLの要素を取得する

まずjQueryは何かHTMLの要素をとってこない何も始まりません。HTMLの要素を取得するには以下のように書きます。

$(セレクタ)

この$()という記述がjQeuryの記述方法です。セレクタにはCSSのセレクタを使うことができます。CSS3のセレクタにも対応していますし,jQuery独自のセレクタというのもあります。それではどのようなセレクタを指定できるか例を挙げてみます。

// 全てのdiv要素
$('div');

// id属性がfooの要素
$('#foo');

// class属性にfooという値が含まれる要素
$('.foo');

// class属性にfooという値が含まれる要素の子要素のdiv要素
$('.foo div');

// input要素のうちtype属性の値がtextの要素
$('input[type="text"]);

// チェックされている要素(radioボタンなど)
$(':checked');

// div要素の先頭の要素
$('div:first');

// div要素の最後の要素
$('div:last');

// div要素のうちインデックスが1のもの(インデックスは0から順番にふられる)
$('div:eq(1)');

// h1やh2などのheader要素
$(':header');

いくつかの例のデモを用意しましたので実際にさわってみてください。

ふだんCSSを書いている人は見慣れたものあればそうでないものもあるかもしれません。とりえあえず最初はCSSのセレクタで要素が取得できるということを覚えておくといいと思います。また,取得した要素からさらに絞り込むこともできます。それには$()の第二引数に絞り込む対象のものを設定したり,find()やfilter()などを使います。

var $foo = $('.foo');

// .fooの以下にあるdiv要素(.fooは含まない)
$('div', $foo);
$foo.find('div');

// .fooのうちdiv要素のもの(.fooのみが対象)
$foo.filter('div');

このようにHTMLの要素を取得するというだけでも色々な方法があります。ここで取得したものをjQeuryオブジェクトといい,このjQeuryオブジェクトに対して色々と操作することができます。

取得したものに対して操作する

jQeuryを使って取得したjQeuryオブジェクトに対して何か操作をするには,.(ドット)でつなげて処理を書くだけです。この操作のことをメソッドといいます。それではいくつか例を挙げます。

// 要素を非表示にする
$('.foo').hide();

// 要素を表示する
$('.foo').show();

// 要素の表示/非表示を切り替える
$('.foo').toggle();

// 要素のcssを設定する
$('.foo').css('color', 'red');

// 要素のcssの値を取得する
$('.foo').css('color');

// 要素の中身のHTMLを書き換える
$('.foo').html('<p>bar</p>');

// .foo要素の末尾に要素を追加する
$('.foo').append('<p>bar</p>');

// 要素を削除する
$('.foo').remove();

// 属性値を設定する
$('.foo').attr('id', 'bar');

// 属性値を取得する
$('.foo').attr('id');

// 属性値を複数指定する
$('.foo').attr({
    src: 'bar.png',
    alt: 'bar',
});

// classを追加する
$('.foo').addClass('bar');

// classを削除する
$('.foo').removeClass('bar');

こちらもいくつかデモで用意しました。

またこれらのメソッドをでつなげて書くこともでき,これをメソッドチェインと呼びます。

// cssを変更してclassを追加して中身のHTMLを書き換える
$('.foo').css('color', 'red').addClass('bar').html('<p>bar</p>');

このように,メソッドには値を取得したり,HTMLを書き換えたり,CSSを書き換えたりと様々なものが用意されています。何を取得するか,とそれに対してどう操作するか,という組み合わせでいろいろなことができることがわかると思います。

著者プロフィール

外村和仁(ほかむらかずひと)

HTMLコーダー,JavaScriptプログラマ,PHP,Perlのプログラマといった職務を経験後,2010年に株式会社ピクセルグリッドに入社。大規模サイトの運用,開発の経験を活かしてバックエンドからフロントエンドまで幅広く担当。好きな言語はPythonとJavaScript。JavaScriptの勉強会,jstudyを主催している。

Twitter: @hokaccha