JQueryは「バニラな」(そのままの)JavaScriptに比べて、書式が簡単なので、とても使いやすいと思います。また、アニメーションなども手軽に使えるのでお勧めです。
JQueryの利用の仕方は、難しくありません。インストールなどは不要で、CDN方式を使えば、冒頭のhead内で2,3行読み込めば準備終了です。
今回はJQuery利用の上でもっとも基礎になる、要素の指定の仕方を整理してみましょう。
JavaScriptであれば、
document.getElementById(‘hoge’)
などと書きますが、JQueryであれば、
$(‘#hoge’)
と書けばおしまいです。
どうですか? すごく簡単じゃないですか?
要素の指定の仕方にはいくつかあります。
それぞれに、場面に応じたもっとも使いやすく、支障の起きない方式を選ぶことが大事でしょう。
まずは基本的な方式から
idを使う方法がもっとも基本と思いますが、idなしでも大丈夫です。
クラス名を用いるとか、タグ名称を用いるとか。
まずは、その基本的な例を見てみましょう。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
.sample {margin: 100px; height: 50px; width: 350px; padding: 0 10px; font-size: 20px; line-height: 50px; border: 1px #333 solid; cursor: pointer;}
p {margin-top: 0;}
</style>
</head>
<body>
<div id="sample" class="sample" onclick="Kakikae1()">idを使った方式です</div>
<div class="sample sample2" onclick="Kakikae2()">クラス名を使った方式です</div>
<div class="sample" onclick="Kakikae3()">
<p>タグ名称を使った方式です</p>
</div>
</body>
</html>
<script>
function Kakikae1(){
$('#sample').text('id方式で書き換わりました !');
}
function Kakikae2(){
$('.sample2').text('クラス名方式で書き換わりました !');
}
function Kakikae3(){
$('p').text('タグ名称方式で書き換わりました !');
}
</script>
まず、head内で、JQuery を読み込んでいます。
id方式、クラス名方式、タグ名称方式の三つの場合について作成しました。
style指定では、.sampleとしてクラス名を選択し、ボックス枠、フォントサイズなどを指定しています。これは三つに共通です。
ただし、二つ目だけ、クラス名を二つにしました。sampleとsample2です。
二番目のクラス名指定では、この二つ目のクラス名を使います。(sampleを使うと三つが同時に書き換わります。)
JQueryでクリックイベントを発火させるため、id方式の場合は、onclick=”Kakikae1()”と仕込みます。順にKakikae2、Kakikae3となります。
JavaScriptの方では、それぞれの名の関数がクリックで作動するようにします。
id がある場合は、ここにあるように、$(‘#sample’)で要素を指定できます。
クラス名の場合は、$(‘.sample2’)のようになります。
タグ名称の場合$(‘p’)のようになります。ここでもしdivを使うと3つとも書き変わってしまいますので、ここだけpタグで文字を書いています。
ここでは、テキストなので、text( )を使って書き換えます。(inputタグの場合は値の書き換えになるのでval( )を使いますので、この両者の使い分けには注意してください。)
相対的な位置で指定する方法
今度は、idやクラス名などに頼らないで、クリックしたところの相対的な位置で要素を取得する方式です。
どんなケースでもいいでしょうが、ここでは、わかりやすいのでテーブル形式でやってみましょう。
外国通貨を日本円に換算するテーブルを考えてみましょう。
通貨として、ドルとユーロと元を表にします。
最初のカラムに現在の為替相場を書き込み、次のカラムで換算したいそれぞれの通貨の額を書き込みます。
書き込むと同時に、最後のカラムに換算した円の金額が表示されるようにします。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
.mytable {margin: 100px; width: 500px; border-collapse: collapse; border: 1px #333 solid;}
.mytable th {border: 1px #333 solid; width: 25%;}
.mytable td {border: 1px #333 solid; width: 25%; text-align: center;}
input {text-align: right; padding-right: 10px; width: 100%; font-size: 14px;}
.jap {text-align: right; padding-right: 10px;}
</style>
</head>
<body>
<table class="mytable">
<tr>
<th>通貨</th><th>為替</th><th>通貨金額</th><th>日本円金額</th>
</tr>
<tr>
<th>ドル</th>
<td>107.26</td>
<td><input type="text" value=""></td>
<td class="jap"></td>
</tr>
<tr>
<th>ユーロ</th>
<td>122.09</td>
<td><input type="text" value=""></td>
<td class="jap"></td>
</tr>
<tr>
<th>中国元</th>
<td>15.344</td>
<td><input type="text" value=""></td>
<td class="jap"></td>
</tr>
</table>
</body>
</html>
<script>
$('input').on('change', function(){
var cur=$(this).val();
var exc=$(this).parent().prev().text();
var jap=parseInt(exc*cur).toLocaleString();
$(this).parent().next().text(jap);
});
</script>
$(‘input’).on(‘change’, function(){ } はイベントリスナーと呼ばれます。
先ほどは、クリックイベントをHTMLの方に書き込みましたが、今度は、changeイベントをスクリプトの方に書き込みました。
今回のように、複数のタグについてイベントを処理したい時は、書くのが一回で済むこちらの方が便利です。
3つのinput要素のうち、値を入れて確定した要素を取得するのは「this」を使えば可能です。
変数のcurは、クリックしたところの値を取り出します。
変数のexcは、為替の金額を取り出します。
parent()でinputの親要素であるtdタグの要素に行き、ついでprev()で手前のtdタグの要素に行き、そこのテキストの値を取り出しています。
入力した値と為替の金額を掛け合わせた日本円は、入力したところより次のセルですから、next()で移動します。
このように、要素の相対的な位置関係によって移動できるので、それぞれの要素にidなどを付ける必要がなくなります。
idを全てに付すのが面倒な時には、このやり方が得策です。
基本的には、next(), prev(), parent(), children()でしょう。子要素に移動する場合はchildren()を使います。
親要素は一つに特定されるので単数形、子要素は複数の場合が多いので単数形のchildではなく、複数形のchildrenとなっているのでしょう。
インデックス番号を使う方法
今度はインデックス番号で、セルの位置を取得したり、指定して要素を取得したりする方法です。
今度も4行4列のテーブルでやってみましょう。
通常通り、一番上の行と最初の列はindexとしてthタグを使います。残りはtdタグです。
ここでは、クリックしたセルに色を付け、印刷業者に何部をいつ届けてもらいそれがいくらなのかわかるように表示してみましょう。
ご存知の通り、オンデマンド印刷では、部数が増えたり、配達日を送らせると単価が安くなったりするところがあります。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
.mytable {margin: 100px; border-collapse: collapse; border: 1px #333 solid;}
.mytable th {border: 1px #333 solid; padding: 0 10px;}
.mytable td {border: 1px #333 solid; text-align: center;}
</style>
</head>
<body>
<table class="mytable">
<tr>
<th></th>
<th>2営業日後</th>
<th>4営業日後</th>
<th>6営業日後</th>
</tr>
<tr>
<th> 100部</th>
<td>2,000</td>
<td>1,600</td>
<td>1,200</td>
</tr>
<tr>
<th> 500部</th>
<td>3,000</td>
<td>2,500</td>
<td>2,000</td>
</tr>
<tr>
<th> 1000部</th>
<td>4,000</td>
<td>3,400</td>
<td>2,800</td>
</tr>
</table>
<div id="result"></div>
</body>
</html>
<script>
$('td').click(function(){
$('td').css('background-color','#FFF');
$(this).css('background-color','#FF0');
var rowindex=$(this).parent().index();
var clmindex=$(this).index();
var busu=$('tr').eq(rowindex).find('th').text();
var mydate=$('tr').eq(0).find('th').eq(clmindex).text();
var price=$(this).text();
var tt=busu + 'を' + mydate + 'にお届けします。価格は' + price + '円です。';
$('#result').text(tt);
});
</script>
$(‘td’).click(function(){ は、イベントハンドラーと呼ばれます。
tdタグすべてに対して、クリックイベント時に処理をしてくれます。
先ほどは「イベントリスナー」と書きましたが、クリック操作だけでなく色んなイベントに対応して処理する場合に紐づけるオールマイティの書式の方をイベントリスナーと呼ぶようです。
イベントリスナー風に書き換えると、
$(‘td’).on(‘click’, function(){
で大丈夫ですね。これでも動きます。
$(‘td’).css(‘background-color’,’#FFF’);は、あとで色を付けた場合、これがないと、クリックをするたびに、色のついたセルが溜まって行ってしまいますのでtdタグのところは全て背景色を白に戻しています。
$(this).css(‘background-color’,’#FF0′);で、クリックのあったところだけ黄色に色付けしています。thisを使うと、クリックのあったtd タグ特定できます。
index()でインデックス番号が取得できるので、まず行番号rowindexと列番号clmindexを取得しています。
var busu=$(‘tr’).eq(rowindex).find(‘th’).text();で部数を取得していますが、各行を表すtr要素のうちeq()を使ってその行番号のtr要素を取り出します。
そして、find()を使ってth要素を探します。
th要素は各行に一つだけですから、一つだけth要素が取得でき、そのテキストの値を取れば、何部必要とするかが取得できます。
同様にして、テーブルの一行目から、何営業日までかのデータを取得します。
一行目ですから、eq(0)を用い、その中の複数のth要素をfindで取得して、index番号clmindexを使って、eq(clmindex)で目標のセルにたどり着き、テキストの値を取得します。
まとめ
Jqueryの要素の取得方法について、いくつか整理してみました。
まずはidやクラス名やタグ名称で取得する方法。
二つ目は、next(), prev(), parent(),children()を使って相対的な位置関係で取得する方法。
三つ目は、同列の要素の中でにindex番号を使って取得する方法です。
最初のやり方が一番普通のやり方と思いますが、いちいちidなどを付けるのが面倒な時は、二番目三番目の方法が有利です。
また、例えばテーブルで一行だけに収まっている時は、相対的な位置関係を使う二番目の方法が有利ですが、テーブルのインデックスを取り出したい時などはindex番号を使うのが有利です。
適宜使い分けて、要素を取得する良いかと思います。
では、JQueryを思う存分に使って、コーディングライフをお楽しみください !