jQuery text html val
今回は、jQueryの「text」,「html」,「val」について書きます。
・「text」
「text」は、要素内にあるテキストを取得・変更ができます。
要素内のテキストを変更する場合は、このようにします。
<!--省略 --> <p>Hello!</p> <script> $(function(){ $('p').text('Bye!'); }); </script> <!--省略 -->
実行結果
引数とかは、こんな感じです。
$(セレクター).text(変更後の文字列);
要素内のテキストを取得する場合は、このようにします。
<!--省略 --> <p>Hello!</p> <script> $(function(){ console.log( $('p').text() ); }); </script> <!--省略 -->
実行結果
「.text()」とすれば、取得できます。
・「html」
「html」は、指定した要素にHTMLの取得・変更ができます。
指定した要素のHTMLを変更する場合は、このようにします。
<!--省略 --> <p>Hello!</p> <script> $(function(){ $('p').html('<h1>Good!</h1>'); }); </script> <!--省略 -->
実行結果
引数とかは、こんな感じです。
$(セレクター).text(書き換え);
指定した要素のHTMLを取得する場合は、このようにします。
<!--省略 --> <p>Hello!</p> <script> $(function(){ console.log( $('p').html() ); }); </script> <!--省略 -->
実行結果
・「val」
「val」は、要素のvalue値を取得・変更ができます。
要素のvalue値を変更する場合は、このようにします。
<!--省略 --> <input type="text" value="UFO" /> <script> $(function(){ $('input').val('Hooooooooo!'); }); </script> <!--省略 -->
実行結果
引数は、こんな感じです。
$(セレクター).val(変更する内容);
要素のvalue値を取得する場合は、このようにします。
<!--省略 --> <input type="text" value="UFO" /> <script> $(function(){ console.log( $('input').val() ); }); </script> <!--省略 -->
実行結果
要素の値を取得・変更できたりするメッソドでした。
これで、終わります。
参考サイト
jQuery 日本語リファレンス