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

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

.add( )指定した要素を追加

構文

引数で指定した要素を追加返値:jQueryオブジェクト
jQo.add( セレクタ )ver1.0〜
jQo.add( DOM )ver1.0〜
jQo.add( html )ver1.0〜
jQo.add( jQo )ver1.3.2〜
jQo.add( セレクタ, コンテキスト )ver1.4〜

機能

jQueryオブジェクトで指定した要素に引数で指定した要素を追加します。引数にはDOM要素やjQueryオブジェクト、そしてhtmlなどを設定できます。ver1.4からは第2引数「コンテキスト」を設定して追加する要素の範囲を限定する事ができます。ver1.9では一部の機能が変更されました。詳細はページ最下部「メモ」の「v1.9での仕様変更」を確認して下さい。

解説

引数にセレクタを設定

サンプル(add/01.html)を開いてdiv要素が3つ、span要素が1つあることを確認して下さい。

<div>DIV</div>
<span>SPAN</span>
<div>DIV</div>
<span>SPAN</span>
<div>DIV</div>

jQueryは以下の様に記述され、buttonをクリックすると、まずdiv要素が選択されcssメソッドにより背景色を薄緑にされます。そのままメソッドチェーンによってaddメソッドが実行され、span要素が追加されます。そしてそれらの要素(div要素とspan要素)にcssメソッドにより赤枠を表示します。

$("button").click(function(){
	$("div").css("background-color","#cfc").add("span").css("border","3px solid #f00");
})

結果として、buttonをクリックするとdiv要素は背景が薄緑になり、div要素とspan要素に赤枠が表示されます。
メソッドチェーンについては使い方の「stopメソッド(1):メソッドチェーン」を参考にしてください。処理の高速化が期待できます。

引数にDOM要素を設定

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

var myElem = document.getElementsByTagName("span")[0];			
$("button").click(function(){
	$("div").css("background-color","#cfc").add(myElem).css("border","3px solid #f00");
})

myElemには最初のspanしか設定されていないため。buttonをクリックするとadd/01.htmlと異なり、2番目のspan要素には赤枠が表示されません。

引数にhtmlを設定

サンプル(add/03.html)を開いてbody内にbuttonしかないことを確認してください。jQueryは以下の様に記述され、最初に設定されたdiv要素(html要素)にaddメソッドでp要素(テキストノード付き)を追加しています。そして、それらをappendToメソッドによってbody内に追加します。

$("button").click(function(){
	$("<div>").add("<p>p要素</p>").appendTo("body");
})

結果としてbuttonをクリックすると、button内にdiv要素とp要素(2つの要素ともcss設定により青い正方形として表示されます)が追加されます。

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

サンプル(add/04.html)を開いてbody内の構成がadd/01.htmlと同じ事を確認してください。jQueryもほとんど同じですが、以下の様にaddメソッドの引数にmyObjが設定されています。myObjは1行目で設定されspan要素にマッチするjQueryオブジェクトが代入されています。

myObj = $("span");
$("button").click(function(){
	$("div").css("background-color","#cfc").add(myObj).css("border","3px solid #f00");
})

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

第2引数にコンテキストを設定

addメソッドの第2引数にコンテキストを設定することで、追加する要素の範囲を限定する事ができます。サンプル(add/05.html)を開いてbody内の構成がadd/01.htmlとすこし異なり、下のspan要素がp要素に囲まれていることを同じ事を確認してください。

<div>DIV</div>
<span>SPAN</span>
<div>DIV</div>
<p><span>SPAN</span></p>
<div>DIV</div>

jQueryはサンプルadd/01.htmlとほとんど同じですが、以下の様にaddメソッドの第2引数にp要素がが設定されています。これによって追加されるspan要素はp要素内のものに限定されます。

$("button").click(function(){
	$("div").css("background-color","#cfc").add("span","p").css("border","3px solid #f00");
})

結果としてaddメソッドでp要素に囲まれた下のspan要素しか追加されないため、buttonをクリックしても上のspan要素には赤枠が表示されません。

関連項目

要素を追加するのではなく、除外したい場合はnotメソッドを利用します。

メモ

選択の回数を減らし高速化に寄与

サンプルadd/01.htmlはaddメソッドを利用しなくても、サンプル(add/test01.html)のように2行に分けて書くことができます。

$("button").click(function(){
	$("div").css("background-color","#cfc");
	$("span,div").css("border","3px solid #f00");
})

これは分かりやすいかもしれませんが、div要素の選択が2回(2行目と3行目で)行われるため負荷が多くなります。addメソッドを利用した方は、すでに選択されたdiv要素にspan要素を追加しているのでdiv要素の選択は1回だけとなり無駄がありません。

addメソッドの注意点

addメソッドは実行しただけではjQueryオブジェクトに要素を追加できません。サンプル(add/test02.html)のjQueryを確認してください。

$("button").click(function(){
	var myObj = $("div");
	myObj.add("span");
	myObj.css("border","3px solid #f00");
})

上記3行目でaddメソッドでmyObj(div要素を選択したjQueryオブジェクト)にspan要素を追加し、4行目で赤枠を表示しようとしています。しかしbuttonをクリックしてもsapn要素に赤枠が表示されず、addメソッドによってmyObjの内容が変わっていないことが確認できます。

