ready()：ページ読込み済み（ロード済み）の後で処理をする
2016/06/20
ページ読込み済み（ロード済み）の後で処理をする
ページ読込み済み（ロード済み）の後で処理をするの書式
$(document).ready(function(){
ページ読込み完了後にする処理内容
});
ページ読込み済み（ロード済み）の後で処理をする場合は、$(document).ready(function(){ ページ読込み完了後にする処理内容 });をします。
このreadyメソッドを使い処理を書くのは基本中の基本となります。
もしこれを使わずにページ読込みが完了する前に処理をしてもHTMLに反映がされないためです。
ここでページ読込みが終わる前に処理をするとどうなるかをサンプルをあげて見ます。
ページ読込みが終わる前に処理をするjQueryのサンプルコード
１．ページ読込みが終わる前にdivタグにテキストをセット（反映されない）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
<!--
div{margin: 10px; padding: 10px; border: 1px solid #000000; }
-->
</style>
<script src="../../js/jquery-1.12.2.min.js"></script>
<script>
// ページ読込み完了するまえに動作するので、divタグの文字は変わらないまま
$("#divMessage").text("divタグの文字は変わった");
</script>
</head>
<body>
<div id = "divMessage">divタグの文字は変わるか？</div>
</body>
</html>
ページ読込みが終わる前に処理をするjQueryのサンプルの結果
divタグにテキストをセットしようにもページ読込みが終わる前なので対象となるdivタグが見つからず、当然テキストもセット出来ません。
ページ読込みが終わりjQueryでの処理の際にhtmlとして対象を認識させてから処理させる必要があります。
ページ読込みが終わった後に処理をするjQueryのサンプルコード
１．ページ読込みが終わった後にdivタグにテキストをセット（反映される）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
<!--
div{margin: 10px; padding: 10px; border: 1px solid #000000; }
-->
</style>
<script src="../../js/jquery-1.12.2.min.js"></script>
<script>
$(document).ready(function(){
// ページ読込み完了後に動作するので、divタグの文字は変わる
$("#divMessage").text("divタグの文字は変わった");
});
</script>
</head>
<body>
<div id = "divMessage">divタグの文字は変わるか？</div>
</body>
</html>
ページ読込みが終わった後に処理をするjQueryのサンプルの結果
ページ読込みが終わった後なので、jQueryでの処理の際にdivタグを認識出来てテキストもセット出来ます。
また、このように書くことも出来ます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
<!--
div{margin: 10px; padding: 10px; border: 1px solid #000000; }
-->
</style>
<script src="../../js/jquery-1.12.2.min.js"></script>
<script>
jQuery(function(){
// ページ読込み完了後に動作するので、divタグの文字は変わる
$("#divMessage").text("divタグの文字は変わった");
});
</script>
</head>
<body>
<div id = "divMessage">divタグの文字は変わるか？</div>
</body>
</html>
さらにシンプルに書くとこんな感じ。
これが一番シンプルなので、当ブログではこの書き方を採用しております。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
<!--
div{margin: 10px; padding: 10px; border: 1px solid #000000; }
-->
</style>
<script src="../../js/jquery-1.12.2.min.js"></script>
<script>
$(function(){
// ページ読込み完了後に動作するので、divタグの文字は変わる
$("#divMessage").text("divタグの文字は変わった");
});
</script>
</head>
<body>
<div id = "divMessage">divタグの文字は変わるか？</div>
</body>
</html>