jQuery - 最初に実行される処理

公開日：2018-12-10 更新日：2019-05-14
[jQuery]

1. 概要

jQuery で最初に実行される処理は、<script> で定義した処理です。
この処理は、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

Tag

New Article