WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

jQuery演習問題

【問01】300pxの色違いの2の正方形を、それぞれ「表示1」ボタン、「表示2」ボタンを押したら幅・高さ共に0pxから300pxに表示するよう記述しなさい。1つは「「スローで表示」もう1つは「1秒かけて表示」と表示の仕方をわけて記述しなさい。表示中、ボタンをクリックしても命令を受け付けないように記述を追加すること。


【問02】【問01】で記述した2つの正方形をそれぞれ「表示」ボタンと「非表示」ボタンで、表示・非表示を実行させるよう記述しなさい。


【問03】【問01】で記述した2つの正方形を、それぞれ「表示・非表示」ボタン1つで、表示・非表示を繰り返し実行されるよう記述しなさい。


【問04】ボタンをクリックしたら300pxかける400pxの長方形がスライドしながら表示・非表示を繰り返すように記述しなさい。表示していなかったら表示し、表示していたら非表示になるように記述する事。最初の状態は長方形が非表示になっている事。


【問05】ボタンをクリックしたら、h1に対して文字色が赤、背景色が黒、文字の大きさが16pxになるよう記述しなさい。メソッドチェーンを利用する事(h1のテキストは適宜)


【問06】ナビボタンを以下のように3つ作り(大きさ・レイアウトは適宜)、ボタンをクリックしたらクリックしたボタンのみが背景色が変わるようにし、続けて他のボタンをクリックしても、常にクリックしたボタンのみの背景色が変わっている状態にせよ。またjQueryでは必ず「this」を使う事。

<ul>
<li><a href="#">ボタン1</a></li>
<li><a href="#">ボタン2</a></li>
<li><a href="#">ボタン3</a></li>
</ul>


【問07】「変更」ボタンを押したら、p要素内のテキストが変更されるよう記述しなさい

変更前

<p>こんにちは</p>

変更後

<p>さようなら</p>


【問08】「削除」ボタンを押したらp要素が削除されるよう記述しなさい。

変更前

<h1>大見出し</h1>
<p>テキストテキスト</p>

変更後

<h1>大見出し</h1>