Ajaxサンプル：DOM書き換えサンプル [jQuery, prototype.js]
jQueryとprototype.jsを使った場合のDOM書き換えサンプルを紹介します。
Ajaxフレームワークの代表であるjQueryとprototype.jsを使った場合の記述方法の違いが分かるように纏めました。単純なDOMの書き換えプログラムを紹介しますが、同時にloadイベントとclickイベント処理方法も参考にしてください。jQueryでは、明示的にloadという言葉を記述しませんが、HTML読み込み後DOMが構築されるとすぐに実行させたい場合は、「$(function(){//ここに処理を記述;})」の形式でプログラムを書きます。DOM構築のタイミングはブラウザによって異なるのでクロスブラウザ対策が必要ですが、jQueryでは、非常に簡単な記述で処理することが可能です。
[実行サンプル]
テキスト入れ替え [prototype.js]
テキスト入れ替え [jQuery]
[サンプル]
idがcontentsの領域の文字を書き換える。
jQueryの場合
jQueryを使った場合は、「$(”セレクター”).html(”書き換えたい文字”)」の形式で文字の書き換えを行ないます。以下の例は、ボタンをクリックすると文字か書き換わるにした例です。clickイベントのセットの仕方なども参考にしてください。
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript" type="text/javascript"
src="js/lib/jquery.js"></script>
<script type="text/javascript">
<!--
$(function(){
$("#btn").click(function(){
$("#contents").html("jQueryで書き換えました");
});
});
// -->
</script>
<title>Ajaxサンプル：テキスト入れ替え(jQuery)</title>
</head>
<body>
<h1>Ajaxサンプル：テキスト入れ替え(jQuery)</h1>
<form>
<input id="btn" type="button" value="書き換え" />
</form>
<br />
<div id="contents">ここを書き換えます</div>
</body>
</html>
prototype.jsの場合
prototype.jsを使った場合は、「$(”ID名”).innerHTML=”書き換えたい文字”」で文字の書き換えを行ないます。以下の例では、onloadイベント発生後に、event.observe()を使ってボタンクリックを検出するようにした例です。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript" type="text/javascript"
src="js/lib/prototype.js"></script>
<script type="text/javascript">
<!--
Event.observe(window, "load", function(){
Event.observe("btn", "click", function(){
$("contents").innerHTML = "prototype.jsで書き換えました";
},false);
},false);
// -->
</script>
<title>Ajaxサンプル：テキスト入れ替え(prototype.js)</title>
</head>
<body>
<h1>Ajaxサンプル：テキスト入れ替え(prototype.js)</h1>
<form>
<input id="btn" type="button" value="書き換え" />
</form>
<br />
<div id="contents">ここを書き換えます</div>
</body>
</html>
Loading ...
