jQueryことはじめ

• 目次

1. jQueryとは？
2. jQueryのメリット
3. jQueryの今(2013/11)
4. jQueryの使い方

• jQueryとは？

jQueryはjavascriptのライブラリです。ajaxを使った非同期通信や、ダイナミックな視覚的表現、ブラウザ間のコンパチビリティ(互換性)をサポートしています。中でもブラウザ間のコンパチビリティ(IEの古いバージョンで利用できない関数が多い)を上手い事カバーしてくれるので開発効率が上がります。

http://jquery.com/

jQueryの本家。サイトは英語ですが、最新バージョンのリンクへは進んで見て下さい。バージョン毎のブラウザサポート状況の記載があります。

※現在ver.2系統が出来た為、jQueryのバージョンによっては対応していないブラウザもあります。(jQueryの今を参照)

• jQueryのメリット

jQueryを利用するメリットがいくつかあります。

・ajaxによる非同期通信も記載が容易

・よく使う処理にはエイリアス(ショートカット)が設定されていて記載が楽

・htmlの要素にメソッド名を書く必要が無いため、フロントエンドとロジックでコードの分離が容易

・CSSのマークアップに似せて作られている為、エンジニア以外でも理解が容易

• jQueryの今

jQueryのライブラリファイルはローカルに保存して読み込む方法とインターネット上に公開されているファイル を直接httpから指定して読み込むCDN(Contents Delivery Network)方式の両方が利用可能です。

またファイルは通常板と圧縮版がそれぞれ公開されています。

例) 通常版 :jquery-1.10.2.js

     圧縮版 :jquery-1.10.2.min.js

機能はどちらも変わりがないので開発中には通常版を、公開する時には圧縮版をと使い分けるのがいいでしょう。いずれも数十kb程度のファイルと軽量です。

ちなみに下記が現在(2013/11)の最新版
・jquery-1.10.2.js
・jquery-2.0.3.js

ver.1.10.*から系統がver.1系とver.2系の二つに別れています。

提供されている機能は同じですが、コンパチビリティに若干の差がある為、注意が必要です。

• jQueryの使い方

jQueryの使い方はとっても簡単です。

ライブラリの読み込みはhtml側のscriptタグで行います。

HTML5の場合はjQueryを使いたいhtmlに

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

というのを貼付けるだけ。

HTML4の場合もjQueryを使いたいhtmlに

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

というのを貼付けるだけです。

※html5の場合はtypeを省略できるようになりました。

注意点

jQueryの読み込みタグをhtmlに貼付ける場合は必ず、自分で書いたjsよりも上に記載して、先に読み込まれるようにする必要があります。

htmlの<script>タグは上の方から読み込んで行くので、自分で書いたjsがjQueryを前提として書かれた場合は、jsが正常に動作しません。

色々ありますが

①バージョンとサポートブラウザの関係

②読み込み用のタグを書く場所

の2点がポイントかと思います。

①については後日別の記事でまとめたいと思います。

Webデザイナーのための jQuery入門　魅力的なユーザーインターフェースを手軽に作る (Books for Web Creative)

実践Webデザイン jQuery+CSSフレームワークでサクサクつくる「動き」と「仕掛け」

はじめてのJavaScript―Ajax/jQuery対応 (TECHNICAL MASTER)