2013

12

26

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

このエントリーをはてなブックマークに追加
Pocket
LINEで送る
Facebook にシェア
reddit にシェア
LinkedIn にシェア

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

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

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

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

jQuery問題集レベル１（メソッド関連）

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

問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』「ときどきweb」の内容を<a href="#">リンクタグを含めた「ときどきweb」にhtml置換せよ

<!--    HTML    -->
<p id="q05">ときどきweb</p>
回答はコチラ
$(function(){
    $("#q05").html('<a href="http://http://tokidoki-web.com">ときどきweb</a>');
});

問6.ID名「q06」の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.ID名「q07」のul要素内のli要素だけを削除せよ

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

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

<!--    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で指定したid名「q02」の装飾プロパティを取得して変数q02に代入し、文字の色の値（カラーコード）をid名「#q09」のp要素にテキスト出力せよ

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

問10.既にclass名「aaa」が付いたid名「#q10」のp要素をクリックしたらclass名を「aaa」→「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のid名「#q10」のp要素テキストの先頭に「超平和バスターズ、」を追加せよ（※「めんま、」は書き換えず残したままで）

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

問12.問10のid名「#q10」の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">Ｑ24</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">Ｑ２７</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">Ｑ２９</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に触れる方へ

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

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

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

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

ファイル形式版で再挑戦

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

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

このエントリーをはてなブックマークに追加
Pocket
LINEで送る
Facebook にシェア
reddit にシェア
LinkedIn にシェア

トップへ