htmlの制御では指定した要素の内側のHTMLを変更する方法を解説しましたが、今回は追加です。

append

appendは指定した要素の最後にHTMLを追加する為の関数です。

$("指定した要素").append("追加するHTML")

サンプル

サンプルではボタンがクリックされた際にul要素の最後にappendという中身のli要素を追加しています。

$(function(){
	$("input[value=append]").click(function(){
		$("ul").append("<li>append</li>")
	})
});

prepend

prependは指定した要素の最初にHTMLを追加する為の関数です。

$("指定した要素").prepend("追加するHTML")

サンプル

after

afterは指定した要素の後ろにHTMLを追加する為の関数です。

$("指定した要素").after("追加するHTML")

サンプルではul要素の後ろにp要素を追加しています。

$("ul").after("<p>after</p>")

サンプル

before

beforeは指定した要素の前にHTMLを追加する為の関数です。

$("指定した要素").before("追加するHTML")

サンプルではul要素の前にp要素を追加しています。

$("ul").before("<p>before</p>")

サンプル

【PR】現場のプロから学ぶXHTML+CSS 好評発売中

まずはサンプルをご覧ください。

上のリストをクリックすれば、下のリストが変更されると言うサンプルです。
(いまいちなサンプルですみません。htmlだけで表現するには少し限界が。。。)

JavaScript

$(function(){
	$(".click li").click(function(){
		$(".target li").html($(this).html());
		return false;
	})
});

html

<ul class="click">
	<li><a href="img/pencil.jpg">鉛筆</a></li>
	<li><a href="img/paints.jpg">絵の具</a></li>
	<li><a href="img/ageha.jpg">アゲハ</a></li>
	<li><a href="img/cat.jpg">猫</a></li>
</ul>
<ul class="target">
	<li><a href="img/pencil.jpg">鉛筆</a></li>
</ul>

jQueryでhtmlの制御

htmlの取得

$(セレクタ).html()

指定した要素内のhtmlを取得する命令です。

$(this).html()

サンプルではクリックした要素内のhtmlを取得しています。

htmlの変更

$(セレクタ).html("変更後のhtml")

指定した要素内のhtmlを変更する命令です。

$(".target li").html($(this).html());

サンプルではクリックした要素内のhtmlを下のulリストと差し替えています。

textとの違い

textとほぼ同じような構文ですが、違いはtextがhtmlを取り扱うことが出来ない点です。

html要素をtextを利用して変更した場合

$(".target li").text($(this).html());

サンプル

html要素をtextを利用して取得した場合

$(".target li").html($(this).text());

サンプル

【PR】現場のプロから学ぶXHTML+CSS 好評発売中

まずはサンプルをご覧ください。

第11回 attrによる属性値の制御で作成したギャラリーにキャプションが切り替わる処理を追加したものです。

jQueryのコードです。

$(function(){
	$("a").click(function(){
		$("img").attr("src",$(this).attr("href"));
		$("strong").text($(this).text());
		return false;
	})
});

今回追加されたのは以下のコードです。

$("strong").text($(this).text());

ここでtextを利用してテキストを制御しています。

jQueryでテキストの制御

テキストの取得

$(セレクタ).text()

指定した要素内のテキストを取得する命令です。

$(this).text()

サンプルではクリックされた要素内のテキストを取得しています。

テキストの変更

$(セレクタ).text("変更後のテキスト")

指定した要素内のテキストを変更する命令です。

$("strong").text("変更後のテキスト")

サンプルではstrong要素内のテキストを変更しています。

今回のサンプルでは取得と変更を組み合わせて、strong要素内のテキストをクリックされた要素内のテキストに変更しています。

【PR】書籍 現場のプロから学ぶXHTML+CSS 好評発売中

CSSの操作ではCSSの変更まで取り上げましたが、cssメソッドを利用すれば変更のみならずCSSの取得も可能です。

まずはサンプルをご覧ください。

左上の■をクリックするとそのbodyのbackground-colorをそのテキストの文字に変更するサンプルになります。

$(function(){
	$("li").click(function(){
		$("body").css("background",$(this).css("color"));
	})
});

CSSの取得

CSSの取得は以下のように記述します。

$("CSSセレクタ").css("プロパティ")

CSSの操作では第2引数で値を設定しているのに対して、取得では第2引数に値を設定しません。

$(this).css("color")

サンプルではクリックされた要素のcolorプロパティを取得して

$("body").css("background",$(this).css("color"));

body要素の背景色として設定しています。

【PR】書籍 現場のプロから学ぶXHTML+CSS 好評発売中

まずはサンプルをご覧ください。

リンクをクリックすることにより画像が切り替わるギャラリーになります。

jQuerコード

$(function(){
	$("a").click(function(){
		$("img").attr("src",$(this).attr("href"));
		return false;
	})
});

