2014.06.26
WEB

jQuery、簡単に入門編を書いてみた。

さむデザインちーむ

サッカーWorld Cupでめったにしない早起きをして生活のリズムを崩している、デザインちーむのさむです。

ホームページには欠かせないリッチなUIを支えている「jQuery」について少し書いてみます。
Webデザイナーであれば避けて通れないですね。

1 jQueryとは？
2 基本的な記述方法
3 HTML内で使用するには
4 readyメソッド
5 最終ステップ
6 まとめ

jQueryとは？

簡単な記述でWebページに様々な効果や動きを加えることができるJavaScriptのライブラリーの1つです。
2006年にジョン・レッシング氏により開発されました。
誰だろ？と思い検索するとここにインタビュー記事がありました。
ん～、年齢不詳感がハンパないですね。

現在ではJavaScriptライブラリーの中ではトップレベルの人気です。
以前は違ったようですが。

基本的な記述方法


$("セレクタ").メソッド(パラメーター);

セレクタの例


$("#content")　⇒　idセレクタ
$(".content")　⇒　classセレクタ
$("a img")　⇒　子孫セレクタ

CSSでなじみのものばかりですね、このセレクタを利用して記述していきます。

メソッドの例


CSS("プロパティ名","値")　⇒　指定したセレクタのCSSを変更する
click()　⇒　指定したセレクタのクリック時に処理を実行する
hover()　⇒　指定したセレクタのマウスオーバー、マウスアウト時に処理を実行する

使用例

例えばaタグ部分の文字色を赤にしたい時は以下のように記述します。


$("a").css("color","red");

さらに下線も無くしたいときは（複数指定のとき）


$("a").css({"color":"red","text-decoration":"none"});

上記のように記述します。
ほとんどCSSと同じで分かりやすいですよね。

HTML内で使用するには

上記の記述だけでも理解できれば簡単なことならできそうですね。
続いてはHTML内に記述する方法を説明します。

jQueryのサイトからダウンロード

jQueryのサイトからダウンロードすれば簡単に使用することができます。
またjQueryには、圧縮版のMinifiedと、非圧縮版のUncompressedがありますが一般的には読み込みの早い圧縮版（改行などが排除されて軽量化されている）を使ってるのではと思います。
ファイル名の後半の数字はバージョン情報です。

ダウンロード後は以下のようにhead内にパスを記述して読み込めばOKです。
(例では同階層にjsフォルダを作成しその中に保存してます)


<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>

上記を以下のように記述


<head>
    <meta charaset="utf-8">
    <title>jQueryテスト</title>
    <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
</head>

最近ではbody要素を閉じる直前にscript要素を記述することが多いです。
理由はJavaScriptの読み込みを後回しにしてHTMLやCSSの描画を優先させ表示速度の高速化を図っているのです。
スマホなどの環境をターゲットにするのであればbodyを閉じる直前に記述したほうが良いと思います。

「Google Hosted Libraries」を利用する

ダウンロードしなくても「Google Hosted Libraries」を利用する方法もあります。
googleがサーバーにホスティングしているので、リンクを記述するだけで利用することができます。
しかも「gzip」と呼ばれる形式で圧縮されているので大幅に転送量を抑えています。
さらにユーザーが「Google Hosted Libraries」を利用しているWebページを閲覧していればファイルがキャッシュされている可能性があるため、自分のサイトに初めて訪れる場合でも表示速度の高速化が期待できます。

とても便利で簡単ですね。

使用例


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

これで準備はOKです。

続いて処理を行いたい内容をscript要素で記述していきます。


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
    ここに処理を記述
</script>

今回は簡単に記述するために直接記述してますが、本来は外部ファイル化したほうが良いです。
外部化されたJavaScriptのファイルがキャッシュ化され、2回目以降の表示を高速化できる可能性があるためです。

readyメソッド

スクリプトを実行するタイミングを制御するのが「ready」メソッドというものです。
HTMLを読み込む前にスクリプトが実行されると意図した動作をしません。
そこでHTMLの読み込みが終了した段階で処理を実行させるためにこのメソッドの記述が必須です！


$(document).ready(function(){
    ここにjqueryの処理を記述
});

上記を省略して以下のように書くのが一般的です。


$(function(){
    ここにjQueryの処理を記述
});

最終ステップ

以上のものを組み合わせると。


<html>
<head>
    <title>jQueryテスト</title>
</head>
<body>

    ここは省略します

    <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
    <script>
        $(function(){
            $("a").css({"color":"red","text-decoration":"none"});
        });
    </script>
</body>
</html>

これでHTML内のaタグ部分の色などを変更することができました。
長くなりましたので今回はここで終了します。