jQuery覚えたい人向け入門の問題集作ってやんよ!!!（ベタ書きfunction編）

Tweet

Pocket

前回、「jQueryに興味はあるけど難しそう・・・」とか「覚えたいけど何をどうすれば？」といったjQueryに関心のある方のお手伝いができれば!!!
といった訳で問題集を作ってみました。

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

前回はjQueryライブラリで用意された関数を用いてページを読み込んだ時点で処理を行うものがメインでしたが、
ＵＩやヌルヌル動くアニメーションを手軽に作成できるのがjQueryの真骨頂だと思いますので、
せっかくテキストの書き換えや要素の追加・削除ができていればあとはもうあとはfunction宣言や記述ルールのコツさえつかめばおｋ。

jQuery問題集レベル２（ベタ書きfunction関連）

レベル２・・・・・完成イメージから処理に適したメソッドを選定でき、functionイベントを設計できるレベル

問31.id名「q31」の要素にサイズが大きい画像を設置し、それがページに読み込まれたら画像サイズを幅500px、高さ300pxにリサイズ指定しなさい

<!--    HTML    -->
<div id="q31">
    	<img src="http://tokidoki-web.com/file0925.png"/>
</div>

回答はコチラ

$(function(){
	$("#q31 img").load(function(){
		$(this).css({'width':'500','height':'300'});		   
	});
});

---

問32.ブラウザのウィンドウのサイズが変更されたタイミングでQ31.で指定した画像サイズを幅50px、高さ30pxにリサイズ指定しなさい

回答はコチラ

$(function(){
	$(window).resize(function(){			
		$("#q31 img").css({'width':'50','height':'30'});
	});
});

---

問33.class名「eee」のul要素内のリストの数を取得し、id名「q32」要素に『liタグの数はn個』で表示せよ

<!--    HTML    -->
<ul class="eee">
    <li>リスト①</li>
    <li>リスト②</li>
    <li>リスト③</li>
    <li>リスト④</li>
    <li>リスト⑤</li>
    <li>リスト⑥</li>
</ul>
<p id="q33"></p>

回答はコチラ

$(function(){
	var eee = $("ul.eee").children().length;
	$("#q33").text("liタグの数は" + eee + "個");
});

---

問34.Q33のリストをクリックしたら今のクリックしたリストが何番目かをid名「q34」の要素に『クリックしたのはn番目』表示 ※カウントは"０"ではなく"１"からスタートさせること！

<!--    HTML    -->
<ul class="eee">
    <li>リスト①</li>
    <li>リスト②</li>
    <li>リスト③</li>
    <li>リスト④</li>
    <li>リスト⑤</li>
    <li>リスト⑥</li>
</ul>
<div id="q34"></div>

回答はコチラ

$(function(){
	$("ul.eee").children().click(function(){
		var fff = $("ul.eee").children().index(this) +1;
		$("#q34").text("クリックしたのは" + fff + "番目");
	});
});

---

問35.id名「q35」要素のクリックしたら、ウインドウからの左位置を取得し、要素を+500px右に移動させよ

<!--    HTML    -->
<div id="q35_box">
    <div id="q35"></div>
</div>

/*    CSS    */
#q35_box {
    position:relative;
    height:250px;
}

#q35 {
    width:150px;
    height:150px;
    background:#F0F;
    position:absolute;
}

回答はコチラ

$(function(){
	$("#q35").click(function(){
		var ggg = $(this).offset().left;
		$("#q35").animate({'left':ggg + 500})
	});		
});

---

問36.『合格』を70点以上、『不合格』をそれ以下だとして75点取った判定をid名「q36」要素に出力せよ

<!--    HTML    -->
<div id="q36"></div>

回答はコチラ

$(function(){
	var q36 = 75;
	$("#q36").text((q36 >= 70) ? '合格' : '不合格');
});

---

問37.class名「q37」の付いたaタグ要素はリンクをさせない処理をせよ

<!--    HTML    -->
<ul>
    <li><a class="q37" href="http://tokidoki-web.com/category/html5css3/">HTML5/CSS3</a></li>
    <li><a href="http://tokidoki-web.com/category/javascript/">JavaScript</a></li>
    <li><a class="q37" href="http://tokidoki-web.com/category/php/">PHP</a></li>
    <li><a href="http://tokidoki-web.com/category/mysql/">MySQL</a></li>
    <li><a class="q37" href="http://tokidoki-web.com/category/jquery/">jQuery</a></li>
</ul>

回答はコチラ

$(function(){
	$("a.q37").click(function(){
		return false;
	});
});

---

問38.toggleメソッドのみでclass名「button」をクリックされる毎にid名「q38」要素のテキストを『魔法少女!?なにそれカッケー!!!』、『QBボクと契約してあ～だこ～だ／人◕ ‿‿ ◕人＼』、『ワルプルギスｷﾀ-----(ﾟ∀ﾟ)---!!!』、『世界オーワタ＼(＾o＾)／』、『ほむほむ転生(D. C.)』の順でループ切り替え出力せよ

<!--    HTML    -->
<p class="button">５クリックでわかる『魔法少女ま○かマ○カ』</p>
<div id="q38"></div>

回答はコチラ

$(function(){
	$("p.button").toggle(function(){
		$("#q38").text("魔法少女!?なにそれカッケー!!!")				
	},function(){
		$("#q38").text("QBボクと契約してあ～だこ～だ／人◕ ‿‿ ◕人＼")				
	},function(){
		$("#q38").text("ワルプルギスｷﾀ-----(ﾟ∀ﾟ)---!!!")				
	},function(){
		$("#q38").text("世界オーワタ＼(＾o＾)／")				
	},function(){
		$("#q38").text("ほむほむ転生(D. C.)")	
	})
});

※現在CDNのヴァージョン1.9以上では.toggle(function, function, ... ) （「要素がクリックされる毎に関数を実行する」の意）のtoggle関数の記述は非推奨となっています。

---

問39.class名「.q39」のul要素のリストのテキストを順番に同class名のp要素の先頭に『、』を追加し出力せよ

<!--    HTML    -->
<h4>リヴァイ班メンバー</h4>
<ul class="q39">
    	<li>ペトラ</li>
    	<li>オルオ</li>
    	<li>エルド</li>
    	<li>グンタ</li>
</ul>
<p class="q39">女型巨人との戦闘により殉職</p>

回答はコチラ

$(function(){
	$("ul.q39 li").each(function(){
		var aaa = $(this).text();						 
		$("p.q39").prepend(aaa + "、");
	});
});

---

問40.id名「q40」のul要素のリストの先頭に"1"からのカウント番号と文字列「、」を追加せよ

<!--    HTML    -->
<ul id="q40">
    <li>ギニュー</li>
    <li>リクーム</li>
    <li>ジース</li>
    <li>バータ</li>
    <li>グルド</li>
</ul>

回答はコチラ

$(function(){
	$("ul#q40 li").prepend(function(index){
		return index + 1 + "、";
	});
});

---

まとめ

レベル２の全10問終了です。
このレベルの問題ができる様になった頃には、最初はただの英語の文字だったソースが読める様になりプログラムを作っている感覚が芽生えてきたり、
もうjQueryへの苦手意識なんてさっぱり消えてしまっているのではないでしょうか？

ファイル形式版で再挑戦

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

入門としては最終レベル３も鋭意作成中ですので、宜しくお願いします。

Tweet

Pocket