トップページへ戻る

１、jQueryについて

javascriptをそのまま書くのは、とても面倒なので、今もっともよく使われているjQueryを使って、プログラムをあまり書かなくてもjavascriptが実行出来るようにします。(javascriptをそのまま書くよりだいぶやさしいです）

準備

１、サイト http://jquery.com/ へ行って、「download」をクリック

javascriptのコードが表示されるので、いったん適当な場所に保存する。

次に、WinSCPなどを使って、サーバーの実行するhtmlがある場所に「保存」する。

２、xhtmlに組み込む

headタグ内に、以下のコードを書いて組み込む。

<script type="text/javascript" src="jquery-1.6.1.min.js"></script>

例

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
		<title></title>
		<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
	</head>
	<body>

	</body>
</html>

これで、jQueryを使う準備が完了しました。

 

＊　おまけ（もっと簡単な方法）

jQueryのライブラリを直接リンクする方法です。これだと、jsファイルをダウンロードする必要がありません

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>

 

２、jQueryを書いてみよう

基本的には、関数の中に処理を書いて、それをボタンを押した時などに実行するようにすれば良いです。
リファレンスは、ここが良いでしょう　（日本語）

ただし、多少古いので、もしかしたら無いものがあるかもしれません。そういう場合は、本家サイトを参照。
ここをクリック。

 

具体的な使い方

jQueryは、「なるべくコードを書かないようにしよう」というコンセプトで作られていますので、非常に簡単で楽です。
javascriptをそのまま書いていたら何１０行もかかるような処理を１行で出来たりします。

基本的には

 $("要素名またはID名、クラス名").メソッド　

という形でアクセス出来ます。

＊　注意点（CSSを設定する場合）
いくつものCSSの変更は、CSSのプロパティーを「キャメル記法」にして、配列にして渡さなければなりませんが、慣れると楽です。
もちろん、CSSを一個づつ指定して設定する書き方もあります。

例　（jq1.html)

<?xml version="1.0" encoding="UTF-8" ?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
  <title>ふるさと紹介</title>
  <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
  <script type="text/javascript">
  
	function jqFunc(){
		$("h1").html("<span style='font-size: 30px; color: #f00;'>クリックありがとう</span>");
	}
   function jqFunc2(){
		$("#test1").css({fontSize:"60px",color:"#f00"});
	}  
</script>
</head>
<body>
<h1>こんにちは。jQuery</h1>
<h1 id="test1">こんにちは。jQuery</h1>
<form>
<input type="button" value="内容を変える" onclick="jqFunc();" />
<input type="button" value="色と大きさをかえる" onclick="jqFunc2();" />
</form>
</body>
</html>

３、CSSを操作する

htmlのタグ、CSSのid、class名を指定すれば、簡単にまとめて書式を設定することができます。
jQueryの特徴は、「繰り返し処理」（for文とか）を書かなくて良い、という事です。

クラスの追加、削除

すでにあるCSSを、タグに追加、削除します。

例　（jq2.html)

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>jQueryテスト</title>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
 
function staFunc(){
	$("#results").addClass("note");
}
function stdFunc(){
	$("#results").removeClass("note");
}

</script>
<style type="text/css">
/* このスタイルがresults追加される */
.note {
	color:red;
	font-size:6pt;
	font-weight:900;
}
</style>
</head>
<body>
<div id="results">テスト１</div>
<form>
	<input type="button" value="スタイルを追加" onclick="staFunc();" />
	<input type="button" value="スタイルを削除" onclick="stdFunc();" />
</form>
</body>
</html>

交互にスタイルを切り替え

切り替えボタン方式で、スタイルを適用したり、しなかったりします。

例　（jq3.html)

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>jQueryテスト</title>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">

function changeCSS(){
 $("div").toggleClass("note");
}

</script>
<style type="text/css">
/* このスタイルがresults追加される */
.note {
	color:red;
	font-size:6pt;
	font-weight:900;
}
</style>
</head>
<body>
<div id="results">テスト１</div>
<form>
	<input type="button" value="スタイルを交互に適用" onclick="changeCSS();" />
</form>
</body>
</html>

読み込まれた時に実行する

$(function(){});で囲まれた部分は、ページの読み込みが終わると、すぐに実行されます。よく使うので覚えておく事。

