HTMLファイルに含まれるテキストをjQueryで
取得・変更するには、text()という命令を使用します。
テキストの取得
text()の括弧内に何も記述しない場合、セレクタで指定した要素に
含まれるテキストを取得できます。
サンプルコードの31行目をみると
$("#test1").text()
と書かれていて、そこでHTMLの<p id="#test1">の
「試しに何かを書いてみる。」を取得しています。
テキストの変更
34行目で「試しに何かを書いてみる。」を
「変更完了!」と文字に変えています。
35行目は何も書かれていない物を
「文字を追加する。」と文字に変えています。
このようにtext("何かしらの文字")で
文字を追加することができます。
実行結果はこちらです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQueryStudy</title> <style> *{margin:0;padding:0;} #container{ width:640px; height:400px; margin:0 auto;} </style> <script src="js/jquery-1.11.3.js"></script> </head> <body> <div id="container"> <p id="test1">試しに何かを書いてみる。</p> <p id="test2"></p> </div><!--contatiner--> <script> $(document).ready(function(){ //ブラウザのconsoleの箇所に値を出力する命令 console.log( $("p#test1").text() ); //実際に文字を変える命令 $("p#test1").text("変更完了!"); $("p#test2").text("文字を追加する。"); }); </script> </body> </html> |
console.logについて
サンプルコードの31行目の
console.log()と命令ですが、
これはブラウザの「console」という
箇所に値や文字を出力するための命令です。
確認方法は、Chromeだとブラウザを立ち上げ
このサンプルコードのファイルを読み込んで
F12ボタンを押します。その後に
「Elements」「Network」といった窓がでます。
そこの「console」タブをクリックすると
「試しに何かを書いてみる。」と変更前の
テキストが表示されているのが分かります。
動作確認時に使用することもあるので
覚えておくといいかもしれません。