jQuery は、ブラウザ上のコンテンツをオブジェクトとして動的に扱う場合に、
非常に優れた仕様を持っていますが、既存の DOM だけを知っている場合は、
どう使ってオブジェクトにアクセスしていいか少し戸惑います。
また、DOM だけでは無く、JavaScript の特性を良く知っていないと、
ドキュメントから機能を知るにはなかなか難しいものがあると思います。
( jQuery を知ってしまうと、DOM なんか使いたくなくなるでしょうけど )
ここでは、基本的な機能( 入力値の参照と DIV の innerHTML への参照)を使って
サンプルを作成してみました
基本機能の解説
最初に、WEB ページで JavaScript を使う場合に重要なのが、ロード時の処理で、
ベタに記述してしまうと、コンテンツがロードし終わった後に記述する必要があり、
正式に書くと、けっこう面倒な事になってしまいます。
jQuery では、ここに書いた書式の簡略形もありますし、
非常に便利だと思います
$(document).ready(
function() {
var str = "";
str = $("#infld1").get()[0].value + "<br />";
$('#area').append(str);
str = $("#infld2").get()[0].value + "<br />";
$('#area').append(str);
str = $("#infld3").get()[0].value + "<br />";
$('#area').append(str);
}
);
上記サンプルでは、id 属性を使って、jQuery オブジェクトを参照した後、
get メソッドによって、jQuery オブジェクトのコレクションを取得し、
その先頭オブジェクトを使って、本来のオブジェクトの value 属性の値を
取得しています。
id 属性で参照した jQuery オブジェクトですから、オブジェクトは1つ
しか入っていませんので、[0] で参照します。これは DOM の getElementsByTagName
等と同じと考えれば良いでしょう。
実際は、このような回りくどいことはせずに $("#infld1").val() で取り出して、
$("#infld1").val( "セットしたい文字列" ) のようにして使用します
ただ、サーバーと通信するWEB アプリケーションとしては、name 属性を使用するので、
その際はこの回りくどい方法を使用する必要があるようですが、id と name を両方
指定しておけば問題はありません
// *************************************
// name属性で単独参照
// *************************************
function refNameAtt() {
// innerHTML をクリア
$('#area').html("");
// jQuery のメソッドで値セット
$("#infld1").val("入力フィールドA");
$("#infld2").val("入力フィールドB");
$("#infld3").val("入力フィールドC");
// name属性で単独参照
var str = "";
str = $("input[name='fld1']").get()[0].value + "<br />";
$('#area').append(str);
str = $("input[name='fld2']").get()[0].value + "<br />";
$('#area').append(str);
str = $("input[name='fld3']").get()[0].value + "<br />";
$('#area').append(str);
}
DIV 等の 入力以外のコンテンツに対して行う innerHTML の処理は、ブラウザ毎(IEやFirefoxやOpera等)に
共通しているのですが、テキストの処理となるとそれぞれ違って煩雑です。
そういう意味では直感的に行える html メソッドと text メソッドは便利この上ないものだと思います
さらに、class 属性で行う each メソッドを使った一括処理は、JavaScript のコード作成を
画期的に短縮させると思います。
※ ここで使用しているセレクタについてはここでは述べませんが、
※ ただの input だとページ上の全ての input 要素が対象です。
あと、イベントの処理もかなり面白い書き方ができますが、
全て jQuery という言語だと思えば良いと思います。そういうスタンスで
サンプル等を読んで、必要な部分だけ使って行けばすぐ使えると思います。
( 必要無いものは無視して、深読みしないほうがいいです )
// *************************************
// 一括参照
// *************************************
function refAll() {
// innerText をクリア
$('#area').text("");
// elemant で値セット
var cnt = 0;
// セレクタで限定参照
$("#tbl input").each(
function() {
cnt++;
// this は通常のオブジェクト
$('#area').append(this.id+"<br />");
// $(this) は this を元にした jQueryオブジェクト
$(this).val("elemant_"+cnt);
}
);
// class で値セット
cnt = 0;
// セレクタで限定参照
$("#tbl .fld").each(
function() {
cnt++;
$('#area').append("class_"+cnt+"<br />");
}
);
}
全てのソースコード
<HTML>
<HEAD>
<META http-equiv="Content-type" content="text/html; charset=euc-jp" />
<TITLE>jQueryサンプル(基本参照)</TITLE>
<STYLE type="text/css">
* {
font-size: 12px;
}
.column {
border-style:solid;
border-width:1px;
border-color:#000000;
padding: 4px;
}
</STYLE>
<SCRIPT language="javascript" type="text/javascript" src="http://winofsql.jp/sh/jquery.js"></script>
<SCRIPT language="javascript" type="text/javascript">
// *************************************
// ドキュメント onLoad
// *************************************
$(document).ready(
function() {
var str = "";
str = $("#infld1").get()[0].value + "<br />";
$('#area').append(str);
str = $("#infld2").get()[0].value + "<br />";
$('#area').append(str);
str = $("#infld3").get()[0].value + "<br />";
$('#area').append(str);
}
);
// *************************************
// name属性で単独参照
// *************************************
function refNameAtt() {
// innerHTML をクリア
$('#area').html("");
// jQuery のメソッドで値セット
$("#infld1").val("入力フィールドA");
$("#infld2").val("入力フィールドB");
$("#infld3").val("入力フィールドC");
// name属性で単独参照
var str = "";
str = $("input[name='fld1']").get()[0].value + "<br />";
$('#area').append(str);
str = $("input[name='fld2']").get()[0].value + "<br />";
$('#area').append(str);
str = $("input[name='fld3']").get()[0].value + "<br />";
$('#area').append(str);
}
// *************************************
// 一括参照
// *************************************
function refAll() {
// innerText をクリア
$('#area').text("");
// elemant で値セット
var cnt = 0;
// セレクタで限定参照
$("#tbl input").each(
function() {
cnt++;
// this は通常のオブジェクト
$('#area').append(this.id+"<br />");
// $(this) は this を元にした jQueryオブジェクト
$(this).val("elemant_"+cnt);
}
);
// class で値セット
cnt = 0;
// セレクタで限定参照
$("#tbl .fld").each(
function() {
cnt++;
$('#area').append("class_"+cnt+"<br />");
}
);
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="単独参照" onClick="refNameAtt()">
<INPUT type="button" value="一括参照" onClick="refAll()">
<TABLE
id="tbl"
border=1
style='
border-collapse:collapse;
border-style:solid;
border-width:1px;
border-color:#000000;
'
>
<TR>
<TD nowrap class="column">DIV ( id=area ) => </TD>
<TD class="column">
<DIV
id="area"
style='
width:100%;
background-color:#A0B9BD;
'
></DIV>
</TD>
</TR>
<TR>
<TD class="column">入力フィールド1</TD>
<TD class="column">
<INPUT
type="text"
id="infld1"
name="fld1"
class="fld"
value="入力フィールド1"
>
</TD>
</TR>
<TR>
<TD class="column">入力フィールド2</TD>
<TD class="column">
<INPUT
type="text"
id="infld2"
name="fld2"
class="fld"
value="入力フィールド2"
>
</TD>
</TR>
<TR>
<TD class="column">入力フィールド3</TD>
<TD class="column">
<INPUT
type="text"
id="infld3"
name="fld3"
class="fld"
value="入力フィールド3"
>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
|
