デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.before( )コンテンツを前に追加

構文

コンテンツを前に追加返値:jQueryオブジェクト
jQo.before( コンテンツ [,コンテンツ2] )ver1.0〜
jQo.before( function )ver1.4〜
コンテンツには文字の他、html要素やDOM要素、jQueryオブジェクトが設定できます。

機能

jQueryオブジェクトで指定した要素の前に引数で指定したコンテンツを追加します。コンテンツには文字の他、html要素やDOM要素、jQueryオブジェクトが設定できます。また第2引数「コンテンツ2」を設定することで複数のコンテンツを追加することができます。

ver1.4からは引数にfunctionを指定することも可能で、条件によって追加する内容を変更するなど高度な処理にも対応できます。

解説

文字を追加

文字を追加したい場合は、beforeメソッドの引数に追加したい文字を設定します。サンプル(before/01.html)を開いてbody要素内にspan要素が1つあることを確認してください。

<span>world!</span>

jQueryは以下の様に記述され、buttonをクリックするとspan要素の前に文字(Hello)を追加します。

$("button").click(function(){
	$("span").before("Hello");
})

結果として、buttonをクリックするとworld!の前にhelloの文字が追加され「Hello world!」となります。
span要素にはcssの設定で青背景に白文字と設定されていますが、追加された「Hello」の文字はspan要素の外なので、span要素のcss設定にはなりません。span要素内に追加したい場合はprependメソッドを利用します。
→参考:prependのサンプル(prepend/01.html

html要素を追加

html要素を追加したい場合は、beforeメソッドの引数にhtml要素のタグを設定します。サンプル(before/02.html)を開いてbody内にoriginのid属性を持ったdiv要素が1つあることを確認してください。

<div id="origin"></div>

jQueryは以下の様に記述され、buttonをクリックするとid属性がoriginの要素の前にdiv要素を追加します。

$("button").click(function(){
	$("#origin").before("<div>");
})

結果として、buttonをクリックすると黄色い(originのid属性を持った)div要素の前にdiv要素が追加されます。
ver1.4以前はhtml要素のタグは閉じられている必要がありましたが、現在では閉じられていなくてもOKです。

htmlコンテンツを追加

htmlコンテンツ(タグ情報を含んだ文字)を追加することもできます。サンプル(before/03.html)を開いてbody内の構成がbefore/01.htmlと同じことを確認してください。jQueryは以下の様に記述され、buttonをクリックするとspan要素の前にb要素で囲んだ文字(world!)を追加します。

$("button").click(function(){
	$("span").before("<b>Hello </b>");
})

結果として、buttonをクリックするとworld!の前に太字のhelloが追加されます。

引数にjQueryオブジェクトを設定

サンプル(before/04.html)を開いてbody内の構成がbefore/02.htmlと同じ事を確認してください。jQueryもほとんど同じですが、以下の様にbeforeメソッドの引数にmyObjが設定されています。myObjは2行目で設定されhtml要素のdivが設定されています。

$("button").click(function(){
	var myObj = $("<div>");
	$("#origin").before(myObj);
})

結果としてサンプルbefore/02.htmlと全く同じ動作になります。無意味な構文に感じるかもしれませんが、この構文は処理の高速化につながります。jQueryでは要素を設定するのに負荷がかかるため、設定の回数をなるべく減らす必要があります。ですので、すでに要素を設定したjQueryオブジェクトを使いまわすことで負荷が減るのです。→参考:使い方「jQueryの高速化:jQueryはオブジェクトに記憶しておく」
今回はbeforeメソッドのために、わざわざjQueryオブジェクトを作成しているので高速化にはつながりません。

第2引数の利用

コンテンツをまとめて追加したい場合は、第2引数以降に設定します。サンプル(before/05.html)を開いてbody内の構成がbefore/02.htmlと同じ事を確認してください。jQueryもほとんど同じですが、以下の様にafterメソッドの第2引数と第3引数にhtml要素が設定されています。

$("button").click(function(){
	$("#origin").before("<div>", "<div class='pink'>", "<div class='green'>");
})

結果として、buttonをクリックすると黄色い(originのid属性を持った)div要素の前に青のdiv要素とピンクのdiv要素と緑のdiv要素がまとめて追加されます。

引数にFunctionを設定

サンプル(before/06.html)を開いてbody内にクラス属性originのdiv要素が2つあることを確認して下さい。

<div class="origin"></div>
<div class="origin"></div>

jQueryは以下の様に記述されbeforeメソッドの引数にfunctionの「beforeFunc」が設定されています。

$("button").click(function(){
	$(".origin").before(beforeFunc);
})

beforeメソッドの引数に設定するFunctionは以下の様な構文になっています。まず引数(インデックス番号)を受け取ります。これらの引数の値は{}内の処理で利用することができます。そして任意の処理の後で最終的に前に追加したい内容をreturnで返すようにします。

beforeに設定するFunctionの構文
function 任意の名前(インデックス番号){
 任意の処理(2つの引数を利用可能)
 return 追加したい内容;
}

サンプルbefore/06.htmlで利用したbeforeFuncは以下の様になっており、index番号が0だったら、pinkのクラス属性がついたdiv要素を追加し、それ以外はgreenのクラス属性が付いたdiv要素を追加するようにします。

function beforeFunc(index){
	if (index == 0) {
		return "<div class='pink'>";
	}else{
		return "<div class='green'>";
	}
}

結果として、buttonをクリックすると最初の黄色い(originのクラス属性を持つ)div要素の前にはピンクのdiv要素が追加され、次の黄色いdiv要素の前には緑のdiv要素が追加されます。

関連項目

コンテンツを後に追加したい場合はafterメソッドを利用します。
コンテンツを引数でなく主語として設定したい場合はinsertBeforeメソッドを利用します。
子要素内で前に追加したい場合はprependメソッドを利用します。

メモ

追加に関連するメソッド

コンテンツを追加するメソッドは数が多く、混乱しやすいので図にしてみました。

beforeメソッドには機能は同じでも構文が異なるinsertBeforeメソッドがあります。
英文の意味から機能の違いを覚えると良いでしょう。

v1.9での仕様変更

ドキュメント内に存在しない要素(つまり新規に作成した要素)に対しbeforeメソッドで要素を追加した場合、返されるjQueryオブジェクトには追加した要素を含まなくなりました。詳細はafterメソッドの「メモ:v1.9での仕様変更」を確認して下さい。