jQuery, Hello World

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>jQuery</title>
  <script type="text/javascript" src="jquery-1.3.2.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      alert("Document Ready");
    });
  </script>
</head>
<body>
<h1>jQuery</h1>
<p>Hello World.</p>
</body>
</html>
  • $(document) で document オブジェクトをラップした jQuery オブジェクトが返ってきて、
  • jQuery.ready(関数) で jQuery オブジェクトが ready 状態になった場合のイベント処理を登録している
  • document の ready は DOM 構築が終わったイベント。
  • window.onload だと画像とかのロード完了まで待つけど、たいていの JavaScript でやるのは画面内の DOM 要素にスタイルつけたりイベント登録したりなので、必要なのは DOM 構築完了待ちだよね、と。