2013

12

26

jQuery覚えたい人向け入門の問題集作ってやんよ!!!(メソッド編)

スポンサードリンク


jQueryを覚えたい!!という方で本屋さんで『すぐにわかるjQuery入門』なる参考書を買っては一週間後にはその話題はタブーになっちゃう方へちょっとした問題集を作ってみようと思います。

もう参考書を買ってわかったつもりとはさよならbyebye♪
これからjQueryやJavaScriptを覚えていきたい方など是非とも!!

練習問題.『Hello,World』をアラート出力せよ

回答はコチラ
alert("Hello,World");

jQuery問題集レベル1(メソッド関連)

特殊なロジックや記述は不要。基本的にはメソッド単品のみで処理可能レベル

問1.id名『q01』のテキストカラーを赤に変更せよ

<!--    HTML    -->
<p id="q01">ときどきweb</p>
回答はコチラ
$(function(){
    $("#q01").css('color','red');
});


問2.id名『q02』のテキストカラーを青・背景色を黄色に変更せよ

<!--    HTML    -->
<p id="q02">ときどきweb</p>
回答はコチラ
$(function(){
    $("#q02").css({'color':'red','background':'yellow'});
});


問3.id名『q03』の空の段落にテキスト「エレン」を追加せよ

<!--    HTML    -->
<p id="q03"></p>
回答はコチラ
$(function(){
    $("#q03").text("エレン");
});


問4.id名『q04』「エレン」のテキストを「駆逐してやるッ!!!」に書き換えよ

<!--    HTML    -->
<p id="q04">エレン</p>
回答はコチラ
$(function(){
    $("#q04").text("駆逐してやるッ!!!");
});


問5.id名『q05』「あああ」の内容を<a hraf=”#”>タグを含めた「いいい」に置換せよ

<!--    HTML    -->
<p id="q05">あああ</p>
回答はコチラ
$(function(){
    $("#q05").html('<a href="#">いいい</a>');
});


問6.ul要素にclass名「aaa」を追加せよ

<!--    HTML    -->
<ul id="q6">
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
</ul>
/*    CSS    */
.aaa {
	color:#F00;
}
回答はコチラ
$(function(){
    $("#q6").addClass("aaa");
});


問7.問6のli要素を削除せよ

<!--    HTML    -->
<ul id="q6">
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
</ul>
回答はコチラ
$(function(){
    $("#q06 li").remove();
});


問8.ボタンをクリックしたら『クリックしますた』のアラート表示

<!--    HTML    -->
<div class="button">ぼたん</div>
/*    CSS    */
.button {
	padding: 5px 10px;
	border:#666 solid 1px;
	background:#FFF;
	display:block;
	width:100px;
	text-align:center;
	cursor:pointer;
}
回答はコチラ
$(function(){
    $(".button").click(function(){
        alert("『クリックしますた』");
    });
});


問9.問2のスクリプトを変数aaaに代入し文字の色の値をp#q9にテキスト出力せよ

<!--    HTML    -->
<p id="q9"></p>
回答はコチラ
$(function(){
    var q6 = $("p").css("color");
    $("#q9").text(q6);
});


問10.p要素をクリックしたらclass名「bbb」を追加せよ

<!--   HTML    -->
<p id="q10" class="aaa">めんま、</p>
/*    CSS    */
.bbb {
	font-weight:900;
	font-size:24px;
	color:#00F;
}
回答はコチラ
$(function(){
    $("#q10").click(function(){
        $(this).toggleClass("bbb");
    });
});


問11.問10のテキストの先頭に「超平和バスターズ、」を追加せよ

<!--    HTML    -->
<p id="q10">めんま、</p>
回答はコチラ
$(function(){
    $("#q10").prepend("超平和バスターズ、");
});


問12.p要素の末尾に「ゆきあつ、つるこ、あなる、ぽっぽ」を追加せよ