例 (jq4.html)

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>jQueryテスト</title>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
 
$(function(){
			$("#results").css({fontSize:"60px"});
});

</script>
</head>
<body>
<div id="results">テスト１</div>
</body>
</html>

イベント追加　画面の一部をクリックした時に、実行する

divや画像に「イベント」を追加して、クリックに反応するように出来ます。よく使うので覚えておく事。

何故全体を$(function(){});で囲む必要があるのか。→無名関数にして中のコードを外部と分離して使うため。
つまり、「普通のjavascript」ときっちり分けて使うために必要。

例　(jq5.html)

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>jQueryテスト</title>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
 $(function(){
	$("h1").click(function(){
		$(this).css({backgroundColor:"yellow"});
	});
});
$(function(){
	$("#test1").click(function(){
		$(this).html("おしたね");
		$("#test2").html("<span style='color: red;'>Hello <b>Again</b></span>");
	});
});


</script>
</head>
<body>
<h1>こんにちは。jQuery</h1>
<div id="test1">テスト１</div>
<div id="test2"><span>テスト１</span></div>
</body>
</html>

mouseover,mouseout,hover時に実行する。

マウス関係のイベントです。非常に便利。

例 (jq6.html)

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>jQueryテスト</title>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(function(){
	$("p").mouseover(
			function(){
				$("div").css({backgroundColor:"#f0f"});
			}
	);
});
$(function(){
	$("div").hover(
		function(){
			$(this).css({backgroundColor:"yellow"});
		},
		function(){
			$(this).css({backgroundColor:"white"});
		}
	);
});
</script>

</head>
<body>
<p>えがしら</p>
<div id="test1">テスト１</div>
<div id="results">テスト１</div>
<div id="test2"><span>テスト１</span></div>
</body>
</html>

ajaxで別ファイルを読み込む

別ファイルを画面に読み込みます。ajaxとよばれ、最近流行っている方法です。同じサーバーに無いと、読み込まれないので注意。（別のサイトのファイルやデータにアクセスするには、JSPなどを使ってプロクシを建てます。

$.get()を使えば、とても簡単に読み込むことができます。

例 (jq7.html)

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>jQueryテスト</title>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">

$(function(){
  $.get("profile.html", {}, function(html){
		$("#results").text(html);
	});
});

</script>
</head>
<body>
<div id="results">&nbsp;</div>
</body>
</html>

 

tablesorterでテーブル並び替え

もう正式なjQueryのライブラリからは外されてしまいましたが、テーブルのデータを並び替えるプラグインがあります

（tableタグの、theadとか、tbodyとかはxhtmlでは書かなくても良いし、テーブルの並び替えは、サーバー側でやることが多くなったので）

http://autobahn.tablesorter.com/jquery.tablesorter.min.js

これをjquery-1.6.1.min.jsと同じ場所に保存してください

tableに「thead」と「tbody」を書くと、動作します。「thead」をクリックすれば、その列を基準として、並び替えが出来ます。
これはjQueryの「プラグイン」というものの一種で、jQuery uiが正式なものですが、これ以外にもたくさんあります。
jQuery uiについては、後から説明します。

例　（jq8.html)

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>tablesorttest</title>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.min.js"></script>
<script type="text/javascript">

//イベントは基本的にreadyブロックの中に書く
$(function(){
	$("#sortable").tablesorter(); 
});

</script>
</head>
<body>
<table width="200" border="1" cellpadding="0" cellspacing="0" id="sortable">
	<thead> 
		<tr> 
			<th>1列目</th> 
			<th>2列目</th> 
			<th>3列目</th> 
			<th>4列目</th>
		</tr> 
	</thead> 
	<tbody>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>16</td>
		</tr>
		<tr>
			<td>13</td>
			<td>14</td>
			<td>11</td>
			<td>8</td>
		</tr>
		<tr>
			<td>9</td>
			<td>10</td>
			<td>7</td>
			<td>12</td>
		</tr>
		<tr>
			<td>5</td>
			<td>6</td>
			<td>15</td>
			<td>4</td>
		</tr>
	</tbody>
</table>
</body>
</html>

課題１

上の例をjq1.html〜jq8.htmlとして、public_html/tomcat/mobile2011に保存して、動作を確認しておいてください。

実際に動かしてみることで、jQueryの使いやすさ、簡単さを確認してください。