tasukujp/jquey_execution.html

## jquey_execution.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>jQuery実行タイミングの確認</title>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
        // パターン1
        $(window).load(function() {
            alert("これはwindow.loadのタイミングです。");
            $('#window').text("実行されました。")
                .css('color','red');
        });
        // パターン2
        $(document).ready(function() {
            alert("これはdocument.readyのタイミングです。");
            $('#document').text("実行されました。")
                .css('color','red');
        });
        // パターン3-1
        alert("これはインライン1のタイミングです。");
        $('#inline1').text("実行されました。")
            .css('color','red');
    </script>
</head>
<body>
    <h1>jQuery実行タイミングの確認</h1>
    window.loadが<span id="window">実行されていません。</span><br />
    document.readyが<span id="document">実行されていません。</span><br />
    インライン1が<span id="inline1">実行されていません。</span><br />
    インライン2が<span id="inline2">実行されていません。</span>
    <script>
        // パターン3-2
        alert("これはインライン2のタイミングです。");
        $('#inline2').text("実行されました。")
            .css('color','red');
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<title>jQuery実行タイミングの確認</title>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script>
	// パターン1
	$(window).load(function() {
	alert("これはwindow.loadのタイミングです。");
	$('#window').text("実行されました。")
	.css('color','red');
	});
	// パターン2
	$(document).ready(function() {
	alert("これはdocument.readyのタイミングです。");
	$('#document').text("実行されました。")
	.css('color','red');
	});
	// パターン3-1
	alert("これはインライン1のタイミングです。");
	$('#inline1').text("実行されました。")
	.css('color','red');
	</script>
	</head>
	<body>
	<h1>jQuery実行タイミングの確認</h1>
	window.loadが<span id="window">実行されていません。</span><br />
	document.readyが<span id="document">実行されていません。</span><br />
	インライン1が<span id="inline1">実行されていません。</span><br />
	インライン2が<span id="inline2">実行されていません。</span>
	<script>
	// パターン3-2
	alert("これはインライン2のタイミングです。");
	$('#inline2').text("実行されました。")
	.css('color','red');
	</script>
	</body>
	</html>