<!--    HTML    -->
<p id="q10">めんま、</p>
回答はコチラ
$(function(){
    $("#q10").append("じんたん、ゆきあつ、つるこ、あなる、ぽっぽ")
});


問13.ul要素のliタグの前にliタグで『飛べない』を追加せよ

<!--    HTML    -->
<ul id="q13">
    <li>豚は</li>
</ul>
回答はコチラ
$(function(){
    $("#q13 li").before("<li>飛べない</li>");
});


問14.問13のliタグの最後にliタグで『ただの豚』を追加せよ

<!--    HTML    -->
<ul id="q13">
    <li>豚は</li>
</ul>
回答はコチラ
$(function(){
   $("#q13 li").eq(-1).after("<li>ただの豚</li>");
});


問15.pタグ「あああ」をID名q15のdiv要素の最初に追加せよ

<!--    HTML    -->
<div id="q15">
    <p>いいい</p>
</div>
回答はコチラ
$(function(){
    $('<p>あああ</p>').prependTo('div #q15');
});


問16.pタグ「ううう」をID名q15のdiv要素の最後に追加せよ

<!--    HTML    -->
<div id="q15">
    <p>いいい</p>
</div>
回答はコチラ
$(function(){
    $('<p>ううう</p>').appendTo('div #q15');
});


問17.pタグ「ききき」をid名「q17」のdiv要素の前に差し込め

<!--    HTML    -->
<p>かかか</p>
<div id="q17">#q17</div>
/*    CSS    */
#q17 {
	width:100px;
	height:20px;
	background:#333;
	color:#FFF;
	padding:5px;
}
回答はコチラ
 $(function(){
    $('<p>ききき</p>').insertBefore('div #q17');
});


問18.pタグ「くくく」をid名「q17」のdiv要素の後に差し込め

<!--    HTML    -->
<div id="q17">#q17</div>
回答はコチラ
$(function(){
    $('<p>くくく</p>').insertAfter('div #q17');
});


問19.id名q19の要素をclass名「ccc」のdiv要素で囲みなさい

<!--    HTML    -->
<p id="q19">家畜の豚</p>
/*    CSS    */
.ccc {
	padding:10px;
	border:#000 2px solid;
}
回答はコチラ
 $(function(){
    $("#q19").wrap('<div class="ccc"></div>');
});


問20.id名「q20」要素の親要素class名「ccc」を取り除きなさい
※remove()関数やhide()関数は使用しない事。

<!--    HTML    -->
<div class="ccc">
    <p id="q20">この支配からの卒業</p>
</div>
回答はコチラ
$(function(){
    $("#q20").unwrap('div.ccc');
});


問21.class名「q21」が付く要素をclass名「ddd」のdiv要素の中にすべて囲みなさい

<!--    HTML    -->
<p class="q21">さささ</p>
<p>ししし</p>
<p class="q21">すすす</p>
<p>せせせ</p>
<p class="q21">そそそ</p>
/*    CSS    */
.ddd {
	opacity:0.5;
	background:#F0F;
		cursor:pointer;
}
回答はコチラ
 $(function(){
    $("p.q21").wrapAll('<div class="ddd"></div>')
});


問22.class名「q22」が付くすべての要素内テキストをclass名「ddd」のdiv要素で囲みなさい

<!--    HTML    -->
<p class="q22">たたた</p>
<p>ちちち</p>
<p class="q22">つつつ</p>
<p>ててて</p>
<p class="q22">ととと</p>
回答はコチラ
$(function(){
    $("p.q22").wrapInner('<div class="ddd"></div>')
});


問23.class名「q23」が付くすべての要素すべてを「xxx」のp要素に置き換えなさい

<!--    HTML    -->
<p class="q23">ななな</p>
<p>ににに</p>
<p class="q23">ぬぬぬ</p>
<p>ねねね</p>
<p class="q23">ののの</p>
回答はコチラ
$(function(){
    $("p.q23").replaceWith('<p>xxx</p>')
});


