(cache) jQueryでボタンのクリックイベントを制御する

jQueryでボタンのクリックイベントを制御する

今までJavaScriptは避けて通ってきたのですが、CouchDBをJavaScriptだけで
制御してみたい欲求に駆られたので、勉強を始めました。

jQueryの取得

よく耳にするjQueryというライブラリを使用することにします。
ちょっと調べてみると、UIの制御がメインなのかなという印象を受けましたが、
Ajaxに関する記述を見つけましたので、しばらくこれでがんばってみます。

公式サイトのURLは
http://jquery.com/

ここのDownload(jQuery);ボタンを押すと、Google Codeのダウンロードページに遷移します。
表示されたのは、 jquery-1.3.2.min.jsという改行コードやインテンドを削除したバージョンです。

最初は、試行錯誤しながらになると思うので、人が見やすい形式のjsファイルをダウンロードしました。

http://code.google.com/p/jqueryjs/downloads/list
ここから、jquery-1.3.2.jsをダウンロード。

Selectorsを使用する

そもそも、JavaScriptをあまり書いたことが無いので、jQueryの何がすごいのかを
理解できていませんが、どうやらSelectorsという機能が秀逸らしい。

要するに、html内にあるオブジェクトを取得する方法なのですが、まずは
これを試してみることにします。

jQueryを使用しないサンプル

jQueryをまったく使用していないサンプルプログラムを作成しました。
ボタンを押すと「hello world!」とAlertを表示するだけのプログラムです。

<html>
<head>
    <title>js sample</title>
    <script type="text/javascript">
    function hello(){
        alert('hello world!');
    }
    </script>
</head>
<body>
    <input type="button" value="テスト" onClick="javascript:hello();" />
</body>
</html>

jQueryを使用して、inputタグにonClickを書かない方法を考えて見ます。

jQueryを使用するための準備

jQueryを取り込むために、最初にダウンロードしたファイルをサーバーにアップロード。
htmlに

こういう記述を追加しました。

要素を指定して、clickイベントを付与する

inputという要素を指定して、clickイベントを宣言してみます。

<html>
<head>
    <title>js sample</title>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
    $(document).ready( function() {
        $("input:button").click(function(){
            alert('hello world!');
        });
    });
    </script>
</head>
<body>
    <input type="button" value="テスト" />
</body>
</html>

$(document).readyは、ページの読み込みが完了したときに実行されるようで、
お決まりの書き方のようです。

最初の$は、jQueryの別名のようなもので、これは

$(document).ready

この部分を、

jQuery(document).ready

このように書いても動作します。

$("input:button")
これで、inputのtypeがbuttonのオブジェクトという意味合いになります。
該当のオブジェクトに対し、clickイベントを宣言しています。

この指定方法の場合、ボタンが二つ存在する場合、例えば

<html>
<head>
    <title>js sample</title>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
    jQuery(document).ready( function() {
        $("input:button").click(function(){
            alert('hello world!');
        });
    });
    </script>
</head>
<body>
    <input type="button" value="テスト１" />
    <input type="button" value="テスト２" />
</body>
</html>

こんなソースの場合だと、どちらのボタンを押しても、「hello world!」というダイアログが表示されます。

idを指定して、clickイベントを付与する

どのボタンを押しても、同じ処理にしたいという要件よりも、別々の処理にしたいという
場合のほうが多いかと思います。

そんなときは、idを指定してオブジェクトを取得します。
使い方は、
・inputを指定するときにidも宣言しておく。
・idでオブジェクトを指定する際は「$("#[idの名前]")」のように#をつける。

サンプルはこんな感じ。

<html>
<head>
    <title>js sample</title>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
    jQuery(document).ready( function() {
        $("#button_1").click(function(){
            alert('hello world! button 1');
        });
        $("#button_2").click(function(){
            alert('hello world! button 2');
        });
    });
    </script>
</head>
<body>
    <input id="button_1" type="button" value="テスト１" />
    <input id="button_2" type="button" value="テスト２" />
</body>
</html>

テスト１というボタンを押すと、「hello world! button 1」。
テスト２というボタンを押すと、「hello world! button 2」が表示されると思います。

cssのクラスを指定して、clickイベントを付与する

私はいまだにtableタグやbrタグで画面のレイアウトを構成してしまうのですが、主流は
cssを使用したレイアウトだと思います。

cssを使用するときは、大抵classでcssのクラスを指定していると思います。
ここで指定している名前をそのままjQueryで使用することが出来ます。

使い方は、
・classでオブジェクトを指定する際は「$(".[classの名前]")」のように.をつける。

以下、サンプルです。

<html>
<head>
    <title>js sample</title>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
    jQuery(document).ready( function() {
        $(".button_cls_1").click(function(){
            alert('hello world! button 1');
        });
        $(".button_cls_2").click(function(){
            alert('hello world! button 2');
        });
    });
    </script>
</head>
<body>
    <input class="button_cls_1" type="button" value="テスト１" />
    <input class="button_cls_2" type="button" value="テスト２" />
</body>
</html>

複数のオブジェクトを指定する

例えば、
ボタン１かボタン２を押したときは、「hello world! button 1 or 2」
ボタン３を押したときは「hello world! button 3」
こういう風に処理をさせたい場合を考えて見ます。

こんなときは、「,」で区切って複数のオブジェクトを一括で指定すればOK。

<html>
<head>
    <title>js sample</title>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
    jQuery(document).ready( function() {
        $("#btn_1, #btn_2").click(function(){
            alert('hello world! button 1 or 2');
        });
        $("#btn_3").click(function(){
            alert('hello world! button 3');
        });
    });
    </script>
</head>
<body>
    <input id="btn_1" type="button" value="テスト１" />
    <input id="btn_2" type="button" value="テスト２" />
    <input id="btn_3" type="button" value="テスト３" />
</body>
</html>

ちょっとづつ理解できてきました。

関連記事