今日は備忘録を兼ねて[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>]をで包み込む。(複数ある場合はすべてを1つに包み込む)
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