JQuery入門　javascriptのライブラリ jQueryの簡単な例の紹介です

jQuery入門 No.45
  • 2010 01月08日
  • コメントは受け付けていません。

───────────────────────────────
　jQuery入門 No.45
───────────────────────────────

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

　1)要素にselectイベントを設定する
　2)要素にsubmitイベントを設定する
　3)要素にunloadイベントを設定する
　4)本日のエラー：2009年で、一番多かったエラーを発表！
　5)編集後記

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

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

右側のテキスト２という文字を選択すると、
テキスト２の背景の色が変わります。

（１）テキスト２の文字をマウスでドラッグ。
（２）（１）でドラッグした後、shiftキーを押しながら
矢印キーを押し、選択範囲を変える。

などの、操作を行うと背景の色が変わります。
【サンプル１】
<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(){
      $(“#text2″).select(function(){
        $(this).css(“background”, “orange”);
      });
    });
    </script>
    <style>
      input { width:100px; height:40px; }
    </style>
</head>

<body>
  <form name=”form1″ id=”form1″>
    <input type=”text” name=”text1″ value=”テキスト１” id=”text1″ >
    <input type=”text” name=”text2″ value=”テキスト２” id=”text2″ >
  </form>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にsubmitイベントを設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

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

実行ボタンを押すと、ポップアップでメッセージが表示され、
テキストエリアにも表示されます。

submitイベントは、

<input type=”submit” />のボタンを押し、
<form action=”javascript:alert(’submit成功！’);”>
の、actionに設定してある処理が動くと、
submitイベントが発生します。
【サンプル２】
<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(){
      $(“form”).submit(function() {
        $(“span”).text(“submitされました。”);
      });
    });
  </script>
  <style>
  p    { margin:0; color:blue; }
  span { color:red; }
  </style>
</head>
<body>
  <p>実行ボタンを押して下さい。（テキストエリアは空欄でOK）</p>
  <form action=”javascript:alert(’submit成功！’);”>
    <div>
      <input type=”text” />
      <input type=”submit” />
    </div>
  </form>
  <span></span>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にunloadイベントを設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

unload(関数)
【サンプル説明】
ページを閉じたり、他のページに移動すると、
ポップアップでメッセージが表示されます。

（１）サンプルで表示したページを閉じる。
（２）ブラウザのお気に入りなどから、他のページに移動。
（３）ブラウザの戻るや、進むボタンで他のページに移動。

などをすると、unloadイベントが発生します。
【サンプル３】
<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).unload(function(){
          alert(“寒中お見舞い申し上げます。”);
        });

      });
    </script>
</head>
<body>
このページを閉じて下さい。
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■本日のエラー：2009年で、一番多かったエラーを発表！
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
去年は、たくさんエラーを出したので、
今年も、エラーに悩まされることでしょう。

と、いうことで2009年に一番多くだしたエラーを発表します。
【閉じかっこを書き忘れる】

}　や、)　の書き忘れ。
（原因）
・本などを参考にソースを頭から入力していくので、
最後のあたりで気が抜ける。

・Web上に公開されているサンプルをコピーする時、
後ろの方にあるかっこを含めずコピーしている。
【セミコロンを書き忘れる】

; の書き忘れです。
（原因）
・本などを参考に入力すると、アルファベットの部分を
入力し終わると、入力した気になる。

（入力忘れたまま使いまわして、被害拡大）
◆◇解決方法◇◆

・かっこを記述する時に、閉じかっこも書く。
{}
()

書いてから、かっこ内にソースを記述。

・セミコロンも、かっことセットに書いてしまう。
();

地味ですが、書き忘れることは無くなるでしょう。
【まとめ】
慣れるまでは、

■();;   //セミコロンつけすぎエラー

前もってセミコロンを書いたのを忘れて、つい。

■{]     //かっこの種類が違ってるエラー

