jQuery - 最初に実行される処理
公開日：2018-12-10
更新日：2019-05-14
更新日：2019-05-14
1. 概要
jQuery で最初に実行される処理は、<script> で定義した処理です。
この処理は、HTML が全て読み込まれる前に実行される可能性があるため、
DOM の操作を行う場合は、操作対象要素よりも後ろに <script> を書く必要があります。
確実に DOM の操作を行いたい場合や、HTML が読み込まれた後に実行したい場合には、
jQueryのバージョンによって順番が変わるため要注意です。
この処理は、HTML が全て読み込まれる前に実行される可能性があるため、
DOM の操作を行う場合は、操作対象要素よりも後ろに <script> を書く必要があります。
確実に DOM の操作を行いたい場合や、HTML が読み込まれた後に実行したい場合には、
$(function() {
処理;
});
$(window).on('load', function() {
処理;
});
jQueryのバージョンによって順番が変わるため要注意です。
2. サンプル
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
$(window).on('load', function() {
console.log("windows.load()-1");
});
$(function() {
console.log("$(function(){}-1");
});
console.log("1");
$(function() {
console.log("$(function(){}-2");
});
console.log("2");
$(window).on('load', function() {
console.log("windows.load()-2");
});
</script>
</body></html>
jQuery3 では、<script>直下、loadイベント、$() の順番で実行されます。
1
2
windows.load()-1
windows.load()-2
$(function(){}-1
$(function(){}-2
jQuery1 と jQuery2 では、<script>直下、$()、loadイベントの順番で実行されます。
1
2
$(function(){}-1
$(function(){}-2
windows.load()-1
windows.load()-2
