■メソッド編 #2(text)
今回は「text()」メソッドを見ていきます。
要素のテキスト情報を取得したり設定したりすることが可能なメソッドです。
引数の有無で以下の様に使い分けます。
・$(‘要素’).text() ：指定した要素のテキスト情報を取得する。
・$(‘要素’).text(“文字”) ：指定した要素のテキストに、引数の「文字」を設定する。
今回は以下のコードを使用して学習します。
(コードはテキストエディタなどに貼り付けて使用してください。)
<!DOCTYPE html> <html lang = "jp"> <head> <meta charset="utf-8"> <title>jQueryの基本</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <h2>jQueryの基本(第6回)</h2> <p id="text1"></p> <p id="text2"></p> <!--ここからjQueryを記述--> <script> //ここにコードを記述 </script> </body> </html>
テキストの取得は以下の例で見ていきます。
■例 (テキストの取得)
$(function(){
alert($('h2').text());
});
上記コードではページをブラウザで開いたときに「h2」タグのテキストを取得して、
上図のようにアラートのメッセージに表示させます。
ではテキストの設定については演習形式にします。
■問題 (テキストの設定)
id「text1」および「text2」の「<p>」要素にテキストを設定して、下図のように表示されるようにして下さい。
※解答例の通りである必要はありません。
値の取得、設定ともによく使うと思うので覚えておくと便利だと思います！