XHTMLコード

<ul>
	<li><a href="img/pencil.jpg">鉛筆</a></li>
	<li><a href="img/paints.jpg">絵の具</a></li>
	<li><a href="img/ageha.jpg">アゲハ</a></li>
	<li><a href="img/cat.jpg">猫</a></li>
</ul>
<p><img src="img/pencil.jpg" alt="鉛筆" /></p>

それでは、attrメソッドの使い方を解説します。

属性値の取得

$("CSSセレクタ").attr("属性")

$()関数を利用して、CSSセレクタで要素を指定して、attr関数を利用して属性を指定すると属性値を取得することができます。

属性値の変更

$("CSSセレクタ").attr("属性","属性値")

$()関数を利用して、CSSセレクタで要素を指定して、attr関数で属性の後に属性値を指定することにより属性値を変更することができます。

サンプルではクリックの操作を利用してimg要素のsrc属性をa要素のhref属性と同じ値に書き換えています。

$("img").attr("src",$(this).attr("href"));

分けて書いたほうがわかりやすいかもしれませんね。

$(this).attr("href")

これがクリックされたa要素のhref属性を取得するattr関数です。

$("img").attr("src",属性値);

そして、これがimg要素のsrc属性を書き換えるattr関数です。

属性値の箇所にクリックされたa要素のhref属性を入れることによりサンプルのようなコードになります。

【PR】書籍 現場のプロから学ぶXHTML+CSS 好評発売中

hoverとeffectの利用方法は、前のエントリーを参考にしてください。

第6回 Effectの制御
第7回 Effectの制御2
第9回 hover

まずはサンプルをご覧ください。

リンクにマウスを乗せると説明がでてきます。

XHTMLはリンクをa要素、説明をstrong要素で記述したリストで構成しています。

<ul>
	<li><a href="http://blog.webcreativepark.net/">to-R</a><strong>JavaScriptやSEO対策、CSS、Movable Typeなどの情報を発信</strong></li>
	<li><a href="http://css.webcreativepark.net/">CSS TIPS</a><strong>CSSでレイアウトする為のテクニックを中心に紹介しています</strong></li>
	<li><a href="http://seo.webcreativepark.net/">SEO対策TIPS</a><strong>SEOのTIPSやツールを公開中</strong></li>
	<li><a href="http://javascript.webcreativepark.net/">JavaScript Library Archive</a><strong>JavaScriptライブラリをまとめたサイトになります</strong></li>
</ul>

こちらがjQueryの命令文です。

$(function(){
	$("a+strong").hide();
	$("a").hover(function(){
		$("+strong",this).show("fast");
	},function(){
		$("+strong",this).hide("fast");
	})
})

最初から解説していきます。

$("a+strong").hide();

これは最初に隣接セレクタを利用してstrong要素を非表示にしています。

hoverの最初のfunction内にマウスが乗った際の最初の命令を記述します。

$("+strong",this).show("fast");

マウスが乗った要素の次にある要素をエフェクトを付けて表示しています。

hover内のfunctionで利用するthisはclickのthisと同じように、命令が実行された要素を指定できます。

参考：第8回 click時の$関数の第2引数

同様にhoverの2個目のfunction内マウスが離れた際の命令を記述します。

$("+strong",this).hide("fast");

マウスが離れた要素の次にある要素をエフェクトを付けて非表示しています。

これでメニューのリンク先の内容の補足などを簡単に行うことができます。

【PR】書籍 現場のプロから学ぶXHTML+CSS 好評発売中

jQueryによるJavaScript入門、hoverについて解説したします。

hoverはa要素のhover擬似クラスでよく見かけると思いますが、そいつのことです。

$("a:hover").css("color","red");

のように指定できればいいのですが残念ながらjQueryのCSSセレクタはhover擬似クラスには対応していません。

サンプル(エラーが出ます)

しかしCSSセレクタではなくhoverメソッドという形で利用することが可能です。

hoverメソッドは以下のように設定します。

$(CSSセレクタ).hover(function(){
	CSSセレクタで指定した要素にマウスが乗った際の命令
},function(){
	CSSセレクタで指定した要素からマウスが離れた際の命令
})

サンプルをご覧ください。

$(function(){
	$("a").hover(function(){
		$(this).addClass("hover");
	},function(){
		$(this).removeClass("hover");
	})
})

hoverメソッド以外に$(this)という新しい記述が登場していますが、hoverメソッドのfunction(){～}の間では、$(this)で現在マウスが乗っている要素を指定できます。

つまり、このコードはa要素にマウスが乗った場合、その要素にhoverというclass名を追加して、離れた場合hoverというclass名を削除すると言う命令になります。

CSSではIE6のhover擬似クラスがa要素にしか対応していませんが、jQueryのhoverメソッドはすべての要素で利用できますので、hover擬似クラスのクロスブラウザ対応としても利用することが可能です。

