デザイナーさんの為のjQuery講座 Lv.1 [入門編]

鳥よし

2013.07.19

暑いですね。　鳥よしです。

あまりにも暑くてネタが切れたので、先日LIGのデザイナーさんとやったjQuery勉強会の備忘録をかかせていただきます。

サボってるわけではないのです。

勉強会の内容を見直してもらえればいいのです。

1.jQueryを使用するために

まずは何はともあれ、jQueryを使用するために以下の記述をhead内に書きます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

これは、jQueryの実ファイルをgoogleさんから参照しているので、ネットにつながっていないと使用できない書き方ですね。

今回は何も考えずサクッと動かしたいのでこれで行きます。

これによってjQueryが使用できるようになります。

2.jQueryの書き方

jQueryの書き方は、基本的に以下の三拍子が基本だと思ってください。

どのタイミングで(イベント)
何処に対して(セレクタ)
何々をする(メソッド)

もはや、ここでは難しいことは考えないのです。

頭を無にしてこの三拍子を頭に入れるのです。

1.イベントに関して

まずは、イベント。「どのタイミングで」の部分になります。

特定のタイミングで特定の処理を実行させる事をイベントハンドラと呼びます。

今回は、とあるボタンが押されたタイミングでとあるテキストを空にするという動作を作ってみましょう。

まずはボタンを用意します。

<input type="button" id="reset" value="リセット">

次にjQueryの処理を書く上で、お作法的なものを書いていきます。

<script>
$(function() {

    // ここに処理を書きます。

});
</script>

こいつの説明をすると、scriptタグの中に書かれたものをブラウザがjavaScriptだと解釈してくれます。

でもって、$(function() {});　これは何かというと、画面読み込みが完了した瞬間に1回だけ実行されます。

つまり、その中に書いた処理が画面読み込み完了時に1回だけ実行されるのです。

次は、この中にイベント登録の処理を書きます。

今回の目的は「とあるボタンが押されたタイミングでとあるテキストを空にする」なので、先ほど用意したボタンがクリックされたら実行されるようイベントを登録します。

<script>
$(function() {

    // idがresetの領域がクリックされたら実行されます。

    $('#reset').on('click', function() {

        // 何処に何をするかを記述します。

    });

});
</script>

今回は何でこの書き方なのかの説明は割愛します。(心を無にするのです。)
こう書けばクリックイベントを登録できる！　と理解していただければOKです。

2.セレクタに関して

次にセレクタ。「どのタイミングで、何処に対して、何々をする」という一連の処理の中で、「何処」という情報を扱う部分になります。

例えば以下のようなテキストフィールドがあったとして、

<input type="text" id="text_01" value="テスト文言">

このテキストの内容を消したい。　と思った時に、「このテキストフィールド」という情報を指定しないといけません。
(この例ではタグが一つしかないですが、普通に作業してたらいくつもあるタグから「このタグ」と指定しなければならないですからね。)

そこで出てくるのが「セレクタ」です。

指定する方法はたくさんありますが、今回はIDを指定してみたいと思います。
テキストエリアにid=”text_01”を振ってあるので、下のサンプルを参考に書いてみると・・

$('#text_01')

こうなります。

これで「何処に対して」の指定が完了です。
組み込むのはもうちょっと先です。

3.メソッドに関して

最後にメソッド。「何々をする」の部分です。
この、何々をする処理は、メソッドというjQueryが提供している機能を記述して実現します。

「1.」の例ではテキストの内容を消したいだったので、実際に値の操作を記述します。

今回は中身を操作するメソッドにval()を使用します。

val([引数1])
※引数とは、メソッドに対して受け渡す値になります。

val()の場合は渡された引数で値を書き換えるという内容になるので、
セレクタと合わせるとこんな感じになります。

$('#text_01').val([引数1])

セレクタとval()は「.」で繋げます。

「1.」の例であげたテキストの内容には「テスト文言」という値が入っているので、
空にするには以下の書き方になります。

$('#text_01').val('');

実際に変えた部分は[引数1]を「”」(シングルコーテ2つ)にしました。

これは空文字で置き換えるという意味になります。

(違う文言に書き換えるならこんな書き方になります　$(“#text_01″).val(‘ほげほげ’);)

又、一番右端にこの行の終わりを意味する「;」を追加しました。

これを組み込むと以下になります。

<script>
$(function() {

    // idがresetの領域がクリックされたら実行されます。

    $('#reset').on('click', function() {

        // idがtext_01のvalueを空にする。

        $('#text_01').val('');

    });

});
</script>