jqueryの基本的な使い方をまとめる #4 — 超メモ帳（web式）@復活

4日目:ここ

結構、仕事がハードで疲れている。長文もイラストも書きたいのだが、ひとまず何かしらの勉強はしておく。

今の生活に慣れてきたら趣味も頑張っていこう。

要素を追加するメソッド

リストタグなどで、間に要素を追加したり、先頭や末尾に追加するメソッド。

<ul>
	<li>0</li>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
	$(function() {
		
		// liを文字列に変える処理
		var li = $('<li>').text('just added');

		// それをliの2番目の後ろに追加
		$('ul > li:eq(2)').before(li);

		// 上と同じ処理の別の書き方
		li.insertBefore($('ul > li:eq(4)'));

		// 末尾に処理を追加
		$('ul').append(li);

		// 上と同じ処理の別の書き方
		li.appendTo();
	});

エフェクトを使う

お楽しみのエフェクト関係メソッド。boxを消したり、出したりします。

<div id="box" style="width: 100px; height: 100px; background: red;"></div>		
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
	$(function() {
		
		// boxを消す
		$("#box").hide();

		// ゆっくりけす
		$("#box").hide('slow');
		
		// ミリ秒指定も可能
		$("#box").hide(1200);

		// フェードアウトで消す。これもhide同様ゆっくり消したりミリ秒指定も可能
		$("#box").fadeOut(1200);

		// toggleは出ている時は消して、消えている時は現す
		$("#box").toggle(1200);
		$("#box").toggle(1200);
		$("#box").toggle(1200);
		$("#box").toggle(1200);
		
		// それぞれのメソッドはその後に行う処理を下記のように書ける
		$("#box").fadeOut(800, function() {
			alert("gone!");
		});
	});
</script>

今日はここまで。メソッド周りはこれでおしまい。次は処理のタイミングのコントロール。onClickやらの勉強をします。