jQuery入門 No.46
- 2010 01月29日
- コメントは受け付けていません。
───────────────────────────────
jQuery入門 No.46
───────────────────────────────
【News!!】jQuery1.4.1がリリースされました！
http://jquery.com/
今号から1.4.1を使用していますので
サンプルの動作確認の際はご注意ください。
・45号までは、1.3.2
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
・今号から、1.4.1
<script type=”text/javascript” src=”jquery-1.4.1.min.js”></script>
と、上から4行目の指定を変えています。
───────────────────────────────
■目次
───────────────────────────────
1)要素にshowエフェクトを設定する
2)要素にshowエフェクトとスピードを設定する
3)要素にhideエフェクトを設定する
4)要素にhideエフェクトとスピード、コールバック関数を設定する
5)本日のエラー：\（エンマーク）が、表示できない
6)編集後記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にshowエフェクトを設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】
show()
【サンプル説明】
とある、オムライス屋のメニューが隠されています。
「メニューは、こちら」ボタンを押すと
メニューが表示されるようになります。
なぜ隠されているのかは謎です。
【サンプル１】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.4.1.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“#priceShow”).click(function(){
$(“h2″).show(); //showで、h2タグを表示。
$(“ul”).show(); //showで、ulタグを表示。
});
});
</script>
<style>
h2 { display:none; color:tomato; }
ul { display:none; }
</style>
</head>
<body>
<button id=”priceShow”>メニューは、こちら</button>
<h2>おすすめメニュー</h2>
<ul id=”menu”>
<li>オムライス</li><p>¥900</p>
<li>オムシチュー</li><p>¥1,315</p>
<li>オムライスのオムライスのせ</li><p>時 価</p>
</ul>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にshowエフェクトとスピードを設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】
show(“速度”,[コールバック関数])
【サンプル説明】
とある、オムライス屋のメニューの、
値段が隠されています。
メニューの近くにあるボタンを押すと
値段が表示されます。
更に、メニューごとに表示する
スピードを設定しました。
“slow”, “normal”, “fast”もしくは、
ミリ秒を数値で設定できます。
今回は、$(“#price4″).show(5000);
と、5000を指定しています。
すると、５秒かけて表示します。
じっと、表示されるのをお待ちください。
【サンプル２】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.4.1.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“#priceShow1″).click(function(){
$(“#price1″).show(“slow”); //showにスピード”slow”を設定
});
$(“#priceShow2″).click(function(){
$(“#price2″).show(“normal”); //showにスピード”normal”を設定
});
$(“#priceShow3″).click(function(){
$(“#price3″).show(“fast”); //showにスピード”fast”を設定
});
$(“#priceShow4″).click(function(){
$(“#price4″).show(5000); //showにスピード5000を設定
});
});
</script>
<style>
h2 { color:tomato; }
p { display:none; }
</style>
</head>
<body>
<h2>おすすめメニュー</h2>
<ul id=”menu”>
<li>オムライス</li>
<button id=”priceShow1″>値段(slow)</button>
<p id=”price1″>¥900</p>
<li>オムシチュー</li>
<button id=”priceShow2″>値段(normal)</button>
<p id=”price2″>¥1,315</p>
<li>オムライスのオムライスのせ</li>
<button id=”priceShow3″>値段(fast)</button>
<p id=”price3″>時 価</p>
<li>大盛り</li>
<button id=”priceShow4″>値段(5000)</button>
<p id=”price4″>料金２倍</p>
</ul>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にhideエフェクトを設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】
hide()
【サンプル説明】
とある、オムライス屋のメニューを例にしています。
「値段を隠す」ボタンを押すと値段が隠れます。
値段を知られたくない時も、これで安心です。
【サンプル３】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.4.1.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“#priceHide”).click(function(){
$(“p”).hide(); //hideで、pタグを隠してる。
});
});
</script>
<style>
h2 { color:tomato; }
</style>
</head>
<body>
<button id=”priceHide”>値段を隠す</button>
<h2>おすすめメニュー</h2>
<ul id=”menu”>
<li>オムライス</li><p>¥900</p>
<li>オムシチュー</li><p>¥1,315</p>
<li>オムライスのオムライスのせ</li><p>時 価</p>
</ul>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にhideエフェクトとスピード、
コールバック関数を設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】
hide(“速度”,[コールバック関数])
【サンプル説明】
とある、オムライス屋のメニューに、
料理説明文を追加しました。
「説明文を隠す」ボタンで、説明文を隠します。
show同様、隠れるスピードをhideにも設定できます。
“slow”, “normal”, “fast”もしくは、
ミリ秒を数値で設定できるので、
上から、”fast”, “normal”, “slow”の順に
設定しました。
なので、時間差で隠れていきます。
更に、hideが実行し終わったら
コールバック関数を呼ぶようにしました。
説明文が隠れると、ポップアップで
メッセージが表示されます。
OKを押すと、「説明文を隠す」ボタンも隠れます。
hideで隠して、隠して、隠し倒してください。
◆コールバック関数とは
hideを例にします。
隠すスピードを設定し、隠し終えたら、
設定したコールバック関数を実行します。
以下が、呼び方です。
（例1）hideの処理後にコールバック関数を呼ぶ。
$(“#bun3″).hide(“slow”, function(){
//処理内容を書く
});
・スピード設定を書いた後ろを,（カンマ）で区切り、
呼びたい関数を書く。
（例2）hideのスピード設定なしで、
コールバック関数を呼ぶ。
$(“#bun3″).hide(function(){
//処理内容を書く
});
・スピードの設定なしでも関数を呼べます。
※hideを例にしていますが、showでも同じように
コールバック関数を呼ぶことができます。
【サンプル４】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.4.1.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
$(“#bun1″).hide(“fast”);
$(“#bun2″).hide(“normal”);
$(“#bun3″).hide(“slow”, function(){ //コールバック関数
alert(“説明文が隠れましたか？”);
$(“#hideBun”).hide(“fast”);
});
});
});
</script>
<style>
h2 { color:tomato; }
</style>
</head>
<body>
<button id=”hideBun”>説明文を隠す</button>
<br />
<h2>おすすめメニュー</h2>
<ul id=”menu”>
<li>オムライス</li><p>¥900</p>
<div id=”bun1″>新鮮な卵を使った、オムライスです。</div>
<br />
<li>オムシチュー</li><p>¥1,315</p>
<div id=”bun2″>もっと新鮮な卵を使った、オムライスです。</div>
<br />
<li>オムライスのオムライスのせ</li><p>時 価</p>
<div id=”bun3″>シェフの気分で、のせる数が変わるオムライスです。</div>
<br />
</ul>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■本日のエラー：\（エンマーク）が、表示できない
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
とある、オムライス屋のメニューが、
うまく作れず困りました。
メニューの中で、\を使いたかったのですが、
ブラウザによっては、バックスラッシュが表示されます。
jQuery以前のところでつまづきました。
【書き方】
¥
と、書くと表示されるようになりました。
【まとめ】
意外な落とし穴がある。
そして今回は、900円という書き方でも良かった気がします。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
オムライス屋になりました、深澤（ふかさわ）です。
作ったことがないので、さきほど閉店しました。
さて今回は、オムライス屋のメニューと
テーマを絞ってサンプルを製作しました。
しかし製作中、コールバック関数をどう呼んでいいのか
わからず、調べるのに苦労しました。
なので、呼び方の解説をいれてみました。
解説がしつこいのは、そのせいです。
次回もどうぞ、ごひいきに。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【こちらも、ごひいきに】
■レンタルサーバー比較サイト■
ワンクリック検索をお試しください。
レンタルサーバー探しをお手軽に。
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
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
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
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- アーカイブ
- 最近の投稿
- タグ
- カテゴリー