jQuery

jQueryの基本的なことを調べてみました

投稿日:

今までPHPを主体に勉強してきましたが、Webアプリケーションを開発する上で、欠かせない存在となってきているのが、JavaScriptです。JavaScriptは、Webサイトのユーザビリティを向上したり、魅力的なビジュアルエフェクトを与える際に不可欠な言語です。

そのJavaScriptのなかで、jQueryは今や世界で最も注目されているJavaScriptライブラリです。

jQueryはファイルサイズが小さいため動作が軽く、基本となるDOMやイベントの操作、ビジュアルエフェクトやAjaxなど、実用的な多くの機能を標準でサポートしています。おもなメリットを以下にまとめてみたいと思います。

DOM(Document Object Model)とは、Webページの内容(文章、画像、音声など)およびそれらの配置、スタイルをオブジェクトとして扱い、スクリプト言語を使って制御するための取り決め。DOMに従ってWebページを記述するための言語がDynamic HTMLである。Dynamic HTMLはNetscape Navigator 4.xとInternet Explorer 4.x/5.xに搭載されているが、両者のDOMは部分的に仕様が異なるため、現在W3Cによって標準化が進められている(IT用語辞典e-Wordsより)。

jQueryのメリット

HTML・CSSの知識や概念が応用できる

JavaScriptでは、何らかのHTML要素に動的に変化を与える場合は、対象となる要素を抽出し、抽出した要素のプロパティとメソッドを利用します。配列やfor文など複雑な構造を持ったJavaScriptのコードをjQueryを利用して記述するとほんの数行で記述することもできます。

このように、標準のJavaScriptでは内容を理解するにもプログラミングの知識が必要ですが、jQueryでは、CSSの知識さえあれば、何をしているのかを直感的に理解することができます。

クロスブラウザに対応している

JavaScriptでは、同じコードがブラウザによって期待どうりに動作しないこともよくあります。jQueryを利用すれば、基本的なブラウザの解釈の違いにすべて対応していますので、ブラウザの違いを意識する必要はほとんどありません。

ほかのJavaScriptライブラリと競合を回避できる

jQueryではほかのJavaScriptライブラリとの競合を避けるための仕組みが準備されているので、環境に大きく左右されることがなく、その動作は比較的安定しています。

拡張性が高い

jQueryでは、ベースの機能に加え、プラグインを利用することで多彩な機能を追加することができます。その中で有名なのは、当サイトでも何度も紹介してきたjQuery Mobileやユーザーインターフェイスの部品やマウス操作機能などを集めたjQuery UIがあります。これらの派生ライブラリを利用することで、多くのプラットフォームに対応したWebサイトやWebアプリケーションを効率よく構築できます。

jQueryの読み込み

jQueryを利用するときは、まず、jQuery本体をWebブラウザに読み込ませる必要があります。jQuery本体を読み込ませる場合は、CDNを利用する方法と直接自サイトにjQueryを設置する方法の2つの方法があります。

CDNを利用する

まず、一番簡単で手っ取り早いのが、CDN(Contents Delivery Network)と呼ばれるコンテンツ配信ネットワークサービスを利用する方法です。CDNには、jQuery CDN、Google Ajax API、Microsoft CDNの3つのサイトがあります。設置方法は、

<script type="text/javascript" src=CDNのアドレス/縮小版又は、非圧縮版"></script>

となり、jQuery CDNの縮小版を使用する場合は、

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

となります。

それでは、下記にそれぞれのCDNのアドレスを表記しておきます。尚、GoogleとMicrosoftはSSLに対応していますので、httpsで表記しておきます。SSLを利用しないときは、httpに置き換えて下さい。

jQuery CDN

http://code.jquery.com/jquery-1.6.4.min.js(縮小版)

http://code.jquery.com/jquery-1.6.4.js(非圧縮版)

Google Ajax API CDN

https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js(縮小版)

https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js(非圧縮版)

Microsoft CDN

https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js(縮小版)

https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.js(非圧縮版)

jQueryをダウンロードして設置する

jQueryを利用するもう一つの方法は、jQuery本体を自サイトに設置する方法です。公式サイトからjQueryをダウンロードする場合は、まず下記のURLにアクセスします。

http://docs.jquery.com/Downloading_jQuery#Download_jQuery

