jQuery入門 : jQuery入門 No.37

jQuery入門 No.37

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

───────────────────────────────
　jQuery入門 No.37
───────────────────────────────

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

　1)要素にマウスが乗った場合の動作を設定する
　2)要素をクリックした場合の動作を設定する
　3)要素のblurイベントを実行する
　4)要素のblurイベントにイベントを設定する

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にマウスが乗った場合の動作を設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

hover(マウスが乗った場合の関数, マウスが離れた場合の関数)
となります。

以下の例ではマウスが乗った場合、背景がピンクになります。

例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(){
        $(“li”).hover(
          function () {
            $(this).addClass(“selected”);
          },
          function () {
            $(this).removeClass(“selected”);
          }
        );
      });

</script>
<style>

       li{width:200;background: #EEEEEE; padding:2px;margin:2px;}
      .selected { background: pink; }
    </style>
</head>
<body>

    <ul>
      <li>Outlook</li>
      <li>FireFox</li>
      <li>Safari</li>
      <li>Chrome</li>
    </ul>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素をクリックした場合の動作を設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

toggle(関数1, 関数2,….)

となります。

以下の例ではクリックすると背景色が変化します。

例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(){
        $(“li”).toggle(
          function () {
            $(this).css({“background”:”#FFFF66″});
          },
          function () {
            $(this).css({“background”:”#FF66CC”});
          },
          function () {
            $(this).css({“background”:”#FFFFFF”});
          }
        );
      });
    </script>
    <style>
       li{width:200; padding:2px;margin:2px;}
    </style>
</head>
<body>

    <ul>
      <li>Outlook</li>
      <li>FireFox</li>
      <li>Safari</li>
      <li>Chrome</li>
    </ul>
</body>
</html>

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

blur()

となります。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のblurイベントに関数を設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

blur(関数)

となります。

blurイベントはフォーカスがはずれた時に発生する
イベントです。

以下の例ではテキスト入力部分からフォーカスがはずれた時
「フォーカスがはずれました」と表示し、表示が
消えていくように設定しています。

例3)
<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(){
        $(“input”).blur( function (){
          $(“span”).css(‘display’,'inline’).fadeOut(1000);

        } );
      });
    </script>
    <style>span {display:none;}</style>

</head>
<body>
<input type=”text” />
<span>フォーカスがはずれました</span>
</body>
</html>

tips_admin jQuery