このOKwaveのパスワードを忘れた人ようのページをみて

質問

このOKwaveのパスワードを忘れた人ようのページをみて
どのようにつくっているのかが知りたいです。
http://okwave.jp/forgot/

フォームを選択した際に、下に項目に関する注意事項がずれて表示されますが
これはなんのJSをつかっているのでしょうか？
またCSSでの表記はどこの項目になるのでしょうか？

参考になるようなAjaxのサイトなどがあればそれもあわせて教えてください。

回答No.1

yyr446 · ベストアンサー

その部分は、jQueryという有名なライブラリーを使っています。
http://docs.jquery.com/Main_Page
http://semooh.jp/jquery/
該当部分のコードは
$(function(){
(function() {
$('div.red').hide();
var show_help = function(){
var help_id = $(this).attr('id')+"_help";
$("#"+help_id).toggle("fast");
};
var help_dom = $('input.show_help');
help_dom.focus(show_help);
help_dom.blur(show_help);
})();
- - - - - - - - - - - - - - - - - -
});
ですね、jQueryのいくつかのコア機能とセレクター指定で実現してます。
例えば、
help_dom = $('input.show_help');
というのは、input要素でshow_helpクラスを持つ要素の取得です。

help_dom.focus(show_help);
とういのは、help_dom要素がフォーカスされた時、show_help関数を実行します。

$('div.red').hide();
とういのは、redクラスを持つdiv要素を非表示にするという操作です。

var help_id = $(this).attr('id')+"_help";
$("#"+help_id).toggle("fast");
とういのは、this(help_dom要素)のidに'_help'をつなげたidを
持つ要素のCSSを高速にトグル動作（表示・非表示の切り替え）
を行うといった意味です。

詳しくは、jQueryのページでお勉強してね。

お礼

大変わかりやすい回答ありがとうございました！！

関係ないですが、OKWAVEのインターフェースがかわって使いにくいですね・・・
前のままでよかったのに・・・