問24.class名「q24」要素のclass名を「q24_a」に書き換えなさい

<!--    HTML    -->
<p class="q24">Q24</p>
/*    CSS    */
.q24_a {
	text-decoration:underline;
	color:#00F;
}
回答はコチラ
 $(function(){
    $("p.q24").attr("class","q24_a");
});


問25.class名「q25」が付いている要素のaタグのhref属性を削除せよ

<!--    HTML    -->
<p class="q25"><a href="#">ははは</a></p>
<p><a href="#">ひひひ</a></p>
<p class="q25"><a href="#">ふふふ</a></p>
<p><a href="#">へへへ</a></p>
<p class="q25"><a href="#">ほほほ</a></p>
回答はコチラ
 $(function(){
    $("p.q25 a").removeAttr('href');
});


問26.class名「q26」が付いている要素のaタグに別窓表示の属性を追加せよ

<!--    HTML    -->
<p class="q26"><a href="#">ままま</a></p>
<p><a href="#">みみみ</a></p>
<p class="q26"><a href="#">むむむ</a></p>
<p><a href="#">めめめ</a></p>
<p class="q26"><a href="#">ももも</a></p>
回答はコチラ
 $(function(){
		$("p.q26 a").attr("target","_blank");   
});


問27.class名「q27_a」要素をclass名「q27_b」に切り替えよ

<!--    HTML    -->
 <p class="q27_a">Q27</p>
/*    CSS    */
.q27_b{
	text-decoration:underline;
	color:#00F;
}
回答はコチラ
 $(function(){
		$(".q27_a").toggleClass("q27_b")
});


問28.フォームに入力値を「入力してください」に書き換えなさい

<!--    HTML    -->
<form>
    <input type="text" value="入力しないでください">
</form>
回答はコチラ
 $(function(){
    $("form input").val("入力してください")			   
});


問29.id名「q29」の要素をブラウザ上5430px、左800px値の位置で表示せよ

<!--    HTML    -->
<p id="q29">Q29</p>
/*    CSS    */
#q29 {
	background:#FFF;
	width:100px;
	height:100px;
}
回答はコチラ
  $(function(){
		$("#q29").offset({top:5450,left:800});
});


問30.p要素をクリックしたら直下のulの子要素を全て空にせよ
※空のliタグも残さないこと!

<!--    HTML    -->
<p class="button">ぼたん</p>
<ul id="q30">
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
</ul>
/*    CSS    */
.button {
	padding: 5px 10px;
	border:#666 solid 1px;
	background:#FFF;
	display:block;
	width:100px;
	text-align:center;
	cursor:pointer;
}
回答はコチラ
 $(function(){
    $("p.button").click(function(){
        $("#q30").empty();
    });
});


これからjQueryに触れる方へ

レベル1(入門編)は以上30問となります。
全問解いていただけた方がいるかは定かではありませんが、ほぼ全問jQueryで用意された関数をひとつだけでかなりマニアックな処理も簡単にできちゃいます。

自分は「jQueryはCSSの延長だ!!!」なんて教えられた事もあり、jQueryを覚えるための最初の一歩は『jQueryライブラリに用意された関数はどんな事ができるか?』を知る事ではないかと思います。

入門書などではよく”アコーディオンを作ろう!”などはお約束であったりして、まだfunctionの宣言もわからない人にとってはソ-スコードをそのままコピペして動けばアコーディオンを習得した気分になってしまいがちですが、toggle()show()hide()が果たす役割をしっかり理解すれば、自ずとアイコン付きアコーディオンくらいで必要な処理など簡単に設計できてしまいます。

このレベル1をクリアできればjQueryはとても便利なライブラリだと実感できるハズです。

ファイル形式版で再挑戦

ファイル形式はコチラです。
ページを保存していただければ、すぐに配布できます。

これからjQueryを覚えたい人のお手伝いになれれば嬉しいです。
レベル2は近日公開予定です。



トップへ