【jQuery入門】$(function(){…})とは?

所有時間1分

今回はjQueryを使用する際に良く記述される「$(function(){…})」の役割について紹介します。

目次

$(function(){…})の役割

    $(function(){
      HTML要素が全て読み込まれると処理が実行される
    })

結論から言うと、$(function(){…})はHTML要素が全て読み込まれてから処理を実行させる記述だと思っていれば大丈夫です。

なぜHTML要素が読み込まれるのを待つ必要があるのかと言うと、jQueryで選択した要素が読み込まれていなければ記述した処理が実行されずエラーが発生してしまうからです。

HTMLは上から順に読み込まれていくので、HTML要素の後にjQuery(JS)で処理する場合は$(function(){…})を記述しなくてもOKです。

HTML要素の後にJQuery(JS)を記述

<body>
  <button id="button">クリック</button>
  <script>
    $('#button').on("click", function() {
      alert("クリックされました。")
    })
  </script>
</body>

このコードではHTML要素の後でJQueryを記述しているので正常に処理が実行されます。

$(function(){…})がない場合

  <script>
    $('#button').on("click", function() {
      alert("クリックされました。")
    })
  </script>
  <button id="button">クリック</button>

このコードではHTML要素の前にJQueryを記述しており、HTML要素が読み込まれる前にjQueryで定義した処理が実行されるためエラーが発生します。

$(function(){…})がある場合

  <script>
    $(function() {
      $('#button').on("click", function() {
        alert("クリックされました。")
      })
    })
  </script>
  <button id="button">クリック</button>

このコードではHTML要素の前にJQueryを記述していますが、$(function(){…})でHTML要素が読み込まれるのを待っているため正常にjQueryで定義した処理が実行されます。

$(function(){…})の別の記述方法

$(document).ready(function{
  //実行したい処理
});
jQuery(document).ready(function(){
  //実行したい処理
});
jQuery(function(){
  //実行したい処理
});

$(function(){…})以外にも上記のような記述で、HTML要素が読み込まれるまでjQueryで定義した処理が実行されるのを待つことができます。

以上です。

URLをコピーする
URLをコピーしました!
目次
閉じる