Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています(^^) 週末はレストランやコンビニのお菓子のことを書いています。

jQuery text html val

今回は、jQueryの「text」,「html」,「val」について書きます。


・「text」

「text」は、要素内にあるテキストを取得・変更ができます。

要素内のテキストを変更する場合は、このようにします。

<!--省略  -->

<p>Hello!</p>	
<script>
    $(function(){
    	   $('p').text('Bye!');
    });
</script>

<!--省略  -->

実行結果
f:id:gupuru:20140524010514p:plain

引数とかは、こんな感じです。

 $(セレクター).text(変更後の文字列);

要素内のテキストを取得する場合は、このようにします。

<!--省略  -->

<p>Hello!</p>	
<script>
    $(function(){
    	    console.log( $('p').text() );
    });
</script>

<!--省略  -->

実行結果
f:id:gupuru:20140524010715p:plain

「.text()」とすれば、取得できます。



・「html」

「html」は、指定した要素にHTMLの取得・変更ができます。

指定した要素のHTMLを変更する場合は、このようにします。

<!--省略  -->

<p>Hello!</p>	
<script>
    $(function(){
    	     $('p').html('<h1>Good!</h1>');
    });
</script>

<!--省略  -->

実行結果
f:id:gupuru:20140524011313p:plain

引数とかは、こんな感じです。

 $(セレクター).text(書き換え);


指定した要素のHTMLを取得する場合は、このようにします。

<!--省略  -->

<p>Hello!</p>	
<script>
    $(function(){
    	     console.log( $('p').html() );
    });
</script>

<!--省略  -->

実行結果
f:id:gupuru:20140524010715p:plain



・「val」

「val」は、要素のvalue値を取得・変更ができます。

要素のvalue値を変更する場合は、このようにします。

<!--省略  -->

<input type="text" value="UFO" />
<script>
    $(function(){
    	       $('input').val('Hooooooooo!');
    });
</script>

<!--省略  -->

実行結果
f:id:gupuru:20140524012213p:plain

引数は、こんな感じです。

 $(セレクター).val(変更する内容);

要素のvalue値を取得する場合は、このようにします。

<!--省略  -->

<input type="text" value="UFO" />
<script>
    $(function(){
    	   console.log( $('input').val() );
    });
</script>

<!--省略  -->

実行結果
f:id:gupuru:20140524012318p:plain


要素の値を取得・変更できたりするメッソドでした。
これで、終わります。


参考サイト
jQuery 日本語リファレンス