jQuery入門 : jQuery入門 No.43

jQuery入門 No.43

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

───────────────────────────────
　jQuery入門 No.43
───────────────────────────────

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

　1)要素にmousemoveイベントを設定する
　2)要素にmouseoutイベントを設定する
　3)要素にmouseoverイベントを設定する
　4)本日のエラー：jQueryインストールしたのに動かない！
　5)編集後記

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

mousemove(関数)
【サンプル説明】

オレンジ色の<div></div>の中に、
マウスカーソルが入ると、位置を表示します。

動いても随時、座標が表示されます。
【サンプル１】
<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”>
    $(document).ready(function(){
      $(“div”).mousemove(function(e){
        var pageCoords = “( ” + e.pageX + “, ” + e.pageY + ” )”;
      $(“span:first”).text(pageCoords);
      });
    });
</script>
<style>
    div { width:200px; height:100px; margin;10px; margin-right:50px;
        background:orange; border:2px groove; float:left; }
    p { color:red; font-size:18px; }
    span { display:block; }
</style>
</head>
<body>
<p>
    <span>座標を表示します</span>
</p>
<div><strong>オレンジ色の中で、マウスカーソルを動かして下さい。
</strong></div>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にmouseoutイベントを設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

mouseout(関数)
【サンプル説明】

mouseoutの動きを確認します。
緑色の<div></div>の中にマウスを移動させて、
離れると、mouseoutしたことになります。
mouseoutに成功すると、メッセージの表示と
mouseoutの回数をカウントします。
【サンプル２】
<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”>
    $(document).ready(function(){
      var i = 0;
      $(“div”).mouseout(function(e){
        $(“strong”).text(“Nice! mouseout!”);
        $(“span”).text(“mouseoutした回数：” + ++i);
      });
    });
</script>
<style>
    div { width:200px; height:100px; margin;10px; margin-right:50px;
          background:yellowgreen; border:2px groove; float:left; }
</style>
</head>
<body>
緑色の中にマウスカーソルを入れて、離れて下さい。
<br />
<br />
mouseoutに成功すると、緑色の中にメッセージが表示され、
<br />
mouseoutの回数をカウントします。
<br />
<div><strong></strong></div>
    <span></span>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にmouseoverイベントを設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

mouseover(関数)
【サンプル説明】

『ドレミ』の各文字の<div></div>にマウスカーソルが
重なると、背景の色が変わります。
１文字ずつに<div></div>にidを付けて、
それぞれ背景の色を変えて表示させてます。
そして、一つ前のmouseoutを使って、
<div></div>から離れると、元の色に戻る処理も
行っています。
（早速使ってみました。）
※音は出ません。
【サンプル３】
<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”>
    $(document).ready(function(){
      $(“#sound1″).mouseover(function(){
        $(“#sound1″).css(“background-color”, “pink”);
      });
      $(“#sound1″).mouseout(function(){
        $(“#sound1″).css(“background-color”, “white”);
      });

      $(“#sound2″).mouseover(function(){
        $(“#sound2″).css(“background-color”, “gold”);
      });
      $(“#sound2″).mouseout(function(){
        $(“#sound2″).css(“background-color”, “white”);
      });

      $(“#sound3″).mouseover(function(){
        $(“#sound3″).css(“background-color”, “lime”);
      });
      $(“#sound3″).mouseout(function(){
        $(“#sound3″).css(“background-color”, “white”);
      });
    });
</script>
<style>
    div { width:50px; height:20px; border:2px groove; }
</style>
</head>
<body>
<div id=”sound1″>ド</div>
<br />
<div id=”sound2″>レ</div>
<br />
<div id=”sound3″>ミ</div>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■本日のエラー：jQueryインストールしたのに動かない！
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
「動かない。インストールしたのに！」

jQueryのサンプル作るに作れないのでとても困りました。
結局、jqueryの階層指定が間違ってました。
（修正前）
src=”jquery-1.3.2.min.js”

（修正後）
src=”js/jquery-1.3.2.min.js”
jQuery本体を『js』フォルダを作って、その中に格納したので
自分が書いたコードとは別の階層にいることになります。
修正後のように、jQuery本体のいる場所を指定し直しました。
【まとめ】

階層に自信がない場合は、疑ってみる。

※43号目にしてインストールネタで、すみません。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
今回から担当になりました。深澤です。
javaScriptは、まったくわからないけど、
jQueryから始めて使えるようになりたい！と、
思っています。

一緒にレベルアップを目指していきましょう。

…と、思うものの、

jQueryを使っていってうまく動かないと…
（１）おろおろする
      ↓
（２）修正をしてみる
      ↓
（３）状態悪化（どろ沼）
      ↓
（４）いったん寝る
      ↓
（５）目が覚めたらエラーが消えていれば…
＞＞＞　消えてない！！　＜＜＜
今、そんな感じです。
これだと、レベルアップは無理そうなので
エラー対処した様子やなにか気づいたことも
書いていこうと思います。
どうぞ、ごひいきに。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
jQuery入門 (http://www.bface.net/tips/jquery/)
    発行：株式会社ビーフェイス http://www.bface.net/
    発行システム：『まぐまぐ！』 http://www.mag2.com/
    配信中止はこちら http://www.mag2.com/m/0000280891.html
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━