これはjQueryに限らず一般的な注意点(返値を返すfunctionを、そのまま利用する等)なのですが、本家サイトに記載されていたのでメモしておきます。もしmyObjに追加したいのであれば返値をmyObjに代入します。
→サンプル(add/test02b.html

$("button").click(function(){
	var myObj = $("div");
	myObj = myObj.add("span");
	myObj.css("border","3px solid #f00");
})

そしてmyObjの内容は変えたくないけれど、spanに赤枠を付けたい場合はサンプル(add/test02c.html)のように書きます。

$("button").click(function(){
	var myObj = $("div");
	myObj.add("span").css("border","3px solid #f00");
	myObj.css("background-color","#cfc");
})

4行目で派背景色を薄緑にしていますが、myObjはaddメソッドで変化していないため、div要素だけ背景色が変わります。

第2引数にObjectオブジェクト

本家サイトで、addメソッドの引数にhtmlを設定するサンプルが分かりにくかったので、いろいろ調査しました。その中で興味深い構文があったのでメモしておきます。サンプル(add/test03.html)では第2引数にObjectオブジェクトで追加する第1引数の属性を設定しています。本家サイトには記載がないのですが、問題なく機能しています。

$("button").click(function(){
	$("<div>",{text:"div要素"}).add("<p>",{text:"p要素"}).appendTo("body");
})

これは多分jQuery(html)の第2引数に属性を設定する構文と同じ仕組みだと思います。上記のサンプルではjQuery(html)の構文を利用して、div要素に対しても属性を設定しています。

HTML上の並びに従う

注意すべきなのはHTML上に配置済みの要素をaddメソッドで追加した場合は追加した順ではなくHTML上に配置されていた順番になる点です。 サンプル(add/test04.html)を開きbody内のdiv要素のidを確認してください。上から順にtest01,test02,test03となっています。

<div id="test01"></div>
<div id="test02"></div>
<div id="test03"></div>

続いてjQueryを確認してください。以下の様にaddメソッドを利用してtest03を先頭にtest02,test01と表示している順番とは逆の順番に要素を追加しています。要素は変数jQoに代入しました。

//---addメソッドで要素を追加
var jQo = $("#test03").add("#test02").add("#test01");

上記のスクリプトだけでは格納されたjQueryオブジェクトの順番が確認できないので、以下のスクリプトを追加し、buttonをクリックしたらeachメソッドを利用して変数jQoに格納された順番で要素内にテキストを設定するようにしました。

$("button").click(function(){
 jQo.each(eachFunc);
})
function eachFunc(index,elem){
 $(elem).text(index+"番目: id = "+elem.id);
}

実際にbuttonをクリックするとaddメソッドで追加した順番(03→02→01)ではなく、HTML上に配置された順番(01→02→03)になることを確認してください。

配置されていない要素はaddした順に

HTML上に配置されていない要素を追加する場合は、addメソッドで追加した順になります。サンプル(add/test05.html)を開きbody内にdiv要素が無いことを確認してください。しかしサンプルを開くとdiv要素が配置されています。これはjQueryで以下の様に記述されているためです。

var jQo = $("<div id='test03'>").add("<div id='test02'>").add("<div id='test01'>");
jQo.appendTo("body");

1行目でaddメソッドを利用して3つのdiv要素(idの順番はtest03,test02,test01)を追加し、2行目でappendToメソッドを利用してbody内に表示しています。

cssの設定によってid毎に異なる背景色が設定されていますが、色の並びをサンプル(add/test04.html)と比較して逆になっていることを確認してください(test04.htmlは薄い青が一番上、test05は薄い青が一番下)。

セレクタエンジンの仕様

HTML上に配置されているか否かで順番が変わるのはjQueryに搭載されているセレクタエンジン(Sizzle)の仕様です。この仕様はv1.9で変更されているため本家サイトの以下の項目で確認することができます
→参考:Changes of Note in jQuery 1.9 : Ordering of disconnected nodes within a jQuery set

As of 1.9, connected nodes are always placed at the beginning of the set in document order, and disconnected nodes are placed behind them.

「connected nodes」はドキュメントに接続されたノードなので「配置された要素」という理解でよいと思います。そして「disconnected nodes」は「(存在しているけど)配置されていない要素」になります。なので英文は「配置された要素はドキュメント順にソートされ、配置されていない要素はそれらの後になる」という感じです。

ややこしいですが、配置された要素と配置されていない要素を持つサンプルで上記の確認をしてみましょう。サンプル(add/test06.html)を開きbody内にdiv要素が3つ配置されていることを確認してください。

<div id="test01"></div>
<div id="test02"></div>
<div id="test03"></div>

しかし実際にはdiv要素は2つしか表示されません。これはjQueryで以下の様に記述されているためです。removeメソッドを利用してidがtest02の要素をHTML上から外し(disconnected)て変数removeObjに保存しています。

var removeObj = $("#test02").remove();

続いてbuttonをクリックした時の処理を確認します。以下の2行目で削除した要素removeObjを2番目に追加しています。このサンプルではtest02の要素をHTML上から外しているためtest04.htmlのようにテキストを確認できないので6行目のように単純にアラートでidを表示するだけにしました。

$("button").click(function(){
 var jQo = $("#test03").add(removeObj).add("#test01");
 jQo.each(eachFunc);
})
function eachFunc(index,elem){
 alert(elem.id)
}

実際にbuttonをクリックして表示されるidを確認してください。test01,test03,test02となったと思います。まずtest01とtest02は配置されている要素なので配置された順番に表示され、test02は削除されたため配置されている要素の後にまわされたわけです。これで英文のとおりであることが確認できたと思います。