jQuery �́A�u���E�U��̃R���e���c���I�u�W�F�N�g�Ƃ��ē��I�Ɉ����ꍇ�ɁA
���ɗD�ꂽ�d�l�������Ă��܂����A������ DOM ������m���Ă���ꍇ�́A
�ǂ��g���ăI�u�W�F�N�g�ɃA�N�Z�X���Ă����������˘f���܂��B
�܂��ADOM �����ł͖����AJavaScript �̓�����ǂ��m���Ă��Ȃ��ƁA
�h�L�������g����@�\��m��ɂ͂Ȃ��Ȃ�������̂�����Ǝv���܂��B
( jQuery ��m���Ă��܂��ƁADOM �Ȃg�������Ȃ��Ȃ�ł��傤���� )
�����ł́A��{�I�ȋ@�\( ���͒l�̎Q�Ƃ� DIV �� innerHTML �ւ̎Q��)���g����
�T���v�����쐬���Ă݂܂���
��{�@�\�̉��
�ŏ��ɁAWEB �y�[�W�� JavaScript ���g���ꍇ�ɏd�v�Ȃ̂��A���[�h���̏����ŁA
�x�^�ɋL�q���Ă��܂��ƁA�R���e���c�����[�h���I�������ɋL�q����K�v������A
�����ɏ����ƁA���������ʓ|�Ȏ��ɂȂ��Ă��܂��܂��B
jQuery �ł́A�����ɏ����������̊ȗ��`������܂����A
���ɕ֗����Ǝv���܂�
$(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);
}
);
��L�T���v���ł́Aid �������g���āAjQuery �I�u�W�F�N�g���Q�Ƃ�����A
get ���\�b�h�ɂ���āAjQuery �I�u�W�F�N�g�̃R���N�V�������擾���A
���̐擪�I�u�W�F�N�g���g���āA�{���̃I�u�W�F�N�g�� value �����̒l��
�擾���Ă��܂��B
id �����ŎQ�Ƃ��� jQuery �I�u�W�F�N�g�ł�����A�I�u�W�F�N�g��1��
���������Ă��܂���̂ŁA[0] �ŎQ�Ƃ��܂��B����� DOM �� getElementsByTagName
���Ɠ����ƍl����Ηǂ��ł��傤�B
���ۂ́A���̂悤�ȉ�肭�ǂ����Ƃ͂����� $("#infld1").val() �Ŏ��o���āA
$("#infld1").val( "�Z�b�g������������" ) �̂悤�ɂ��Ďg�p���܂�
�����A�T�[�o�[�ƒʐM����WEB �A�v���P�[�V�����Ƃ��ẮAname �������g�p����̂ŁA
���̍ۂ͂��̉�肭�ǂ����@���g�p����K�v������悤�ł����Aid �� name �𗼕�
�w�肵�Ă����Ζ��͂���܂���
// *************************************
// name�����ŒP�ƎQ��
// *************************************
function refNameAtt() {
// innerHTML ���N���A
$('#area').html("");
// jQuery �̃��\�b�h�Œl�Z�b�g
$("#infld1").val("���̓t�B�[���hA");
$("#infld2").val("���̓t�B�[���hB");
$("#infld3").val("���̓t�B�[���hC");
// name�����ŒP�ƎQ��
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 ���� ���͈ȊO�̃R���e���c�ɑ��čs�� innerHTML �̏����́A�u���E�U��(IE��Firefox��Opera��)��
���ʂ��Ă���̂ł����A�e�L�X�g�̏����ƂȂ�Ƃ��ꂼ�����ĔώG�ł��B
���������Ӗ��ł͒����I�ɍs���� html ���\�b�h�� text ���\�b�h�͕֗����̏�Ȃ����̂��Ǝv���܂�
����ɁAclass �����ōs�� each ���\�b�h���g�����ꊇ�����́AJavaScript �̃R�[�h�쐬��
����I�ɒZ�k������Ǝv���܂��B
�� �����Ŏg�p���Ă���Z���N�^�ɂ��Ă͂����ł͏q�ׂ܂��A
�� ������ input ���ƃy�[�W��̑S�Ă� input �v�f���Ώۂł��B
���ƁA�C�x���g�̏��������Ȃ�ʔ������������ł��܂����A
�S�� jQuery �Ƃ������ꂾ�Ǝv���Ηǂ��Ǝv���܂��B���������X�^���X��
�T���v������ǂ�ŁA�K�v�ȕ��������g���čs�������g����Ǝv���܂��B
( �K�v�������͖̂������āA�[�ǂ݂��Ȃ��ق��������ł� )
// *************************************
// �ꊇ�Q��
// *************************************
function refAll() {
// innerText ���N���A
$('#area').text("");
// elemant �Œl�Z�b�g
var cnt = 0;
// �Z���N�^�Ō���Q��
$("#tbl input").each(
function() {
cnt++;
// this �͒ʏ�̃I�u�W�F�N�g
$('#area').append(this.id+"<br />");
// $(this) �� this �����ɂ��� jQuery�I�u�W�F�N�g
$(this).val("elemant_"+cnt);
}
);
// class �Œl�Z�b�g
cnt = 0;
// �Z���N�^�Ō���Q��
$("#tbl .fld").each(
function() {
cnt++;
$('#area').append("class_"+cnt+"<br />");
}
);
}
�S�Ẵ\�[�X�R�[�h
<HTML>
<HEAD>
<META http-equiv="Content-type" content="text/html; charset=euc-jp" />
<TITLE>jQuery�T���v��(��{�Q��)</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">
// *************************************
// �h�L�������g 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�����ŒP�ƎQ��
// *************************************
function refNameAtt() {
// innerHTML ���N���A
$('#area').html("");
// jQuery �̃��\�b�h�Œl�Z�b�g
$("#infld1").val("���̓t�B�[���hA");
$("#infld2").val("���̓t�B�[���hB");
$("#infld3").val("���̓t�B�[���hC");
// name�����ŒP�ƎQ��
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);
}
// *************************************
// �ꊇ�Q��
// *************************************
function refAll() {
// innerText ���N���A
$('#area').text("");
// elemant �Œl�Z�b�g
var cnt = 0;
// �Z���N�^�Ō���Q��
$("#tbl input").each(
function() {
cnt++;
// this �͒ʏ�̃I�u�W�F�N�g
$('#area').append(this.id+"<br />");
// $(this) �� this �����ɂ��� jQuery�I�u�W�F�N�g
$(this).val("elemant_"+cnt);
}
);
// class �Œl�Z�b�g
cnt = 0;
// �Z���N�^�Ō���Q��
$("#tbl .fld").each(
function() {
cnt++;
$('#area').append("class_"+cnt+"<br />");
}
);
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="�P�ƎQ��" onClick="refNameAtt()">
<INPUT type="button" value="�ꊇ�Q��" 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">���̓t�B�[���h1</TD>
<TD class="column">
<INPUT
type="text"
id="infld1"
name="fld1"
class="fld"
value="���̓t�B�[���h1"
>
</TD>
</TR>
<TR>
<TD class="column">���̓t�B�[���h2</TD>
<TD class="column">
<INPUT
type="text"
id="infld2"
name="fld2"
class="fld"
value="���̓t�B�[���h2"
>
</TD>
</TR>
<TR>
<TD class="column">���̓t�B�[���h3</TD>
<TD class="column">
<INPUT
type="text"
id="infld3"
name="fld3"
class="fld"
value="���̓t�B�[���h3"
>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
|