今日は、HTMLの指定の場所に、文字を書き出してみましょう。
流れとしては以下のようなものです。
- 該当のidやclassを見つける
- 該当のidやclassのついた要素内に、文字を書き出す
基本的にjQueryは「idやclassを見つけて処理をほどこす」という流れになります。
今回でjQueryの基本動作に慣れていきましょう。
では、ミッションに入っていきます。
ミッションの内容
下記のファイルを再現してみましょう。
ボタンを押すと、要素内のテキストが書き換えられます。
一度、ソースコードの解説に目を通し、作ってみましょう。
もし、どうしても再現できない場合は、下記のファイルを参考にしてください。
ソースコードの解説
jQueryは「いつ」「どこに」「なにをするか」が基本です。
文字を挿入する場合も同じです。
- 「いつ」クリックしたら
- 「どこに」.textareaに
- 「なにをするか」テキストが追加されました。と表示
このような流れで処理を進めます。
具体的には、下記のようにすれば、実現できます。
<button class="clickArea">クリック</button>
<div class="textarea">こちらのテキストが書き換えられます。</div>
<script>
//クリックした時に、、
$(".clickArea").click(function(){
//.textareaのテキストを「テキストが書き換えられました。」に上書きする。
$(".textarea").text('テキストが書き換えられました。');
});
</script>
これで.clickAreaをクリックすると、.textarea内のテキストが書き換えられるようになりました。
- クリックした時に
- クラスtextareaに対して
- テキストが追加されました。を上書きする。
このようにjQueryの書き方は、単純なパターン化がされています。
例えば、上記のソースコードであれば、.textarea内が全て書き換えられます。
ただ「上書き」ではなく「追加」したい場合もありますよね。
その場合は下記のようになります。
<script>
//クリックした時に、、
$(".clickArea").click(function(){
//.textareaに「テキストが追記されました。」を追加する。
$(".textarea").append('テキストが追記されました。');
});
</script>
何が違うのか、おわかりになるでしょうか。
.textが.appendに変わっただけです。
- クリックした時に
- クラスtextareaに対して
- テキストが追加されました。と追記する。
1箇所変えるだけで、機能も大きく変わります。
ぜひ、書き換えて試してみてください。
このようにシンプルな書き方でアクションを起こすことができます。
手軽に色々な処理を加えられるのも、jQueryの魅力の1つです。