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

このページのタグ:[JavaScript] [jQuery]
jQuery でページの表示時にjavascriptのコードを実行するコードを紹介します。

コード

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について
iPentec all rights reserverd. (ISDC)