jqueryとDOMノードの操作メソッドと属性レコードについて

不言
リリース: 2018-07-02 15:34:20
オリジナル
1423 人が閲覧しました

以下はjqueryとDOMノードの操作方法と属性レコードについての記事です。編集者はかなり良いと思ったので、参考として共有したいと思います

jqueryのノード操作方法のリストをネットで見つけました。以下の通り:

メソッド

ソースパッケージングセット/文字列

ターゲットパッケージング集合体

機能の説明

A.app終わり(B)

B

A

ターゲットパッケージングセットが 1 つの要素のみに一致する場合、ソース (相同なパッケージングセットによって一致するすべての要素も含む) は、 target location ;宛先ラッパー セットに複数の要素が含まれている場合、ソースは元の場所に残りますが、同一のコピーが宛先の場所にコピーされます。

したがって、ターゲットが 1 つの要素のみに一致する場合、上記の方法を使用した後、ソースは削除されます。

B.appendTo(A)

A.prepend(B)

B.prependTo(A)

A .before(B)

b.insertbefore(a)

a.after(b)

b.insertafter(a)

例:上記の表、A。 append(B) は、A に一致するすべての要素の既存のコンテンツに B を追加することを意味するため、B がソース、A がターゲット ラッパー セットになります。

要約は次のとおりです:上記のメソッドを使用した後、2 つのノードは同じレベルの兄弟ノードになります

以下は DOM 内のノードを操作するためのメソッドの要約です:

(1)appendChild メソッド。ノードを childNodes リストの最後に追加します

// newNode を someNode の childNodes リストの最後に追加します

var returnsNode = someNode.appendChild(newNode);

// someNode の最初の子ノードを最後の子ノードに変更します

var returnsNode = someNode .appendChild(someNode.firstChild);

(2)insertBeforeメソッドを使用すると、childNodesリストの特定の位置にノードを配置できます

//挿入後の最後の子ノードになります

returnedNode = someNode。 insertBefore(newNode , null);//appendChildと同じ効果

//挿入後の最初の子ノードになる

returnedNode = someNode.insertBefor(newNode, someNode.firstChild);

(3) replaceChildメソッドを使用する子ノードを置換するには、挿入する子ノードと置換する子ノードの 2 つのパラメータを受け入れます。置換される子ノードはドキュメント ツリーから削除され、その位置は挿入される子ノードによって占められます

//最初の子ノードを置換します

returnedNode = someNode.replaceChild(newNode, someNode.firstChild) ;

(4) 子ノードを削除するには、removeChild メソッドを使用します

//最初の子ノードを削除します

var fourFirstChild = someNode.removeChild(someNode.firstChild);

一言でまとめると、上記のメソッドは次のようになります。すべての親ノード 子ノードの操作

下の図は、父ノード、息子ノード、兄弟ノード間の検索関係を示しています

以上がこの記事の全内容であり、皆様の学習に役立つことを願っています。内容については、PHP 中国語 Web サイトにご注意ください。

関連する推奨事項:

jQuery を使用して WordPress に @ ID フローティング表示を実装し、コメントのコンテンツを表示する

Ajax ブートストラップにより Web ページを美しくし、ページの読み込み、削除、詳細表示のコードを実装する

以上がjqueryとDOMノードの操作メソッドと属性レコードについての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!