jQuery は、ブラウザ上のコンテンツをオブジェクトとして動的に扱う場合に、 非常に優れた仕様を持っていますが、既存の DOM だけを知っている場合は、 どう使ってオブジェクトにアクセスしていいか少し戸惑います。 また、DOM だけでは無く、JavaScript の特性を良く知っていないと、 ドキュメントから機能を知るにはなかなか難しいものがあると思います。 ( jQuery を知ってしまうと、DOM なんか使いたくなくなるでしょうけど ) ここでは、基本的な機能( 入力値の参照と DIV の innerHTML への参照)を使って サンプルを作成してみました 基本機能の解説最初に、WEB ページで JavaScript を使う場合に重要なのが、ロード時の処理で、 ベタに記述してしまうと、コンテンツがロードし終わった後に記述する必要があり、 正式に書くと、けっこう面倒な事になってしまいます。 jQuery では、ここに書いた書式の簡略形もありますし、 非常に便利だと思います 01. $(document).ready( 02. function () { 03. 04. var str = "" ; 05. str = $( "#infld1" ).get()[0].value + "<br />" ; 06. $( '#area' ).append(str); 07. str = $( "#infld2" ).get()[0].value + "<br />" ; 08. $( '#area' ).append(str); 09. str = $( "#infld3" ).get()[0].value + "<br />" ; 10. $( '#area' ).append(str); 11. 12. } 13. ); 上記サンプルでは、id 属性を使って、jQuery オブジェクトを参照した後、 get メソッドによって、jQuery オブジェクトのコレクションを取得し、 その先頭オブジェクトを使って、本来のオブジェクトの value 属性の値を 取得しています。 id 属性で参照した jQuery オブジェクトですから、オブジェクトは1つ しか入っていませんので、[0] で参照します。これは DOM の getElementsByTagName 等と同じと考えれば良いでしょう。 実際は、このような回りくどいことはせずに $("#infld1").val() で取り出して、 $("#infld1").val( "セットしたい文字列" ) のようにして使用します ただ、サーバーと通信するWEB アプリケーションとしては、name 属性を使用するので、 その際はこの回りくどい方法を使用する必要があるようですが、id と name を両方 指定しておけば問題はありません 01. // ************************************* 02. // name属性で単独参照 03. // ************************************* 04. function refNameAtt() { 05. 06. // innerHTML をクリア 07. $( '#area' ).html( "" ); 08. 09. // jQuery のメソッドで値セット 10. $( "#infld1" ).val( "入力フィールドA" ); 11. $( "#infld2" ).val( "入力フィールドB" ); 12. $( "#infld3" ).val( "入力フィールドC" ); 13. 14. // name属性で単独参照 15. var str = "" ; 16. str = $( "input[name='fld1']" ).get()[0].value + "<br />" ; 17. $( '#area' ).append(str); 18. str = $( "input[name='fld2']" ).get()[0].value + "<br />" ; 19. $( '#area' ).append(str); 20. str = $( "input[name='fld3']" ).get()[0].value + "<br />" ; 21. $( '#area' ).append(str); 22. 23. } DIV 等の 入力以外のコンテンツに対して行う innerHTML の処理は、ブラウザ毎(IEやFirefoxやOpera等)に 共通しているのですが、テキストの処理となるとそれぞれ違って煩雑です。 そういう意味では直感的に行える html メソッドと text メソッドは便利この上ないものだと思います さらに、class 属性で行う each メソッドを使った一括処理は、JavaScript のコード作成を 画期的に短縮させると思います。 ※ ここで使用しているセレクタについてはここでは述べませんが、 ※ ただの input だとページ上の全ての input 要素が対象です。 あと、イベントの処理もかなり面白い書き方ができますが、 全て jQuery という言語だと思えば良いと思います。そういうスタンスで サンプル等を読んで、必要な部分だけ使って行けばすぐ使えると思います。 ( 必要無いものは無視して、深読みしないほうがいいです ) 01. // ************************************* 02. // 一括参照 03. // ************************************* 04. function refAll() { 05. 06. // innerText をクリア 07. $( '#area' ).text( "" ); 08. 09. // elemant で値セット 10. var cnt = 0; 11. // セレクタで限定参照 12. $( "#tbl input" ).each( 13. function () { 14. cnt++; 15. // this は通常のオブジェクト 16. $( '#area' ).append( this .id+ "<br />" ); 17. // $(this) は this を元にした jQueryオブジェクト 18. $( this ).val( "elemant_" +cnt); 19. } 20. ); 21. 22. // class で値セット 23. cnt = 0; 24. // セレクタで限定参照 25. $( "#tbl .fld" ).each( 26. function () { 27. cnt++; 28. $( '#area' ).append( "class_" +cnt+ "<br />" ); 29. } 30. ); 31. 32. } 全てのソースコード001. <HTML> 002. <HEAD> 003. <META http-equiv= "Content-type" content= "text/html; charset=euc-jp" /> 004. <TITLE>jQueryサンプル(基本参照)</TITLE> 005. <STYLE type= "text/css" > 006. * { 007. font-size: 12px; 008. } 009. .column { 010. border-style:solid; 011. border-width:1px; 012. border-color: #000000; 013. padding: 4px; 014. } 015. </STYLE> 016. <SCRIPT language= "javascript" type= "text/javascript" src= "http://winofsql.jp/sh/jquery.js" ></script> 017. <SCRIPT language= "javascript" type= "text/javascript" > 018. 019. // ************************************* 020. // ドキュメント onLoad 021. // ************************************* 022. $(document).ready( 023. function () { 024. 025. var str = "" ; 026. str = $( "#infld1" ).get()[0].value + "<br />" ; 027. $( '#area' ).append(str); 028. str = $( "#infld2" ).get()[0].value + "<br />" ; 029. $( '#area' ).append(str); 030. str = $( "#infld3" ).get()[0].value + "<br />" ; 031. $( '#area' ).append(str); 032. 033. } 034. ); 035. 036. // ************************************* 037. // name属性で単独参照 038. // ************************************* 039. function refNameAtt() { 040. 041. // innerHTML をクリア 042. $( '#area' ).html( "" ); 043. 044. // jQuery のメソッドで値セット 045. $( "#infld1" ).val( "入力フィールドA" ); 046. $( "#infld2" ).val( "入力フィールドB" ); 047. $( "#infld3" ).val( "入力フィールドC" ); 048. 049. // name属性で単独参照 050. var str = "" ; 051. str = $( "input[name='fld1']" ).get()[0].value + "<br />" ; 052. $( '#area' ).append(str); 053. str = $( "input[name='fld2']" ).get()[0].value + "<br />" ; 054. $( '#area' ).append(str); 055. str = $( "input[name='fld3']" ).get()[0].value + "<br />" ; 056. $( '#area' ).append(str); 057. 058. } 059. 060. // ************************************* 061. // 一括参照 062. // ************************************* 063. function refAll() { 064. 065. // innerText をクリア 066. $( '#area' ).text( "" ); 067. 068. // elemant で値セット 069. var cnt = 0; 070. // セレクタで限定参照 071. $( "#tbl input" ).each( 072. function () { 073. cnt++; 074. // this は通常のオブジェクト 075. $( '#area' ).append( this .id+ "<br />" ); 076. // $(this) は this を元にした jQueryオブジェクト 077. $( this ).val( "elemant_" +cnt); 078. } 079. ); 080. 081. // class で値セット 082. cnt = 0; 083. // セレクタで限定参照 084. $( "#tbl .fld" ).each( 085. function () { 086. cnt++; 087. $( '#area' ).append( "class_" +cnt+ "<br />" ); 088. } 089. ); 090. 091. } 092. 093. </SCRIPT> 094. </HEAD> 095. <BODY> 096. 097. <INPUT type= "button" value= "単独参照" onClick= "refNameAtt()" > 098. 099. <INPUT type= "button" value= "一括参照" onClick= "refAll()" > 100. <TABLE 101. id= "tbl" 102. border=1 103. style=' 104. border-collapse:collapse; 105. border-style:solid; 106. border-width:1px; 107. border-color: #000000; 108. ' 109. > 110. <TR> 111. <TD nowrap class = "column" >DIV ( id=area ) => </TD> 112. <TD class = "column" > 113. <DIV 114. id= "area" 115. style=' 116. width:100%; 117. background-color: #A0B9BD; 118. ' 119. ></DIV> 120. </TD> 121. </TR> 122. 123. 124. <TR> 125. <TD class = "column" >入力フィールド1</TD> 126. <TD class = "column" > 127. <INPUT 128. type= "text" 129. id= "infld1" 130. name= "fld1" 131. class = "fld" 132. value= "入力フィールド1" 133. > 134. </TD> 135. </TR> 136. <TR> 137. <TD class = "column" >入力フィールド2</TD> 138. <TD class = "column" > 139. <INPUT 140. type= "text" 141. id= "infld2" 142. name= "fld2" 143. class = "fld" 144. value= "入力フィールド2" 145. > 146. </TD> 147. </TR> 148. <TR> 149. <TD class = "column" >入力フィールド3</TD> 150. <TD class = "column" > 151. <INPUT 152. type= "text" 153. id= "infld3" 154. name= "fld3" 155. class = "fld" 156. value= "入力フィールド3" 157. > 158. </TD> 159. </TR> 160. 161. </TABLE> 162. 163. 164. 165. </BODY> 166. </HTML> |