jQuery 01-03: div要素に文字を設定する(メソッドについて)

jQueryでhtmlを操作する事に挑戦します。ここではdiv要素に文字を設定します。
実用性は無いのですが、簡単に記載でき構文の確認にちょうどよいのです。
特に、ここではメソッドについて学びます。

sample : divにjQueryで文字を表示する
http://www.designdrill.jp/jquery/01/step02.html
※ソースを表示して、htmlに3つある各divには何も書かれていないことを確認してください。
 表示した文字はjQueryによって表示されます。

 
ではソースを確認しましょう。チェックすべきは以下の一行です。この処理はreadyの
イベントハンドラ内に入っているので、htmlの読込が完了したらすぐに実行されることになります。

jQuery("div").text("hello world");	

まず、最初にjQueryを付けるのは前回のreadyイベントと同じで、まずは
jQueryの処理であることを明示します。続く()内にセレクタを指定します。
前回の記事ではdocumentを指定しましたが、今回はここにhtml要素の「div」を
設定します。これでdiv要素を操作する事ができます。
 
続いて.(カンマ)をはさみtextと記述されています。前回はここに設定された
readyをイベントと説明しましたが、今回は異なります。このtextは
イベント(いつ)ではなくメソッドと呼ばれ「何をする」かを指定しします。
textメソッドはセレクタに設定した要素の内容を設定することができます。
リファレンス:text(値)

メソッドの処理を実行するためには後ろに()を付けるのですが、メソッドによっては今回の
サンプルのように()の中に値を設定します。この値のことを引数と言います。
今回のサンプルでは”hello world”が引数になります。

つまりこの行は「div要素にhello worldと設定」という意味になります。 前回学んだreadyイベント
の中に書かれているので、サンプルをクリックするとすでにhello worldと表示されています。
 
 
 
●メソッドの返値
jQueryではメソッドの引数を設定しないと返値を返すように
なります。以下のstep03.htmlを開きソースを確認してください。
http://www.designdrill.jp/jquery/01/step03.html
リファレンスでは要素を設定するtextとは別に説明されています。
リファレンス:text( )

 
まずbodyタグ内の各div要素に文字があること(aaaaa, bbbbb, ccccc)を確認して下さい。
続いてjQueryのtextメソッドに引数が設定されていないことを確認してください。
ここで勘違いしやすいのが、引数を設定しないとdivの要素が何もない状態に
なるのではないかという点です。しかしstep03.htmlのように、引数に何も
設定していないからといってdivに何も設定されなくなるというわけではありません。
 
もしdivの内容を消したい場合は以下のstep03b.htmlのように引数に空の文字列
“”を設定することで可能です。
http://www.designdrill.jp/jquery/01/step03b.html
 
では実際に返値を受け取ってみましょう。
以下のstep04.htmlを開きソースを確認してください。
引数の受取方はActionScriptと同じで、=を使い左辺の変数に代入する形となります。
http://www.designdrill.jp/jquery/01/step04.html

var returnStrings = jQuery("div").text();	

サンプルでは受け取った返値をalertで表示するようにしていますが、alertの内容で確認
できるように、div要素が複数ある場合は全て連結した状態で返されます。

このように値を調べる仕組みを利用すれば、フォームなどに指定された内容を
書かないと、アラートを出すような仕組みも作成できます。
※追々そのようなサンプルも作成しようと思います。

次回はセレクタの細かい設定について説明します。
 
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


+ 九 = 12


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>