【jQuery】要素の追加・表示・非表示 | Webデザイナーを目指す人のブログ

要素を追加する

ある要素の前後や特定の位置に要素を追加したいときがあります。
そのときはbeforeやafterを使います。

before

ある要素の前に追加したいときはbeforeを使います。

$(“要素”).before(“追加したい内容”);

<ul>
	<li>リスト01</li>
	<li>リスト02</li>
	<li>リスト03</li>
</ul>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
	$("li:eq(2)").before("<li>リストを追加</li>");
</script>

するとリスト03の前に「リストを追加」が表示されるようになります。
スクリプト記載前

スクリプト記載後

after

ある要素の前に追加したいときはafterを使います。

$(“要素”).after(“追加したい内容”);

<ul>
	<li>リスト01</li>
	<li>リスト02</li>
	<li>リスト03</li>
</ul>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
	$("li:eq(2)").after("<li>リストを追加</li>");
</script>

するとリスト03の後に「リストを追加」が表示されるようになります。

prepend

ある要素の子要素の先頭に追加したいときはprependを使います。

$(“要素”).prepend(“追加したい内容”);

<ul>
	<li>リスト01</li>
	<li>リスト02</li>
	<li>リスト03</li>
</ul>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
	$("ul").prepend("<li>リストを追加</li>");
</script>

するとリストの最初に「リストを追加」が表示されるようになります。

append

ある要素の子要素の最後に追加したいときはappendを使います。

$(“要素”).append(“追加したい内容”);

<ul>
	<li>リスト01</li>
	<li>リスト02</li>
	<li>リスト03</li>
</ul>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
	$("ul").append("<li>リストを追加</li>");
</script>

するとリストの最後に「リストを追加」が表示されるようになります。

要素にエフェクトを追加する

よくクリックするとふわっと消えたりふわっと表示されたりする機能を見ますが、
fadeOutもしくはfadeInを使うことでその機能をつかうことができます。

fadeOut

ふわっと表示させたいときはfadeOutを使います。

$(“要素”).fadeOut(“パラメーター”);

<p>ふわっと非表示</p>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
	$("p").fadeOut();
</script>

パラメーター内に数字をいれることで非表示にするのにかかる時間を指定することができます。

fadeIn

ふわっと表示させたいときはfadeInを使います。

$(“要素”).fadeIn(“パラメーター”);

<p>ふわっと表示</p>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
	$("p").fadeIn(1000);
</script>

hide

ふわっと非表示にするのではなくスマートに非表示にしたい場合はhideを使います。

$(“要素”).hide(“パラメーター”);

<p>スマートに非表示</p>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
	$("p").hide("slow");
</script>

パラメーターにslowを指定することでゆっくりと非表示にすることができます。
また、fadeOut、fadeInと同様に数字を取ることも出来ます。

show

ふわっと非表示にするのではなくスマートに非表示にしたい場合はshowを使います。

$(“要素”).show(“パラメーター”);

<p>スマートに表示</p>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
	$("p").show(300);
</script>

toggle

現在表示されているものを非表示に、非表示になっているものを表示させたい場合はtoggleを使います。
押す度にコンテンツを表示させたり非表示にさせたりできるボタンなどに使います。

$(“要素”).toggle(“パラメーター”);

<p>見えている状態から始まると非表示になる</p>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
	$("p").toggle(300);
</script>

というところで今日は表示・非表示に関するまとめでした。
せば！