jQuery - JavaScriptライブラリ

jQueryとはJavaScriptのライブラリです。jQueryを利用することにより、HTMLのDOM操作やAjaxの処理を簡潔に記述できます。この記事では、jQueryを使ったソースコードの書き方をご紹介します。

jQueryの使用方法

jQuery とは、jQuery財団が開発しているJavaScriptライブラリである。

jQueryを使用するには、自ウェブサイトにJavaScriptを配置する方法と、CDNを使用する方法の2通りがある。

自ウェブサイトにJavaScriptを配置する

  1. jQueryの公式ウェブサイト(http://jquery.com/)をウェブブラウザで開く。
  2. Downloadのページから任意のバージョンをダウンロードする。なお、jQueryは用途に応じて2つの版がある。
    版 説明
    production jQuery (compressed) ファイルサイズを小さくするため、スクリプトにスペースが含まれていない。jQueryを使うだけならこれを使用する。
    development jQuery (uncompressed) スクリプトを見やすくするため、スペースで字下げされている。jQueryの中身を見たい場合はこれを使用する。
  3. ダウンロードしたJavaScriptファイル(jquery-2.1.3.min.jsなど)を任意のディレクトリに配置する。
  4. HTML文書の<script>タグでjQueryを読み込む。 
    <head>
  <script type="text/javascript" src="../js/jquery-2.1.3.min.js"></script>
</head>

CDNを使用する

自ウェブサイトのローカルパスではなく、CDN (Contents Delivery Network)からjQeuryのJavaScriptを読み込むこともできる。

CDNとしてMaxCDNを使用する場合、次のように指定する。

<head>
  <script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
</head>

CDNとしてGoogle Hosted Librariesを使用する場合、次のように指定する。

<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

CDNとしてMicrosoft Ajax Content Delivery Networkを使用する場合、次のように指定する。 

<head>
  <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.min.js"></script>
</head>

イベントハンドラ

イベントハンドラ とは、イベントが発生したときに実行する処理であり、 function(){ script } の形式で指定する。イベントハンドラ内では this という変数を使うことができる。

要素がクリックされたときに実行する処理を指定する例を示す。

$(function(){
    $('selector').click(function(){
        $(this).method();
    });
});