【jQuery】Manipulation API リファレンス

今日は備忘録を兼ねて［jQuery Manipulation API］のリファレンス一覧を紹介します。

［jQuery Manipulation API］とは DOM を操作する関数のこと。

［DOM］とは「Document Object Model」の略で、html の各要素、例えば［<p>要素］や<img>要素］、［<div>要素］などにアクセスして、要素の中の値を操作することができる仕組みのことです。

難しいかもしれませんが、簡単に言うと、［jQuery Manipulation API］を使うことで、html の各要素を編集して、コンテンツを追加したり、削除したり、コピーできるようになります。

以下［jQuery Manipulation API］一覧。

内部へ挿入

append(content)

$("#sample").append("<div>contents</div>");
［#sample］要素内の最後に、［<div>contents</div>］を追加する。

appendTo(content)

$("<div>contents</div>").appendTo("#sample");
［<div>contents</div>］を、［#sample］要素の最後に追加する。

prepend(content)

$("sample").prepend("<div>contents</div>");
［#sample］要素内の最初に、［<div>contents</div>］を追加する。

prependTo(content)

$("<div>contents</div>").prependTo("#sample");
［<div>contents</div>］を、［#sample］要素の最初に追加する。

外部へ挿入

after(content)

$("#sample").after("<div>contents</div>");
［#sample］要素の後ろに、［<div>contents</div>］を追加する。

before(content)

$("#sample").before("<div>contents</div>");
［#sample］要素の前に、［<div>contents</div>］を追加する。

insertAfter(content)

$("<div>contents</div>").insertAfter("#sample")
［<div>contents</div>］を、［#sample］要素の後に追加する。

insertBefore(content)

$("<div>contents</div>").insertBefore("#sample");
［<div>contents</div>］を、［#sample］要素の前に追加する。

周囲への挿入

wrap(html)、wrap(elem)

$("#sample").wrap("<div>;/div>");
［#sample］要素を、［<div>〜;/div>］で囲む。

wrapAll(html)、wrapAll(elem)

$(".sample").wrapAll("<div>;/div>");
［.sample］が指定された要素すべてを［<div>〜;/div>］をで包み込む。（複数ある場合はすべてを１つに包み込む）

wrapInner(html)、wrapInner(elem)

$(".sample").wrapInner("<div>;/div>");
［.sample］が指定されたタグの子要素を、［<div>〜;/div>］で包み込む。

置換

replaceWith(content)

$(".sample").replaceWith("<div>contents</div>");
［.sample］を［<div>contents</div>］に置き換える。

replaceAll(selector)

$(".sample").replaceWith("<div>contents</div>");
指定条件（［.sample］）に合致する要素をすべて［<div>contents</div>］に置き換える。

削除

empty()

$(".sample").emoty();
［.sample］要素から全ての子要素を削除する。

remove([expr])

$(".sample").remove();
DOMか［.sample］に合致する要素をすべて削除する。

コピー

clone()

$("#sample").clone().appendTo("div.box");
「$("#sample").clone()」で複製。さらに、「appendTo("div.box")」で、複製したものを［div.box］の最後に追加する。

clone(true)

$("#sample").clone(true);
［#sample］要素を、その要素が持つイベントも含めてコピー。さらにそのクローンを選択状態にする。

以上。
その他、詳細は jQuery 本家サイトを参照ください。

jQuery Manipulation