jQueryとはJavaScriptのライブラリです。jQueryを利用することにより、HTMLのDOM操作やAjaxの処理を簡潔に記述できます。この記事では、jQueryを使ったソースコードの書き方をご紹介します。
jQuery とは、jQuery財団が開発しているJavaScriptライブラリである。
jQueryを使用するには、自ウェブサイトにJavaScriptを配置する方法と、CDNを使用する方法の2通りがある。
版 | 説明 |
---|---|
production jQuery (compressed) | ファイルサイズを小さくするため、スクリプトにスペースが含まれていない。jQueryを使うだけならこれを使用する。 |
development jQuery (uncompressed) | スクリプトを見やすくするため、スペースで字下げされている。jQueryの中身を見たい場合はこれを使用する。 |
<head>
<script type="text/javascript" src="../js/jquery-2.1.3.min.js"></script>
</head>
自ウェブサイトのローカルパスではなく、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();
});
});