jQueryのセレクタ Forms 3

jQuery

jQueryのセレクタ Forms 3

1: :image image タイプのinput要素

2: :reset reset タイプのinput要素

3: :button button要素とbuttonタイプのinput要素

Formsセレクタの中から、前々回は、 :input、:text、:password、前回は、:radio、:checkbox 、:submit を紹介しました。今回も、その続きを3つ試します。

jQueryライブラリ本体の入手方法と、セレクタについてのドキュメントは下記のページにあります。

:image image タイプのinput要素

まず、type属性がimage の要素です。つまり、<input type="image">の要素にマッチするセレクタです。

では、試してみましょう。ボタンの画像を操作をしてみます。下記ボタンにマウスで触れてクリックしてみてください。

type属性がimageのボタンにマウスがhoverやclickすることで画像が変わります。 focus時にblur()することで、focus時にボタンに表示される点線も消しています。

また、サンプルですので、普通は、type属性がimageのボタンをクリックすると送信されますが、ここでも今までのようにonsubmitに「return false」を与えることで送信を停止しています。

ソースは次の通りです。

<div id="test1">
  <form onsubmit="
    alert('テストですので送信はできません');return false">
    <input type="image" src="btn1.gif">
  </form>
</div>

<script type="text/javascript">
  jQuery(function($){

    //フォーカス時の点線を消す
    $("form :image","#test1").focus(
       function(){ $(this).blur() }
    )

    //マウスホバー時の画像書き換え
    $("form :image","#test1").hover(
        function(){ $(this).attr("src","btn2.gif") },
        function(){ $(this).attr("src","btn1.gif") }
    );

    //クリック時の画像書き換え
    $("form :image","#test1").click(
        function(){ $(this).attr("src","btn3.gif") }
    );

  });
</script>

ちなみに使っている画像は次の通り。

btn1.gif

btn2.gif (hover時)

btn3.gif (click時)

今回は、jQueryのイベント操作をいくつか(focus,hover,click)試してみましたが、詳しくは、http://docs.jquery.com/Events などをご参照ください。

このサンプルをみてもわかる通り、jQueryのイベントは、イベント名を冠したjQueryメソッドの引数として、そのイベント時の動作関数を引数として与える、という直感的にわかりやすいつくりになっています。

次ページでは、 :reset を試します。

「Ajaxを使おう」シリーズの記事一覧へ

記事一覧