変換ミス、指がすべった　など。
悩まされてます。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
本年も『jQuery入門』メールマガジンを
よろしくお願い致します。
深澤（ふかさわ）です。
さて、英語の勉強に再入門中ですが、（詳しくは、前号参照）
『基本にカエル英語の本～英文法入門編レベル１』
著：石崎 秀穂
出版社: スリーエーネットワーク

と、いう本がわかりやすいです。

学生時代、英語が駄目すぎて先生から「寝てていいよ」＆
席順で問題を答えていく時、私は飛ばされるという、
英語『特権階級』な私でも理解できるのに感動です。
ある程度、文法をおさえたら
英語でファンレターを書きたいです！
次回もどうぞ、ごひいきに。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【ビーフェイスが作りました！】
    ■レンタルサーバー比較サイト
      レンタルサーバー探してる人も、そうでない人も、
      ぜひ、ご覧になって下さい。
      http://www.rental-server-search.jp/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  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.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);

        var count = 0;
        $(window).scroll(function () {
          $(“span”).text(++count);
        });
      });
  </script>
  <style>
    div { color:blue; }
    p { color:green; }
    span { color:red;}
  </style>
</head>
<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
  • 2009 11月13日
  • コメントは受け付けていません。

───────────────────────────────
jQuery入門 No.42
───────────────────────────────

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

1)要素にloadイベントを設定する
2)要素にmousedownイベントを設定する
3)要素にmouseenterイベントを設定する
3)要素にmouseleaveイベントを設定する

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

load(関数)

となります。

以下の例では、表示したとき、<div></div>部分に
「loadされました」と表示します。

例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のコードをこれから記述します!
$(window).load(function () {

$(“#message”).html(“loadされました”);
});

</script>
</head>
<body>
<div id=”message”></div>
</body>
</html>

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

mousedown(関数)

となります。

以下の例ではブルーの四角でマウスを押すと
「マウスが押されました」と<p></p>部分に表示します。

例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(){
$(“#box”).mousedown(function(){
$(“p”).append(“マウスが押されました”);
});
});
</script>
<style>
div { width:50px; height:50px; margin:10px;
background:blue;}

</style>
</head>
<body>
<p></p>
<div id=”box”></div>
</body>
</html>

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

mouseenter(関数)
となります。

以下の例ではブルーの四角にマウスが入ると
「マウスが入りました」と<p></p>部分に表示します。

例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(){
$(“#box”).mouseenter(function(){
$(“p”).append(“マウスが入りました”);
});
});
</script>
<style>
div { width:50px; height:50px; margin:10px;
background:blue;}

</style>
</head>
<body>
<p></p>
<div id=”box”></div>
</body>
</html>

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

mouseleave(関数)
となります。

以下の例ではブルーの四角にマウスが入り、四角から離れると
「マウスが離れました」と<p></p>部分に表示します。

例4)
<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(){
$(“#box”).mouseleave(function(){
$(“p”).append(“マウスが離れました”);
});
});
</script>
<style>
div { width:50px; height:50px; margin:10px;
background:blue;}

</style>
</head>
<body>
<p></p>
<div id=”box”></div>
</body>
</html>

tips_admin jQuery

jQuery入門 No.41
  • 2009 11月06日
  • コメントは受け付けていません。

───────────────────────────────
jQuery入門 No.41
───────────────────────────────

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

1)要素のkeypressイベントを実行する
2)要素にのkeypressイベントを設定する
3)要素のkeyupイベントを実行する
4)要素にkeyupイベントを設定する

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

keypress()

となります。
keyupイベントは、キーボードのキーが押された際に発生する
イベントです。

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

keypress(関数)
となります。

以下の例では入力部分に何か入力するとkeypressの回数を
<div></div>部分に表示します。

例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(){
var count=0;
$(“input”).keypress(function () {
$(“#comment”).html(“keypress ” + (++count) );
});
});
</script>
</head>
<body>
<input type=”text” /><div id=”comment”><div>
</body>
</html>

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

