ホームページ > ウェブフロントエンド > jsチュートリアル > DOMを動作させるネイティブJSとjQueryの比較まとめ

DOMを動作させるネイティブJSとjQueryの比較まとめ

迷茫
リリース: 2017-01-24 15:59:40
オリジナル
1605 人が閲覧しました

DOM を操作するネイティブ JS と jQuery の比較をまとめた記事です。必要な方はぜひ参考にしてください。

1. 要素ノードを作成する

1.1 ネイティブJSで要素ノードを作成する

1

document.createElement("p");

ログイン後にコピー

1.2 jQueryで要素ノードを作成する

1

$(&#39;<p></p>&#39;);`

ログイン後にコピー

2. テキストノードを作成して追加する

2.1 ネイティブ JS はテキスト ノードを作成します

1

document.createTextNode("Text Content");

ログイン後にコピー

通常、テキスト ノードの作成は、次のような要素ノードの作成と組み合わせて使用​​されます。

3. ノードのコピー

3.1 ネイティブ JS コピー ノード:

1

2

3

var textEl = document.createTextNode("Hello World.");

var pEl = document.createElement("p");

pEl.appendChild(textEl);

ログイン後にコピー
true と false の違い:

tru​​e: '

Hello World.

false: '

' のみを複製し、テキスト Hello World を複製しません。

  1. 3.2 jQuery コピー ノード
  2. 1

    var $p = $(&#39;<p>Hello World.</p>&#39;);

    ログイン後にコピー


    注: `ID の重複を回避します

4. ノードを挿入します


4.1 ネイティブ JS は、子ノード リストの最後に新しい子ノードを追加します

1

var newEl = pEl.cloneNode(true);

ログイン後にコピー
ネイティブ JS は、既存の子ノードの前に新しい子ノードを挿入しますノードの子ノード:

1

$newEl = $(&#39;#pEl&#39;).clone(true);

ログイン後にコピー

4.2 jQuery では、ネイティブ JS よりもノードを挿入する方法がたくさんあります

一致する要素の子ノード リストの最後にコンテンツを追加します

1

El.appendChild(newNode);

ログイン後にコピー

ターゲット要素の子ノード リストの最後に一致する要素を追加します

1

El.insertBefore(newNode, targetNode);

ログイン後にコピー

一致する要素の子ノード リストの先頭にコンテンツを追加します

1

$(&#39;#El&#39;).append(&#39;<p>Hello World.</p>&#39;);

ログイン後にコピー

ターゲット要素の子ノード リストの先頭に一致する要素を追加します

1

$(&#39;<p>Hello World.</p>&#39;).appendTo(&#39;#El&#39;);

ログイン後にコピー

一致する要素の前にターゲット コンテンツを追加します

1

$(&#39;#El&#39;).prepend(&#39;<p>Hello World.</p>&#39;);

ログイン後にコピー
一致する要素をターゲットに追加します 要素の前

1

$(&#39;<p>Hello World.</p>&#39;).prependTo(&#39;#El&#39;);

ログイン後にコピー

一致する要素の後にターゲット コンテンツを追加します

1

$(&#39;#El&#39;).before(&#39;<p>Hello World.</p>&#39;);

ログイン後にコピー
E

一致する要素をターゲット要素に追加します

1

$(&#39;<p>Hello World.</p>&#39;).insertBefore(&#39;#El&#39;);

ログイン後にコピー
E


5、ノードの削除



ネイティブJSのノードの削除

1

<strong>$(&#39;#El&#39;).after(&#39;<p>Hello World.</p>&#39;);</strong>

ログイン後にコピー
5.2 jQueryのノードの削除

1

$(&#39;<p>Hello World.</p>&#39;).insertAfter(&#39;#El&#39;);

ログイン後にコピー

6. ノードの置き換え


6.1 ネイティブ JS 置換ノード

1

<strong>El.parentNode.removeChild(El);</strong>

ログイン後にコピー
注: oldNode はparentEl

の実子ノードでなければなりません 6.2 jQuery 置換ノード

1

<strong>$(&#39;#El&#39;).remove();</strong>

ログイン後にコピー

7. 属性の設定/属性の取得

7.1 ネイティブ JS 属性の設定/属性の取得

1

<strong>El.repalceChild(newNode, oldNode);</strong>

ログイン後にコピー

7.2 jQueryの属性設定・属性の取得:

1

$(&#39;p&#39;).replaceWith(&#39;<p>Hello World.</p>&#39;);

ログイン後にコピー
まとめ

以上がこの記事の内容です、この記事の内容が皆様の勉強や仕事に少しでもお役に立てれば幸いです。ご質問がある場合は、メッセージを残して連絡してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
ノード Js + JS 入力 = document.getElementById
から 1970-01-01 08:00:00
0
0
0
js addClassが機能しない
から 1970-01-01 08:00:00
0
0
0
javascript - jsコードをPythonに変換
から 1970-01-01 08:00:00
0
0
0
jsファイルのコードが見つかりません
から 1970-01-01 08:00:00
0
0
0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート