とほほのjQuery入門

• トップ
• jQuery
• Manipulation

• Manipulation(DOM Insertion, Inside)
  • obj.prepend()
  • obj.append()
  • obj.prependTo()
  • obj.appendTo()
• Manipulation(DOM Insertion, Outside)
  • obj.before()
  • obj.after()
  • obj.insertBefore()
  • obj.insertAfter()
• Manipulation(DOM Insertion, Around)
  • obj.wrap()
  • obj.wrapAll()
  • obj.wrapInner()
• Manipulation(DOM Replacement)
  • obj.replaceAll()
  • obj.replaceWith()
• Manipulation(DOM Removal)
  • obj.remove()
  • obj.detach()
  • obj.empty()
  • obj.unwrap()
• Manipulation(Copying)
  • obj.clone()
• Manipulation(Other)
  • $.htmlPrefilter

Manipulation(DOM Insertion, Inside)

obj.prepend(content[, content]) (1.0)
      obj.prepend(function(index, html)) (1.4)

obj の先頭に content を挿入します。

$("p").prepend("<em>insert</em>");    // <p><em>insert</em>...</p>

obj.append(content[, content]) (1.0)
      obj.append(function(index, html)) (1.4)

obj の末尾に content を挿入します。

$("p").append("<em>insert</em>");    // <p>...<em>insert</em></p>

obj.prependTo(target) (1.0)

obj を target の先頭に挿入します。

$("<em>insert</em>").prependTo("p");    // <p><em>insert</em>...</p>

obj.appendTo(target) (1.0)

obj を target の末尾に挿入します。

$("<em>insert</em>").appendTo("p");    // <p>...<em>insert</em></p>

Manipulation(DOM Insertion, Outside)

obj.before(content[, content]) (1.0)
      obj.before(function(index)) (1.4)
      obj.before(function(index, html)) (1.10)

obj の直前に content を挿入します。

$("p").before("<em>insert</em>");    // <em>insert</em><p>...</p>

function(...) の形式は、obj の直前に関数の戻り値を挿入します。index には要素のインデックス、html には要素の内部HTMLが渡されます。

$("p").before(function() {           // <em>insert</em><p>...</p>
    return "<em>insert</em>";
});

obj.after(content[, content]) (1.0)
      obj.after(function(index)) (1.4)
      obj.after(function(index, html)) (1.10)

obj の直後に content や function(...) の戻り値を挿入します。

$("p").after("<em>insert</em>");    // <p>...</p><em>insert</em>

obj.insertBefore(target) (1.0)

obj を target の直前に挿入します。

$("<em>insert</em>").insertBefore("p");    // <em>insert</em><p>...</p>

obj.insertAfter(target) (1.0)

obj を target の直後に挿入します。

$("<em>insert</em>").insertAfter("p");    // <p>...</p><em>insert</em>

Manipulation(DOM Insertion, Around)

obj.wrap(wrappingElement) (1.0)
      obj.wrap(function(index)) (1.4)

obj を wrappingElement 要素で囲みます。下記の例では、p要素を <div class='box'>～</div> で囲みます。

$("p").wrap("<div class='box' />");

  <p>...</p>
  <p>...</p>

<div class='box'>
  <p>...</p>
</div>
<div class='box'>
  <p>...</p>
</div>

function(index) を指定した場合は、関数の戻り値を wrappingElement とみなします。

$("div.url").wrap(function() {
    return "<a href='" + $(this).text() + "' />";
});

obj.wrapAll(wrappingElement) (1.2)
      obj.wrapAll(function) (1.4)

obj の要素集合をまとめて wrappingElement で囲みます。

$("p").wrapAll("<div class='box' />");

  <p>...</p>
  <p>...</p>

<div class='box'>
  <p>...</p>
  <p>...</p>
</div>

obj.wrapInner(wrappingElement) (1.2)
      obj.wrapInner(function(index)) (1.4)

obj のコンテンツを wrappingElement で囲みます。

$("p").wrapInner("<em />");

<p>...</p>

<p><em>...</em></p>

Manipulation(DOM Replacement)

obj.replaceAll(target) (1.2)

target を obj で置き換えます。

$("<div>new Content</div>").replaceAll("div#d1");

obj.replaceWith(newContent) (1.2)
      obj.replaceWith(function) (1.4)

obj を newContent で置き換えます。

$("div#d1").replaceWith("<div>new Content</div>");

関数を用いることも可能です。

$("h1").replaceWith(function() {
    return "<h2>" + $(this).html() + "</h2>";
});

Manipulation(DOM Removal)

obj.remove([selector]) (1.0)

obj要素の中から selector にマッチする要素を削除します。

$("div.current").remove();

obj.detach([selector]) (1.4)

obj要素の中から selector にマッチする要素を削除します。remove() が完全に削除するのに対して、detach() は jQuery要素として残り、再度挿入することが可能です。

var obj = $("div.current").detach();

obj.empty() (1.0)

obj の子孫要素をすべて削除します。

$("div.curent").empty();

obj.unwrap() (1.4)
      obj.unwrap([selector]) (3.0)

obj の親要素を削除します。<div><p>...</p></div> とある時下記を実行すると、<p>...</p> のみになります。selector を指定した場合は、親要素がセレクタにマッチする場合のみ削除します。

$("p").unwrap();

<div>
  <p>...</p>
</div>

  <p>...</p>

Manipulation(Copying)

obj.clone([withDataAndEvents]) (1.0)
      obj.clone([withDataAndEvents][, deepWithDataAndEvents]) (1.5)

obj を複製します。withDataAndEvents に true を指定すると、データやイベントハンドラも一緒にコピーします。規定値は false です。deepWithDataAndEvents を true にすると、子孫要素のデータやイベントもコピーします。規定値は withDataAndEvents と同じ値になります。

$("#d1").clone().insertAfter("#d2");

Manipulation(Other)

$.htmlPrefilter (1.12)

html() 等で設定する HTML に対するフィルタ関数を設定します。

$.htmlPrefilter = function(html) {
  return html.toLowerCase();
}
$("#d1").html('<p>ABC</p>');         // <p>abc</b> が設定される

---