keyup()

となります。

keyupイベントは、キーボードのキーが押され、上がった際発生する
イベントです。

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

keyup(関数)

となります。
以下の例では入力部分に何か入力するとkeyupの回数を
<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(){
var count=0;
$(“input”).keyup(function () {
$(“#comment”).html(“keyup ” + (++count) );
});
});
</script>
</head>
<body>
<input type=”text” /><div id=”comment”><div>
</body>
</html>

tips_admin jQuery

jQuery入門 No.40
  • 2009 10月30日
  • コメントは受け付けていません。

───────────────────────────────
jQuery入門 No.40
───────────────────────────────

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

1)要素のfocusイベントを実行する
2)要素にfocusイベントを設定する
3)要素のkeydownイベントを実行する
4)要素にkeydownイベントを設定する

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

focus()

となります。

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

focus(関数)
となります。

以下の例では入力部分にフォーカスすると
背景色がオレンジに変更され、フォーカスが
はずれると、白に戻ります。

例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(){
$(“input”).focus(function () {
$(this).css(“background-color”, “#FC0″)
}).blur(function () {
$(this).css(“background-color”, “#FFF”)
});
});
</script>
</head>
<body>
<input type=”text” />
</body>
</html>

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

keydown()

となります。
keydownイベントは、キーボードのキーを押し下げる時に発生する
イベントです。

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

keydown(関数)

となります。
以下の例では入力部分に何か入力するとkeycodeを
<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(){

$(“input”).keydown(function(event) {
$(“#comment”).html(“keycodeは” + event.keyCode);
});
});
</script>
</head>
<body>
<input type=”text” /><div id=”comment”><div>
</body>
</html>

tips_admin jQuery

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>

  </body>
</html>

tips_admin jQuery

jQueryでInputフィールドを操作する小技いろいろ
  • 2009 10月21日
  • コメントは受け付けていません。

IDEA*IDEAさんでjQueryでInputフィールドを操作する小技いろいろが
紹介されていました。
なかなかよさそうですね。

URL:http://www.ideaxidea.com/archives/2009/10/jquery_with_input_field.html

tips_admin jQuery

jQuery入門 No.38
  • 2009 10月16日
  • コメントは受け付けていません。

───────────────────────────────
　jQuery入門 No.38
───────────────────────────────

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

　1)要素のchangeイベントを実行する
　2)要素のchangeイベントに関数を設定する
　3)要素のclickイベントを実行する
　4)要素をclickイベントに関数を設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のchangeイベントを実行する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

change()

となります。

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

change(関数)
となります。

以下の例では選択された都道府県名を<div></div>に
設定しています。
また、初回change()イベントを実行しています。
例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(){
        $(“select”).change(function(){
          var $str = $(“select option:selected”).text();
          $(“#disp”).html($str +”を選択”);
        }).change();
      });
    </script>
    <style>span {display:none;}</style>

  </head>
  <body>
    <select name=”pref”>
      <option>東京都</option>
      <option selected=”selected”>神奈川県</option>
      <option>埼玉県</option>
      <option >千葉県</option>
    </select>
    <div id=”disp”></div>
  </body>
</html>

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

click()

となります。

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

click(関数)

となります。

以下の例ではクリックすると文字が見えなくなります。

例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”).click(function(){
          $(this).addClass(“hidden”);
        });
      });
    </script>
    <style>
       li{width:200; padding:2px;margin:2px;}
       .hidden{display:none;}
    </style>
  </head>
  <body>
    <ul>
      <li>Outlook</li>
      <li>FireFox</li>
      <li>Safari</li>
      <li>Chrome</li>
    </ul>
  </body>
</html>

tips_admin jQuery

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
2010年3月
日 月 火 水 木 金 土
« 1月    
 123456
78910111213
14151617181920
21222324252627
28293031  
アーカイブ
最近の投稿
タグ
リンク
カテゴリー
メルマガ登録・解除