jQuery入門 : jQuery入門 No.45

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