🖥
今さら始めるJquery | 「自分を隠す」 超基本チュートリアル
超基本チュートリアル 「自分を隠す」
jQuery Tutorial のとおりにHTMLを書いてみる。
p 要素をクリックした時に、自分を隠すというサンプル。
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function() {
$(this).hide();
});
});
</script>
</head>
<body>
<p>クリックすれば自分を隠す！</p>
<p>クリックすれば自分を隠すぞ！</p>
<p>クリックすれば自分を隠すんだよ！！</p>
</body>
例
テキストをクリックすると、自分が隠れることが分かる。
ところでいちど隠れた自分は元には戻ってこない。やり直すには、ページをリロードしてみよう。
他人を隠す
文法解説 ( jQuery Syntax ) によると、Jqueryの基本は「要素に対して」「何かアクションがあった時」 ( $(selector).action() ) で成り立っているらしい。
- 要素に
- アクションがあった時
- 何かさせる
といった感じだろうか。それならば、
-
u要素を - クリックした時に
-
p要素を隠す
ということも出来るはずだ。早速試してみる。
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("u").click(function() {
$("p").hide();
});
});
</script>
</head>
<body>
<p>他人</p>
<u>他人を隠す！</u>
</body>
例
思ったとおりに動いた。
他人のいない自分だけの世界。
ドキュメント・レディー？
ところで全体を $(document).ready で囲うのは「ドキュメント」が「準備された時」をトリガーに、他全ての処理をその中に入れている、ということらしい。
ドキュメントが全てロードされる前に、jqueryが走ってしまうことを防いでいるそうな。
$(document).ready(function(){
// jQuery methods go here...
});
こう考えると、これもjqueryの基本文法 ( 要素 + アクションがあった時 ) にのっとっていることが分かる。改めて納得。
参考
チャットメンバー募集
何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。
公開日時
2018-06-26
Discussion