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();
    });
});
スポンサーリンク