jQuery入門 : jQuery入門 No.39

jQuery入門 No.39

2009 10月28日
コメントは受け付けていません。

───────────────────────────────
　jQuery入門 No.39
───────────────────────────────

───────────────────────────────
■目次
───────────────────────────────

　1)要素のdblclickイベントを実行する
　2)要素にのdblclickイベントの動作を設定する
　3)要素のerrorイベントを実行する
　4)要素にerrorイベントを設定する

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のdblclickイベントを実行する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

dblclick()

となります。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にdblclickイベントを設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

dblclick(関数)
となります。

以下の例ではダブルクリックすると背景色が変わるように
設定しています。

例1)
<html>
<head>
    <meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
    <script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
    <script type=”text/javascript”>
      // ここにjavascriptのコードをこれから記述します!
      $(document).ready(function(){
            $(‘div’).dblclick(function () {
            $(this).toggleClass(‘highlight’);
        });
      });

    </script>
    <style>
      div { width:30px; height:30px; margin:10px; float:left;
           background:blue;}
     .highlight { background:yellow; }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のerrorイベントを実行する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

error()

となります。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にerrorイベントを設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

error(関数)

となります。
以下の例では存在しない画像(a.jpg)を
ボタンを押した際に表示しようとし、
その場合エラーとなるため、
errorイベントが呼ばれ、
<div></div>部分に見つかりませんと表示しています。
(存在する画像の場合は画像が表示されます）

例2)
<html>
<head>
    <meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
    <script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
    <script type=”text/javascript”>
      // ここにjavascriptのコードをこれから記述します!
      $(document).ready(function(){
        $(“#show”).click(function(){
          $(“img”).attr(“src”, “a.jpg”).show();
        });
        $(“img”).error(function(){
          $(this).hide();
          $(“#message”).text(“見つかりません”);
          return true;
        });
    });
    </script>
    <style>
      img {display:none;}
    </style>
</head>
<body>
    <img />
    <div id=”message”></div>
    <button id=”show”>画像表示</button>