最新版は『Current Release』の『Mnifiled(縮小版)』か『Uncompressed(非圧縮版)』のどちらかのリンクを右クリックしてファイルを保存します。

保存したファイルをサイトに設置し、script要素のsrc属性にパスを指定します。

<script type="text/javascript" src="保存した場所へのパス/jquery-1.6.4.min.js"></script>

これで、jQueryが使用できるようになります。

jQueryの基本構文

jQueryでは、対象となる要素をセレクターで指定し、その要素の内容やスタイルなどをメソッドで操作します。

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

セレクターはCSSセレクターの記述方法に対応していますので、スタイルシートの知識や概念をそのまま応用できます。

動作開始のタイミング

jQueryでスクリプトが動作を開始するタイミングは『$(document).ready(function(){処理の内容};』という構文を使います。この『ready()』を利用することで、Webページが完全に読み込まれていなくても、HTMLの準備が整った時点でスクリプトの実行を開始することができます。また、この構文は、

$(function(){処理の内容});

と、簡素に書き換えることができますので、こちらの記述が一般的です。

メソッドチェーン

スクリプトの中では、取得した要素に対して複数の処理を連続して実行したい場合があります。このようなとき、jQueryのメソッドは、『. (ドット)』でつなぐことで連鎖(チェーン)として記述することができます。必要な処理を簡素に記述できるため、分かり易いスクリプトになります。

セレクター

jQueryでは、処理対象の要素をセレクターを利用して指定します。CSSと同じセレクターを利用することができるため、標準のJavaScriptに比べて柔軟に要素を指定できるようになっています。

イベント

jQueryでは、セレクターによって取得したHTML要素を、ユーザーのアクションに応じて操作することができます。このユーザーのアクションがイベントです。イベントを利用した処理を行う基本的な構文は下記のようになります。

$("セレクター").イベント(処理の内容);

以下に利用頻度の高いイベント用のメソッドを記述します。

  • click()  クリック
  • dblclick()  ダブルクリック
  • mouseover()  オブジェクト上にマウスが乗った
  • mousedown()  マウスの左ボタンが押された
  • forcut()  オブジェクトがフォーカスされた
  • subumit()  フォームが送信された
  • unload()  ページが再読込された
  • error()  ブラウザ上で何らかのエラーが発生した

Ajax

Ajaxは、WebブラウザとWebサーバーの間でHTTP通信を利用した情報のやりとりを行い、Webページをリロードすることなくコンテンツを更新できる仕組みです。標準のJavaScriptでは、煩雑になりがちなスクリプトをjQueryは、簡素化したメソッドを提供しています。

jQueryのAjax基本メソッド

jQueryでは、Ajaxを利用するためのメソッドがいくつかありますが、そのなかでも『$.ajax()メソッド』が基本となります。

用途に特化したAjaxメソッド

$.ajax()メソッドは、汎用的なメソッドですが、記述方法がより簡素化された特定の処理のみを行うメソッドもあります。

load()メソッド

データを読み込み、HTML要素へ追加する際に利用するメソッド

$.get()メソッド

GETメソッドによりデータを読み込みます

$.post()メソッド

POSTメソッドによりデータを読み込みます

Ajaxを利用する際の注意点

Ajaxを利用する際には、いくつかの注意点がありますが、特に下記の2点には注意しなければなりません。

①文字コードはUTF-8を利用する

Webサーバーからテキスト形式でデータを受信する場合は、HTMLの文字コードにかかわらず、受信するテキストデータの文字コードにはUTF-8を利用する必要があります。UTF-8以外の文字コードを利用すると、Webブラウザで受信したデータを表示する際に、日本語などのマルチバイト文字で文字化けが発生します。

②他ドメインのリソースへのアクセス制限

Ajaxでは、セキュリティに配慮して、基本的に同一ドメイン内のリソースしかアクセスできないような仕様になっています。クロスドメインを実現するためには、サーバーサイドのプログラムで対応するか、jQueryのプラグイン『Cross-domai ajax』を利用します。

以上、簡単ですが、jQueryを利用するために必要最低限の基本的な事を調べてみました。

本日は以上です。

-jQuery
-

Copyright© WinRoad徒然草 , 2018 All Rights Reserved Powered by AFFINGER5.