ボタンで入れ替え
    ● jQuery記述の基本


jQueryを使って最初に作ったサンプルプログラムを見ながら文法を整理します。

プログラム

サンプルの動きは右のボタンから確認出来ます。ボタン

 

headタグの中では、「meta」でキーワード指定、文字コード指定、CSS指定、javascript指定をし、CSSやjavascriptなどの 外部ファイルを指定し、titleを付けます。jQueryを使用する場合は、さらにjQueryファイルを呼び出さなくてはなりません。下の様に記述します。

<script src="jquery-1.11.3.min.j3"> </script>

srcの後の""の中は保存したjQueryファイルの名前とパスを正確に記述します。


続けてjQueryプログラムを記述しますが、jQueryはJavaScriptライブラリなのでscriptタグの中に記述します。

<script type="text/javascript" >
    ・
  jQueryのプログラム
    ・
</script>

 

いよいよjQueryプログラムの本体の記述です。

JavaScriptをheadタグ内に書くのが一般的ですから、bodyタグ内のプログラムよりも先に読み込まれます。 しかし、HTMLが読み込まれてからjQueryのプログラムを動かす必要があります。 そこでreadyイベントを利用します。

readyイベントは、ページ構成(DOM要素)を読み込んだ時点で処理を開始します。

さてreadyイベントの記述方法ですが、下の様に書きます。

$(
  ページ構成を読み込んだ後、ここの処理が実行されます
);

「$」は略式記述で、正式には「jQuery(document).ready」と書くそうですが、「$」で事足ります。

 

ところで「処理」の記述方法ですが、functionで設定しなければなりません

すなわち、headタグ内のjQuery記述は、下の様になるのです。

<script type="text/javascript" >
  $(function () {
    処理の記述
  });
</script>

ここまでで、$の使い方の一つ、readyイベントの登録用として用いる事を学びました。


HTML文書を見てみると、「処理」の内容は下の様になっています。

$(":button").click(function(){
    $("span").text("ボタンがクリックされました。");
});

ここでも$が2ケ所使われており、これらはいずれもセレクタの指定とメソッドの指定を行っています。 これが$の使い方の二つ目です。

記述方法を整理します。

$(セレクタ).メソッド;

意味は・・・

セレクタ操作メソッドを行う。

サンプル中の2つの$について理解します。

最初の$は、セレクタが「button」で、メソッドは「click」

    (ボタンがクリックされたら()内の関数を行う)

二つ目の$は、セレクタが「span」で、メソッドは「text」

    (セレクタspanに文字「ボタンがクリックされました。」を入れる)

となります。なお、メソッドの最後には必ずカッコ()が必要で、カッコの中には引数が入ります。 引数が不要なメソッドの場合は()だけを記述します。

ページトップへ

←前ページへ               目次へ戻る               →次ページへ

コーナー