今回はjQueryとJavaScriptについて。
「jQueryはなんとなくサンプルをダウンロードしてきて埋め込むぐらいはできるけど、JavaScriptのことは分からないよ。」っていう人も、ぜひJavaScriptを覚えよう!
今回はその1回目。
.hide() 関数で文字や画像を消そう!
まずは今回のサンプルから。
JSの解説
厳密には「消す」ではなく「非表示」にしています。
具体的にはCSSを使って
.hide()関数では、アニメーションを使用せずにアクションを起こした瞬間(例:ここではクリックした瞬間)に非表示にします。
すでに非表示になっている場合は、何も起こりません。
JSでは「何を」、「どうするのか」が基本構造になるので、この書き方を覚えてくださいね。
「jQueryはなんとなくサンプルをダウンロードしてきて埋め込むぐらいはできるけど、JavaScriptのことは分からないよ。」っていう人も、ぜひJavaScriptを覚えよう!
今回はその1回目。
.hide() 関数で文字や画像を消そう!
まずは今回のサンプルから。
See the Pen jQuery[Basic-1] by CreativeFlake (@creativeflake) on CodePen.
クリックして文字が消えましたか?JSの解説
$(document).ready(function(){
$("p").click(function(){ //pタグをクリックすると次の関数を実行
$(this).hide(); //これ(pタグのこと)を非表示にする
});
});
厳密には「消す」ではなく「非表示」にしています。
具体的にはCSSを使って
display : none;
にしているということです。.hide()関数では、アニメーションを使用せずにアクションを起こした瞬間(例:ここではクリックした瞬間)に非表示にします。
すでに非表示になっている場合は、何も起こりません。
JSでは「何を」、「どうするのか」が基本構造になるので、この書き方を覚えてくださいね。
Written by Creative Flake
コメント
コメントを投稿