３分で始めるJQuery

とにかく手身近にJQueryを使うのに最低限の知識を整理しておきます。

JQueryのソースのダウンロード

JQueryのページからソースをダウンロードします。ソースコードにはいくつかの種類があり、Minifiedは改行コードやインデントを除去して、ファイルサイズを小さくしたものです。Uncompressedは人間がよみやすいように整形されていますが、ファイルサイズがMinifiedよりも大きくなってしまいます。

JQueryの読み込み

自分のサイトの要素の中に

^?View Code HTML

1	<script type="text/javascript" src="path/to/sourcefile.js"></script>

のように埋め込みます。
試しに少し動かしたいだけの場合は

^?View Code HTML

1	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

のようにJQueryのサイトのアドレスを書いても動きます。ただJQueryのサイトに負荷をかける原因となりますので、特別な場合を除いては自分のサーバーでコードをホスティングしましょう。

実行処理を書く

^?View Code JAVASCRIPT

<html>
<head>
  <script type="text/javascript" src="path/to/jquery.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
  // ここに処理を記述します
});
  </script>
</head>
<body>
  <a href="http://jquery.com/">jQuery</a>
</body>
</html>

上のように処理を書きます。

^?View Code JAVASCRIPT

1
2
3

 $(document).ready(function(){
  // ここに処理を記述します
});

内に処理を書くことで、htmlのドキュメントが読み込まれた後すぐに処理が行われることになります。

試しにbody内にあるa要素を消してみましょう。

^?View Code JAVASCRIPT

<html>
<head>
  <script type="text/javascript" src="path/to/jquery.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
  // ここに処理を記述します
  $("a").hide();
});
});
  </script>
</head>
<body>
  <a href="http://jquery.com/">jQuery</a>
</body>
</html>