Juqery ラーニング 5 ドキュメント処理のラップ、置換、削除、Copy_jquery

Wrap(html)
一致するすべての要素を他の要素の構造化マークアップでラップします。
この種のラッピングは、元の文書の意味上の品質を損なうことなく、文書に追加の構造化マークアップを挿入する場合に最も役立ちます。
この関数の原理は、提供された最初の要素 (提供された HTML マークアップ コードによって動的に生成される) をチェックし、コード構造内の最上位の祖先要素を見つけることです。この祖先要素はラッパー要素です。

HTML マークアップ コード内の要素にテキストが含まれている場合、この関数は使用できません。したがって、テキストを追加したい場合は、パッケージが完成した後に追加する必要があります。

------------------------------------------ ---------- ------------------------------------

すべてをラップ
このラッピング プロセスは、ドキュメントの元の意味論的性質を損なうことなく、ドキュメントに追加の構造を挿入する場合に最も役立ちます。
これは、提供された最初の要素を処理することによって機能します。は、提供された HTML からオンザフライで生成され、その構造内で最も深い祖先要素を見つけます。この要素が他のすべてを包み込みます。

これは、テキストを含む要素では機能しません。
戻り値
jQuery

パラメータ
html (文字列): 要素を動的に生成し、ターゲット要素をラップするために使用される HTML タグ コード文字列。

例
新しく作成した div ですべての段落をラップします

HTML コード:

テスト段落。

jQuery コード:

$("p").wrap("

");
結果:

テスト段落。

------------------------------------------------ -------------------------------------------------- -- --------------------------------------------------
Wrap( elem)
一致するすべての要素を他の要素の構造化マークアップでラップします。

------------------------------------------ ---------- ------------------------------------

すべてをラップ
戻り値
jQuery

パラメータ
elem (要素): ターゲット要素をラップするために使用される DOM 要素

例
IDは「content」です。divは各段落をラップします

HTMLコード：

テスト段落。

jQueryコード：

$("p").wrap(document.getElementById('content'));
結果:

テスト段落。

------------------------------------------ ------ -------------------------------------------- ------ -------------------------------------------- ------
wrapAll(html)
一致するすべての要素を 1 つの要素でラップします。
これは、一致する各要素を 1 回ずつラップする '.wrap()' とは異なります。
この種のラッピングは、元の文書の意味上の品質を損なうことなく、文書に追加の構造化マークアップを挿入する場合に最も役立ちます。

この関数の原理は、指定された最初の要素をチェックし、コード構造内の最上位の祖先要素を見つけることです。この祖先要素はラッピング要素です。

------------------------------------------ ---------- ------------------------------------

すべてをラップ
これは、一致したセット内の各要素が要素でラップされる '.wrap()' とは異なります。
このラッピング プロセスは、挿入に最も役立ちます。

これは、提供された最初の要素 (提供された HTML からオンザフライで生成される) を調べて、最も深い祖先を見つけることによって機能します。
Return value
jQuery

Parameters
html (String): 要素を動的に生成するために使用される TML マークアップ コード文字列。ターゲット要素をラップします

例
生成された div ですべての段落をラップします

HTML コード:

Hello

cruel

ワールド

jQuery コード:

$("p").wrapAll("

");
結果:

こんにちは

残酷な

世界

----------------------------------------------- --- --------------------------------------------------- ----------------------------------------------------
wrapAll(elem)
一致するすべての要素を 1 つの要素でラップします
これは、一致する各要素を 1 回ずつラップする '.wrap()' とは異なります。

------------------------------------------ ---------- ------------------------------------

すべてをラップ
これは、一致したセット内の各要素が要素でラップされる '.wrap()' とは異なります。
戻り値
jQuery

パラメータ
elem (要素): ターゲット要素をラップするために使用される DOM 要素

例
生成された div ですべての段落をラップします

HTML コード:

こんにちは

残酷

世界

jQuery コード:

$("p").wrapAll(document.createElement(" div") );
結果:

こんにちは

残酷

世界

----------------------------------------------- --- --------------------------------------------------- ----------------------------------------------------
wrapInner(html)
一致する各要素のサブコンテンツ (テキスト ノードを含む) を HTML 構造でラップします
この関数の原理は、提供された最初の要素をチェックすることです (HTML マークアップ コードによって提供されます)。動的に生成されます)、コード構造内の最上位の祖先要素を見つけます。この祖先要素はパッケージ化要素です。

------------------------------------------ ---------- ------------------------------------

ラップ
このラッピング プロセスは、ドキュメントの元のセマンティックな性質を損なうことなく、ドキュメントに追加の構造を挿入する場合に最も役立ちます。提供された最初の要素 (提供された HTML からオンザフライで生成されます) を検索し、その構造内で最も深い祖先要素を見つけます。この要素が他のすべてをラップします。
Return value
jQuery

パラメータ
html (文字列): 要素を動的に生成し、ターゲット要素をラップするために使用される HTML タグ コード文字列

例
すべての段落の各サブコンテンツを太字にする

HTML コード:

こんにちは

残酷

世界

jQuery コード:

$("p").wrapInner ("");
結果:

こんにちは

残酷

世界

-------------------------------------- ------ -------------------------------------------- ------ -------------------------------------------- ------ ------
wrapInner(elem)
一致する各要素のサブコンテンツ (テキスト ノードを含む) を DOM 要素でラップします

---- ----- -------------------------------------- ----- ----------

一致した各要素 (テキスト ノードを含む) の内部の子のコンテンツを DOM 要素でラップします。 .
戻り値
jQuery

パラメータ
elem (要素): ターゲット要素をラップするために使用される DOM 要素

例
全体の中で各サブコンテンツを太字にします段落

HTML コード:

こんにちは

残酷

世界

jQuery コード:

$ ("p ").wrapInner(document.createElement("b"));
結果:

こんにちは

残酷です🎜>

世界

---------------------------- --- --------------------------------------------------- --- --------------------------------------------------- --- -------------
replaceWith(content)
一致するすべての要素を、指定された HTML 要素または DOM 要素に置き換えます。

------------------------------------------ ------ ------------------------------------

すべてを置き換えます指定された HTML 要素または DOM 要素と一致する要素
戻り値
jQuery

パラメータ
コンテンツ (文字列、要素、jQuery): 一致する要素を置換するために使用されるコンテンツ

例
すべての段落記号を太字に置き換えます。

HTML コード:


こんにちは

残酷

世界

jQuery コード:

$( "p").replaceWith("
段落。"); 結果:


段落。 . ------------------------------------------ -------------------------------------------------- -------------------------------------------------- -- -- replaceAll(selector) selector に一致するすべての要素を一致する要素に置き換えます。 ------------------------------------------ ------ ------------------------------------

を置き換えます。
戻り値
jQuery

パラメータ
selector (selector): 置換される要素を検索するために使用されます

例
すべて入力 段落タグを太字のタグに置き換えます

HTML コード:


こんにちは

残酷

世界

jQuery コード:

$("

Paragraph.

").replaceAll("p");
結果:

Paragraph. 段落 .

段落
----------------------------- --- --------------------------------------------------- --- --------------------------------------------------- --- ---------- empty() 一致する要素セット内のすべての子ノードを削除します。 ------------------------------------------ ---------- ------------------------------------
すべて削除
戻り値
jQuery

例
すべての段落サブ要素 (テキスト ノードを含む) を削除します

HTML コード:


こんにちは、
人

と人

jQuery コード: $("p").empty(); 結果:

-------------------------------------------------- -------------------------------------------------- ---------------------------------------------
remove([expr])
Remove all matching elements from the DOM.
This method does not remove the matching elements from the jQuery object, so you can reuse these matching elements in the future.

-------------------------------------------------- ------------------------------------

Removes all matched elements from the DOM.
This does NOT remove them from the jQuery object, allowing you to use the matched elements further. Can be filtered with an optional expression.
Return value
jQuery

Parameters
expr (String): (Optional) jQuery expression for filtering elements

Example
Remove all paragraphs from DOM

HTML code:

Hello

how are

you?

jQuery code:

$("p").remove();
Result:

how are

--------------------------------------------- ---------------------------------------------

Put hello from the DOM Delete paragraphs of class

HTML code:

Hello

how are

you?

jQuery code:

$( "p").remove(".hello");
Result:

how are

you?

------------- -------------------------------------------------- -------------------------------------------------- --------------------------------
clone()
Clone matching DOM elements and select these clones copy of.
This function is useful when you want to add a copy of an element in the DOM document to another location.

-------------------------------------------------- ------------------------------------

Clone matched DOM Elements and select the clones .
This is useful for moving copies of the elements to another location in the DOM.
Return value
jQuery

Example
Clone all b elements (and select these cloned copies ) and prepend them to all paragraphs.

HTML code:

Hello

, how are you?

jQuery code:

$("b" ).clone().prependTo("p");
Result:

Hello

Hello, how are you?

------------------------------------------------ -------------------------------------------------- -----------------------------------------------
clone(true)
element and all its event handlers and select these cloned copies
This function is very useful when you want to add a copy of an element to another location in the DOM document.

-------------------------------------------------- ------------------------------------

Clone matched DOM Elements, and all their event handlers, and select the clones.
This is useful for moving copies of the elements, and their events, to another location in the DOM.
Return value
jQuery

Parameters
true (Boolean): Set to true to copy all event handlers of the element

Example
Create a button that can copy itself, and its copies will have the same functionality.

HTML code:

Clone Me!
jQuery code:

$("button").click(function(){
$(this).clone(true).insertAfter(this);
});