jQuery入門 : 2009 : 12月

jQuery入門 No.44

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

───────────────────────────────
　jQuery入門 No.44
───────────────────────────────

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

　1)要素にmouseupイベントを設定する
　2)要素にresizeイベントを設定する
　3)要素にscrollイベントを設定する
　4)本日のエラー：他のブラウザだと、文字化けして動かない！
　5)編集後記

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

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

クリックして、ボタンが上がるのが
mouseupの動作です。試してみましょう。
赤色の「ここをクリックして下さい」の
<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(){
      $(“#m_up”).mouseup(function(e){
        $(“#m_up”).css(“font-size”, “50px”);
        $(“#m_up”).css(“width”, “600px”);
        $(“#m_up”).css(“height”, “60px”);
      });
      $(“#m_up”).mouseout(function(){
        $(“#m_up”).css(“font-size”, “18px”);
        $(“#m_up”).css(“width”, “230px”);
        $(“#m_up”).css(“height”, “25px”);
      });
    });
</script>
<style>
      div { background:springgreen; color:red; font-size:18px;
width:230px; height:25px; }
</style>
</head>
<body>
<p>
    <div id=”m_up”><strong>ここをクリックして下さい </strong></div>
    <br />
</p>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にresizeイベントを設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

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

resizeは、ブラウザの画面の大きさが
変わると動きだします。
ブラウザの大きさを変更すると、
その回数をカウントします。
【サンプル２】
<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 count = 0;
      $(window).resize(function(){
        $(“div”).text(“resize回数：” + ++count);

      });
    });
</script>
<body>
    <strong><span>ウインドウのサイズを変えてみて下さい。</span></strong>
    <br />
    <div></div>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にscrollイベントを設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

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

ブラウザの画面をスクロールさせると
その回数をカウントします。
・ウインドウのスクロールバー
・マウスのホイール

どちらでスクロールさせても、
カウントされます。
＜＜＜注意！＞＞＞
サンプルを動かすと、自動的にウィンドウサイズが
変わります。

window.resizeTo(400,350);

これでウィンドウサイズが変わるように設定しています。
【サンプル３】
<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(){

window.resizeTo(400,350); //ウィンドウサイズ設定

        $(“p”).clone().appendTo(document.body);
        $(“p”).clone().appendTo(document.body);
        $(“p”).clone().appendTo(document.body);

<div>スクロールしてみて下さい。</div>

<p>今のスクロールは、 <span></span>回目</p>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■本日のエラー：他のブラウザだと、文字化けして動かない！
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
「FireFoxだと動いたのに、IEだと文字化け！」
普段、FireFoxを使っているので、
試しにIEで動作確認を行いました。
すると、文字化けするし、動作もおかしい。
Chromeもダメだった…
私のjQueryサンプルは、FireFoxユーザーのみなのか…

いったい、どうしたら…（遠い目）
結局、文字コード指定をしていないのが原因でした。
（修正前）
<html>
<head>
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
（修正後）
<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”>
上から3行目、<meta （中略） charset=utf-8″ />と、
少し長い行を１行追加しました。
これを追加した途端に、他のブラウザでも動作するようになりました。

元々、テキストエディタで、文字コード「utf-8」で
サンプルを作っているので設定したら文字化けしなくなりました。
【まとめ】

文字化けしたら文字コードの指定を、疑ってみる。
※毎度サンプルには、この１行が入ってるのに、なぜ私は…
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
jQuery人生が始まったばかりの、深澤（ふかさわ）です。
◆jQuery 1.4 Alpha 1　がリリースされました！
http://blog.jquery.com/2009/12/04/jquery-14-alpha-1-released/
英語を読むのに難儀するので、jQueryのように
リリースの早いものは、英語が読めないと辛いなあ。

と、思いつつわからない単語を訳して
更に、英語の迷宮に入り込んでます。

ああ。英語人生も始めるのか…（遠い目）。

次回もどうぞ、ごひいきに。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
jQuery入門 (http://www.bface.net/tips/jquery/)
    発行：株式会社ビーフェイス http://www.bface.net/
    発行システム：『まぐまぐ！』 http://www.mag2.com/
    配信中止はこちら http://www.mag2.com/m/0000280891.html
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

tips_admin jQuery

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
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

tips_admin jQuery

« jQuery入門 No.42 jQuery入門 No.44 »