第4章　「ページ内容が読み込まれたら処理を行なう」

jQueryではイベントも手軽に設定できるようになっています。
まず、ページの読み込みが完了した時に発生するイベントであるwindow.onloadイベント (loadイベント) をjQueryで設定してみます。jQueryの場合は$(function(){ 処理 })とするだけです。非常に簡単にできます。
サンプル1ではページが読み込まれた後にテキストを表示します（サンプル1を実行する）。ちなみに以下のように連続して記述した場合でも問題なく動作します。

$(function(){
$("div").text("イベントも手軽です");
});
$(function(){
$("div").text("2度書いても大丈夫？");
});

【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>jQueryサンプル</h1>
<p>イベントの処理</p>
<div>---</div>
</body>
</html>


【CSS】
h1 {
font-size:14pt;
border-bottom:1px dotted gray;
width:320px;
}


【JavaScript】
$(function(){
$("div").text("イベントも手軽です");
});


$(function(){})ではなく、$(document).ready(function(){})と記述することもできます。古いjQueryを利用したプログラムでは、この記述を見かけるかもしれませんが処理としては同じことになります。jQueryでは$(エレメント).ready()とした場合、そのエレメントが読み込まれ設定された時に処理を実行させることができます。
サンプル2では$(document).ready(function(){})を使ってサンプル1と同様の処理を行なうものです。（サンプル2を実行する）

【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>jQueryサンプル</h1>
<p>イベントの処理</p>
<div>---</div>
</body>
</html>


【CSS】
h1 {
font-size:14pt;
border-bottom:1px dotted gray;
width:320px;
}


【JavaScript】
$(document).ready(function(){
$("div").text("イベントも手軽です");
});

[目次へ]