Lightbox Info Board : SQLの窓

Google Hosted Libraries - Developer's Guide

Googel では、JavaScript の有名どころのライブラリをバージョン別にホスティングしてくれているので、以下のようにするだけですぐ使えるようになります。

<!-- 
	2.0.3 の部分を変更すると内容が変わります 
-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

但し、jQuery UI のほうは、JavaScript 本体のホスティングはされていますが、css は自分で用意する必要があります(好みのCSSでビルドする)

ただ、どうしてもホスティングだけで行いたい場合は、css も Google にあります( 色あいに特徴の無い平凡なもの )

▼ Google に置かれている CSS( 但し、1.10.1 以前で確認 )
//ajax.googleapis.com/ajax/libs/jqueryui/バージョン/themes/base/jquery-ui.css
▼ 例
http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css

また、オンラインでその場で試したい場合はこちらを利用してみて下さい

このツールのテキストエリアは、タブも選択状態での複数行のタブ処理も機能します(SHIFT+TAB で左方向に移動します)

jQuery でボタンクリック (を処理) するには

通常の JavaScript では、ボタン要素に onclick 属性を書いて、その内容として関数の呼び出しを記述して関数を定義します

<script>
function test() {
	alert("こんにちは");
}
</script>
<input type="button" value="JavaScript" onclick="test();">

この記述方法は一番簡単で、処理の定義を最初に書いて、呼び出しの定義を要素と同時に書く為、矛盾無く確実に処理されます。しかし、JavaScript のイベント登録で click イベントを作成する場合、要素の記述の後で処理する必要があります。

ですから、そのような場合は load イベント等でページが表示された後の処理として書く事になります。ただ、その際は過去において、たいていにおいてブラウザ毎に考慮する必要がありました。

しかし、jQuery を使うと以下のようになります

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link type="text/css" href="http://homepage2.nifty.com/lightbox/jquery/jqcss/black-tie/jquery-ui-1.10.1.custom.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$(function(){
	
	$("#btn").click(
		function() {
			alert("こんにちは");
		}
	);

});
</script>
<input type="button" id="btn" value="JavaScript">

jQuery のロード処理は通常の load イベントよりも早く発生するように作られており、遅くとも、通常の load イベントと同時期に発生します。そして、その為の 記述方法は以下のようなもの です

<script>
$(function(){

	処理
	
});
</script>

jQuery でボタンをクリックした事にする

この処理は、通常の JavaScript(DOM) で記述すると過去とても面倒でしたが、jQuery ですと簡潔です。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link type="text/css" href="http://homepage2.nifty.com/lightbox/jquery/jqcss/black-tie/jquery-ui-1.10.1.custom.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$(function(){
	
	$("#btn").click(
		function() {
			alert("こんにちは");
		}
	);

});
</script>
<input type="button" id="btn" value="JavaScript">
<hr>
<input
	type="button"
	value="上のボタンをクリックした事にする"
	onclick='$("#btn").click();'
>

記法としては、.click の中にイベント記述が無いだけですが、付加処理が無いので選択したオブジェクトに対して直接処理を行います。