このページの本文へ

「あとで」読まずに今すぐ始める

40分で覚える!jQuery速習講座

2010年02月16日 11時00分更新

西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷
jQuery

 いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは?

 そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。



【0分目:導入編】
jQueryのダウンロードと利用方法

 jQueryのライブラリー本体(JavaScriptファイル)は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。

コード
001.png
jQueryは公式サイト。「Download jQuery」から最新のjQueryをダウンロードできる

 グーグルのWebサービス「Google AJAX Libraries API」を利用すると、jQuery本体をサーバーにアップしなくてもすぐに使えます。

コード
002.png
Google AJAX Libraries APIではjQuery以外にも、「jQuery UI」「Prototype」「script.aculo.us」「MooTools」など主要なライブラリーが直接利用できるよう提供されている


【3分目:導入編】
jQueryのコードを記述する場所

 jQueryのコードは、jQueryを読み込んだ後のscript要素内に、次のような書式で記述していきます。

コード

 なお、上のコードは$(document).ready()の省略形ですので、次のように書いてもOKです。

コード

 jQueryはページの読み込みが完了した後に、記述した処理を実行します。

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング