f:id:tasukujp:20140831185540g:plain

jQueryとはJavaScriptライブラリの1つです。と聞くと私も最初驚いたんですが、これだけメジャーになってくると一つの言語みたいなイメージですよね。慣れてくると非常に便利なライブラリなのでまずは導入から使い方までを書いていきます。

jQueryの入手

公式サイトからダウンロードしてきます。
リンク先のDownloadメニューからファイルを選択しますが1.x系と2.x系の所にそれぞれDownloadが3種類あるかと思います。 compressedと書いてあるリンクを右クリック->別名でリンク先を保存でOKです。3つのファイルの違いはまた別途まとめたいと思いますが、通常はcompressedを使うと覚えておきましょう。

実際に使ってみる

下記のようなHTMLを作成します。
<script src="jquery-1.11.1.min.js">とあるように、先ほどダウンロードしたjQueryファイルを記述します。このHTMLファイルと同じディレクトリに置いた場合はこの指定で大丈夫です。基本は<head></head>内でjQueryを読み込み、その後に処理を書いていきます。それでは早速ブラウザで表示させて、「jQueryの使い方」と表示されている部分をクリックしてみましょう。「HelloWorld」と書かれたダイアログが表示されたら成功です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>jQueryの使い方</title>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        $(function() {
            $('div').click(function() {
                alert("HelloWorld");
            });
        });
    </script>
</head>
<body>
    <div>jQueryの使い方</div>
</body>
</html>

補足

<script src="jquery-1.11.1.min.js">の箇所はダウンロードしたファイルじゃなくても、公式サイト-Downloadメニュー内の「jQuery's CDN provided」に書かれているscriptタグをそのまま貼り付けて使用する事も可能ですが、その場合はインターネットに繋がっていないと読み込めませんので注意が必要です。
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<head></head>内で読み込むと書きましたがこれは今までの基本の話しで、今の流行はbodyの閉じタグ</body>の直前で読み込むらしいです。その理由はまた別途。
ちなみに</body>と</html>の間でも読み込む事は可能です。