はじめに
jQueryは、HTMLやCSSを操作してWebページを動的にするためのライブラリです。本記事では、jQueryの基本を学べる練習問題を紹介します。JavaScriptを直接書くよりも簡潔にコードを書けるため、初心者でも扱いやすいのが特徴です。
練習問題には解答例も用意していますので、実際に手を動かしながら学んでいきましょう。
練習問題
問題1: テキストの内容を変更する
HTMLの<p>要素のテキストを、クリックした際に別の文章に変更してください。
<div class="text-box">
<p>ここをクリックして変更しよう！</p>
<button id="change-text">テキストを変更</button>
</div>
ポイント
click()メソッドを使用します。- テキストの変更には
text()メソッドを活用します。
問題2: 背景色を動的に切り替える
以下のボタンをクリックするたびに、背景色がランダムに切り替わるようにしてください。
<div class="color-box">
<button id="change-bg">背景色を変更</button>
</div>
色をランダムに生成するにはMath.random()を使います。CSSの背景色変更にはcss()メソッドを使用します。
問題3: 要素をフェードイン・アウトさせる
以下のボタンをクリックするたびに、<div>要素がフェードインまたはフェードアウトするアニメーションを追加してください。
<div class="fade-box">
<div class="fade-item">フェード効果を試してみよう！</div>
<button id="fade-toggle">フェード切り替え</button>
</div>
ポイント
- フェードイン・アウトには
fadeToggle()メソッドを使用します。 - アニメーションのスピードを指定することも可能です。
問題4: 要素の追加と削除
以下のリストに、新しい項目を追加したり削除したりする機能を実装してください。
<div class="list-box">
<ul id="dynamic-list">
<li>項目1</li>
<li>項目2</li>
</ul>
<button id="add-item">項目を追加</button>
<button id="remove-item">項目を削除</button>
</div>
ポイント
- 要素の追加には
append()メソッドを使用します。 - 削除には
remove()メソッドを使用します。
解答例
▶ 問題１解答例
$('#change-text').click(function() {
$('.text-box p').text('テキストが変更されました！');
});
▶ 問題２解答例
$('#change-bg').click(function() {
const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
$('.color-box').css('background-color', randomColor);
});
▶ 問題３解答例
$('#fade-toggle').click(function() {
$('.fade-item').fadeToggle('slow');
});
.fade-box {
text-align: center;
margin: 20px;
}
.fade-item {
display: inline-block;
padding: 20px;
background-color: #f0f0f0;
color: #333;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 10px;
}
▶ 問題４解答例
$('#add-item').click(function() {
$('#dynamic-list').append('<li>新しい項目</li>');
});
$('#remove-item').click(function() {
$('#dynamic-list li:last-child').remove();
});
まとめ
jQueryを使うと、少ないコードで動的なWebページを作成できます。今回の練習問題を通じて、jQueryの基本操作や便利なメソッドを理解することができます。まずは基本を押さえて、応用的な動きを作れるようにチャレンジしてみてください。