【PR】書籍 現場のプロから学ぶXHTML+CSS 好評発売中

jQueryによるJavaScript入門、第8回はclick時の$関数の第2引数を解説します。

$関数について解説を始めると非常に長く複雑になるので本講座では小出しにしていきます。

click時の$関数の第2引数とはどういうものかというと以下のサンプルをご覧ください。

$(function(){
	$("dt").click(function(){
		$("+dd",this).slideToggle("normal");
	})
})

サンプル

$(”+dd”,this)以外は今まで解説した記述です。

dt要素がクリックされた際に$(”+dd”,this)の表示非表示が切り替わるという命令です。

click(function(){から})に包まれたthisがなにかというとクリックされた要素になります。

$(”CSSセレクタ”,this)はクリックされたdt要素からのCSSセレクタで命令を記述することが出来ます。

$(”+dd”,this)はCSSセレクタで記述すると

dt(クリックされた) +dd

という意味になります。

+ddはなじみがないかもしれませんが、直後にある要素という意味のCSSセレクタです。

つまりサンプルはクリックされたdtの直後にあるdd要素の表示を切り替えているわけです。

クリックされた位置からのCSSセレクタが利用できると非常に便利で

サンプル

このサンプルは最初のサンプルのdtとddをコピーして増やしたものですjQuerｙのコードは一行も変更していません。

今回は少し難しいかったかもしれませんが、いますぐ理解できなくても今後もthisが登場しますのでコードを見比べならがら覚えて言っていただけたらと思います。

【PR】書籍 現場のプロから学ぶXHTML+CSS 好評発売中

jQueryによるJavaScript入門、第7回は前回(Effectの制御)に引き続き、様々なEffectを紹介したいと思います。

スライドによる処理

showやhideの変わりにslideDownやslideUpというメソッドを利用すればスライディングしながらの表示・非表示の切り替えができます。

$(function(){
	$("dt").toggle(function(){
		$("dd").slideDown("normal");
	},
	function(){
		$("dd").slideUp("normal");
	})
})

サンプル

また、slideToggleというメソッドを利用すればパネルを開閉を一つの命令で実行できます。

$(function(){
	$("dt").click(function(){
		$("dd").slideToggle("normal");
	})
})

toggleメソッドで交互にslideDownとslideUpを実行するより、非常に簡単に記述することが可能です。

サンプル

フェードイン・フェードアウトによる処理

fadeInメソッド、fadeOutメソッドを利用すればフェードイン・フェードアウトによるパネルの開閉を制御できます。

$(function(){
	$("dt").toggle(function(){
		$("dd").fadeIn("normal");
	},
	function(){
		$("dd").fadeOut("normal");
	})
})

サンプル

フェードイン・フェードアウトにはfadeToという関数も用意されており、要素を特定の透過度まで変更するなどの処理も可能です。

$(function(){
	$("dt").toggle(function(){
		$("dd").fadeTo("normal",0.2);
	},
	function(){
		$("dd").fadeTo("normal",1);
	})
})

サンプル

fadeTo(スピード,透過率);というように指定でき、スピードは”slow”、”normal”、”fast”もしくはミリ秒で指定でき、透過率は0.2のように0（透明）から1（標準）までの少数で指定できます。

【PR】書籍 現場のプロから学ぶXHTML+CSS 好評発売中

jQueryによるJavaScript入門、第6回はライブラリを利用する、非常に大きなメリットとして上げられるEffectの制御について解説したいと思います。

Effectとは何か?百聞は一見にしかず、ということでサンプルをご覧ください。

Effectのサンプル

前回のtoggleクリックの制御のサンプルを少し改造したものになりますが、パネル部分の表示非表示が切り替わる際に、少し派手目の動きをしながら切り替わります。

これをJavaScriptで書こうとすれば、かなりの知識が必要になりますがjQueryですと1行書き換えるだけで簡単に実装することが可能です。

これまではパネルなどを表示する際は

$("dd").css("display","block");

を利用してCSSのdisplayプロパティを変更していましたが、Effectを利用する場合は、以下のように記述します。

$("dd").show("slow");

showメソッドを利用します。

showメソッドはdisplayがnoneの要素のdisplayをblockに変更すると言う命令ですが、その際にshow(速度)と言う形で、速度を指定できます。

サンプルではslowを指定していますが、他にも”normal”、”fast”なども指定できます。

他にもミリ秒でも指定できます。

ミリ秒のサンプル

サンプルでは5000ミリ秒、つまり5秒かけてパネルを表示する設定を行っております。

非表示する際は、

$("dd").hide("slow");

のようにhideメソッドを利用します。

次回は、様々なjQueryのEffectをご紹介したいと思います。

【PR】書籍 現場のプロから学ぶXHTML+CSS 好評発売中