魔術師見習いのノート

jQueryとは，JavaScriptのコーディングを簡潔にしたり，強力にするためのライブラリである。本稿ではjQueryを使ったいろいろなサンプルを紹介する(随時更新予定)。

サンプル一覧

jQueryの基本

jQueryを使用する場合，はじめに通常のJavaScriptファイルと同様に，scriptタグを使ってファイルを読み込む。

<script type="text/javascript" src="〜">

指定するURLもまたローカルでもグローバルでも良い。

そしてjQueryを実際に利用したい場合は，$関数またはjQuery関数を使う。使い方は両者とも全く同じと考えても問題はないはず。

例えば後述するハッシュ値に変換する機能を利用したい場合，次のように記述する。

• var str = "hoge";
  var hash = $.md5(str);
  

• var str = "hoge";
  var hash = jQuery.md5(str);
  

また，タグに何らかの処理を行いたい場合は次のように記述する。

$("セレクタ").関数(引数)

補足すると，セレクタとは，CSSで記述しているidやクラス，擬似クラスなどのことである(hoge {color:red;}のhogeの部分)。この文では，セレクタで指定したタグに，指定した関数の処理を行う。

このような処理を行う場合，ページのDOMツリーが用意された状態でなければならない。そのため，そのような処理は次のような関数を使用する。

$(document).ready(実際に処理を行う関数);

これはwindow.onloadに似ているが，$(document).readyはwindow.onloadと異なり，HTML文書が完全にロードされなくてもHTMLをDOMツリーに変換した時点で処理される。ちなみにreadyは省略可能である。

$(function(){});

住所の補完

「郵便番号を入力すると住所を自動保管してくれるjQueryプラグイン・jquery.jpostal.js - かちびと.net」を参考。というかコードはほぼコピペ。

<div>
<script type="text/javascript" src="http://code.jquery.com/jquery-git2.js"></script>
<script type="text/javascript" src="http://jpostal.googlecode.com/svn/trunk/jquery.jpostal.js"></script>
<script type="text/javascript">
<!--
$(document).ready( function() {
  $('#postcode1').jpostal({
    postcode : [
      '#postcode1',
      '#postcode2'
    ],
    address : {
      '#prefecture'  : '%3',
      '#city'  : '%4',
      '#town'  : '%5'
    }
  });
});
-->
</script>
<form>


<span>郵便番号 〒</span>
<input id="postcode1" name="postcode1" maxlength="3">-<input id="postcode2" name="postcode2" maxlength="4"><br />

<span>都道府県</span>
<select id="prefecture" name="prefecture">
 <option value="北海道" selected>北海道</option>
 <option value="青森県">青森県</option>
 <option value="岩手県">岩手県</option>
 <option value="宮城県">宮城県</option>
 <option value="秋田県">秋田県</option>
 <option value="山形県">山形県</option>
 <option value="福島県">福島県</option>
 <option value="茨城県">茨城県</option>
 <option value="栃木県">栃木県</option>
 <option value="群馬県">群馬県</option>
 <option value="埼玉県">埼玉県</option>
 <option value="千葉県">千葉県</option>
 <option value="東京都">東京都</option>
 <option value="神奈川県">神奈川県</option>
 <option value="新潟県">新潟県</option>
 <option value="富山県">富山県</option>
 <option value="石川県">石川県</option>
 <option value="福井県">福井県</option>
 <option value="山梨県">山梨県</option>
 <option value="長野県">長野県</option>
 <option value="岐阜県">岐阜県</option>
 <option value="静岡県">静岡県</option>
 <option value="愛知県">愛知県</option>
 <option value="三重県">三重県</option>
 <option value="滋賀県">滋賀県</option>
 <option value="京都府">京都府</option>
 <option value="大阪府">大阪府</option>
 <option value="兵庫県">兵庫県</option>
 <option value="奈良県">奈良県</option>
 <option value="和歌山県">和歌山県</option>
 <option value="鳥取県">鳥取県</option>
 <option value="島根県">島根県</option>
 <option value="岡山県">岡山県</option>
 <option value="広島県">広島県</option>
 <option value="山口県">山口県</option>
 <option value="徳島県">徳島県</option>
 <option value="香川県">香川県</option>
 <option value="愛媛県">愛媛県</option>
 <option value="高知県">高知県</option>
 <option value="福岡県">福岡県</option>
 <option value="佐賀県">佐賀県</option>
 <option value="長崎県">長崎県</option>
 <option value="熊本県">熊本県</option>
 <option value="大分県">大分県</option>
 <option value="宮崎県">宮崎県</option>
 <option value="鹿児島県">鹿児島県</option>
 <option value="沖縄県">沖縄県 </option>
</select>
<br>

<span>市区町村</span>
<input type="text" id="city" name="city">
<br>

<span>町域</span>
<input type="text" id="town" name="town">
<br>

<input type="button" value="送信">
<input type="reset"  value="クリア">
</form>
</div>

住所の補完とinput:hidden

hiddenタイプの入力と組み合わせれば，前述の方法で住所を補完する場合でも1つの入力フォームの補完ができる。

<script type="text/javascript">
$(function() {
  $('#postcode1').jpostal({
    postcode : [
      '#postcode1',
      '#postcode2'
    ],
    address : {
      '#prefecture'  : '%3',
      '#city'  : '%4',
      '#town'  : '%5'
    }
  });
});
</script>

<span>郵便番号 〒</span>
<input id="postcode1b" name="postcode1b" maxlength="3" style="width:3em">-<input id="postcode2b" name="postcode2b" maxlength="4" style="width:4em;">
<input type="button" value="補完" onClick="document.getElementById('addressb').value = document.getElementById('prefectureb').value + document.getElementById('cityb').value + document.getElementById('townb').value;">
<br>
<input type="text" id="addressb">
<input type="hidden" id="prefectureb" name="prefectureb">
<input type="hidden" id="cityb" name="cityb">
<input type="hidden" id="townb" name="townb">
<br>

<input type="reset"  value="クリア">
</form>
</div>

このサンプルでは，onClick属性にそのまま処理を記述しているが，当然ながら関数化した方が可読性は良い。

並び替え可能なウィジェット

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script>
$(function() {
    $('#sortable').sortable();
});
</script>
<ol id="sortable">
 <li id="d01"><div>hoge</div></li>
 <li id="d02"><div>fuga</div></li>
 <li id="d03"><div>piyo</div></li>
 <li id="d04"><div>foo</div></li>
</ol>

ドラッグ可能なウィジェット

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script>
$(function() {
  $('#draggable').draggable({
    containment: 'parent'
  });
});
</script>
<div style="border:inset; width:100%; height: 3em;">
<div id="draggable" style="background-color:blue; width:6em;">
ドラッグ可能
</div>
</div>