jQuery入門。jQueryの基本とセレクター、イベントについて

TOP
コラム
jQuery入門。jQueryの基本

jQueryとは

jQueryとは、JavaScriptをより使いやすく簡単にしたJavaScriptライブラリーです。
HTML、CSSがWebページのデザインに関する言語であるのに対し、JavaScriptはユーザーの操作に応じてWebページに動きを与える言語です。
例えば、クリックしたらメニューが画面上からヌルっと出てくる動きであったり、画像をクリックすると別の画像に切り替わったり、などといった使われ方がされています。
このjQueryを利用することで、本家JavaScriptよりもシンプルな記述で同様の効果を得ることができ、プログラミングの入門にも適しています。
当記事ではjQuery初心者のために、jQueryの基本とセレクターの使い方についてご紹介します。
なお、jQueryのダウンロードは済んでいるものとします。

readyメソッド

<!DOCTYPE html>
<html lang="ja">
    <head>
    <meta charset="UTF-8">
        <title>jQuery入門</title>
        <script>
            alert("jQuery入門");
        </script>
    </head>
    <body>
        <h1>jQuery入門</h1>
        <p>初心者向けの解説です。</p>
    </body>
</html>

サンプルコードを見てみましょう。
「<script>」という記述がありますが、これはJavaScriptの記述を行うためのHTMLの要素です。
HTMLファイルをブラウザが読み込む際、コードの先頭から1行ずつ読み込んでいきます。
しかし、それだと上記のコードではある不具合が起きてしまいます。

先頭から1行ずつ読み込んでいくと、いずれ

<script>
    alert("jQuery入門");
</script>

この記述が実行されます。
しかし、Webページの中身である「body」の内容はまだ読み込まれていないので何も表示されないままです。
上記のスクリプトはアラートの表示の記述ですので、ユーザーが「OK」ボタンを押した後、ようやくページが表示されます。
それではよくないので、jQueryでは「ready」というメソッドを使用し、スクリプトを実行するタイミングを制御します。
「readyメソッド」は、中に書かれている命令を、HTMLファイルの読み込みが終わった後に実行します。
「readyメソッド」の記述は以下の通りです。

$(document).ready(function(){
    jQueryの記述
});

ちなみにこの記述は省略形で使用することもできまして

$(function(){
    jQueyrの記述
});

この記述でも同様の意味を持ちます。

jQueryを書く際は、ほとんどの場合、最初に「readyメソッド」を記述します。
HTMLのドキュメントタイプ宣言と同じように「jQueryの最初に書くもの」として覚えましょう。

セレクター

「セレクター」とは、どのHTML要素を操作するのかを指定するための記述です。
セレクターで指定した要素に対してjQueryの命令を記述していきます。
以下のコードを見てみましょう。

$(function(){
    $("セレクター").命令
});

このように、「("")」ここに操作したいHTML要素を指定し、「.」で区切った後に、jQueryの命令を記述します。
以下のサンプルコードを見てみましょう。

<body>
    <h1>jQuery入門</h1>
    <p>初心者向けの解説です。</p>
</body>

$(function(){
    $("p").css("color","blue");
})

これを実行すると、p要素がすべて青色で表示されます。

<body>
    <h1>jQuery入門</h1>
    <p class="sample">初心者向けの解説です。</p>
</body>

$(function(){
    $(".sample").css("color","blue");
})

クラス名を指定することで、特定のクラスに対して命令を行うこともできます。
これを「クラスセレクター」といいます。
他にもIDセレクターや子孫セレクターなど、様々なセレクターがあります。

イベント

先ほどまではjQueryがHTMLファイルが読み込まれたタイミングで実行されているので、イマイチjQueryの使い道が理解しづらかったかと思われます。
そこで次は、ボタンを押すと画像が変更されるプログラムを書いてみましょう。そのためには「イベント」について知る必要があります。

イベントとは、簡潔にいえば「処理を実行するタイミング」です。
先ほどのHTMLファイルが読み込まれたタイミング、というのもイベントですし、ボタンが押された時、マウスオーバーされた時など様々です。
今回はよく使われる「click()」イベントを例にあげて解説します。

以下のコードを書く前に2つの画像を用意しておいてください。

<body>
        <button>jQuery入門</button>
        <p><img src="〇〇.jpg" alt="〇〇">

このコード内の画像のパスには、ご自身で用意した画像のパスとalt属性を入力してください。

    $(function(){
    $("button").click(function(){
        $("img").attr("src","〇〇.jpeg").attr("alt","〇〇");
    });
    });

次にこのコード内の「〇〇」には、HTMLのコードでは使用しなかったほうの画像のパスとalt属性を入力してください。

このコードをブラウザで実行し、ボタンをクリックすると画像が切り替わります。

attr()メソッドは、属性値を変更するメソッドで、上記のコードでは「src属性」と「alt属性」を書きかえるという命令を行うことによって画像とaltの変更処理を行っています。

最後に

jQueryの入門的な内容のご紹介となりました。
1度の記事では詳しい内容は紹介しきれませんでしたので、今回はjQueryを使ったシンプルな処理を例にあげて、jQueryに触ってみることを目的としました。
参考になれば幸いです。