jQuery でページ表示時にjavascriptを実行するコードと実行結果

jQuery でページの表示時にjavascriptを実行するコードと実行結果を紹介します。

補足

jQueryを利用しない実装方法はこちらの記事を参照してください。

コード

jQueryReadyDemo

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" src="jquery-2.0.3.js"></script>
</head>
<body>
  <script type="text/javascript">
    $(document).ready(function () {
      alert("Helo jQuery World!");
    })
  </script>

  テストページ
</body>
</html>

解説

jQueryでは

$(document).ready(function () {
  (実行するjavascript....)
})

と記述するとページ表示時にブロック内のjavascriptを実行できます。

また、コードの実行タイミングはページの読み込み直後になります。

実行結果

上記のHTMLファイルを表示すると下図の結果となります。javascriptが実行され、アラートダイアログが表示されます。

補足:loadとの違い

以下のコードでも同様の動作となります。
readyはページのDOMツリーの構築が完了した時点でイベントが発生します。一方loadDOMツリーの構築が完了し、画像などのファイルの読み込みがすべて完了した時点でイベントが発生します。

jQueryReadyDemo

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" src="jquery-2.0.3.js"></script>
</head>
<body>
  <script type="text/javascript">
    $(window).load(function(){
      alert("Helo jQuery World!");
    })
  </script>

  テストページ
</body>
</html>

jQueryReadyDemo

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" src="jquery-2.0.3.js"></script>
</head>
<body>
  <script type="text/javascript">
    $(window).on('load',function(){
      alert("Helo jQuery World!");
    })
  </script>

  テストページ
</body>
</html>

著者

ジョニー

iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。

掲載日: 2013-12-26

目次

jQuery でページ表示時にjavascriptを実行するコードと実行結果

コード

解説

実行結果

補足:loadとの違い

関連するページ