読者です 読者をやめる 読者になる 読者になる

はい!今やってます!

Work Pertly, Live Idly

jQueryことはじめ

  • 目次

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

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

http://jquery.com/

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

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

 

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

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

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

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

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

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の使い方はとっても簡単です。

ライブラリの読み込みは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点がポイントかと思います。

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