jquery - jQuery $(' の違いは何ですか?') および $('p')

Question

誰かが jQueryの$('<p>')との違いを説明してくれませんか?$('p')

たとえば、私が書いた場合：

$('body').append($('<p>').html('hello my friend'));

次に、「こんにちは、私の友人」というテキストが表示されます。

しかし、私が書くとき：

$('body').append($('p').html('hello my friend'));

その後、何も起こりません。

Answer 1

$('<p>')新しい段落 ( <p>) 要素を作成します。( <p></p>)

$('p')既存のすべての段落要素を選択します。

例えば：

$('p').after($('<p>').html('foo'))

すべての段落を選択し、その後に新しい段落を追加します。

Answer 2

jQuery は HTML を解析して、実際の DOM 要素を作成できます。つまり、次のようなことをすると$("<p />")、jQuery はマークアップを解析し、ドキュメントに追加できる DOM 段落要素を内部的に作成します。

一方、jQueryは、CSS セレクター エンジンであるSizzleを統合します。jQuery 関数は CSS セレクターを受け入れます。つまり、ドキュメント内のすべての段落要素を$("p")選択します。などのより複雑なセレクターを使用して、ドキュメントの最初の段落を選択することもできます。$("p:first-child")

jQuery CSS セレクターの詳細については、こちらをご覧ください。

Answer 3

違い：

$('<p>')新しい段落要素を作成します

$('p')DOM 内のすべての段落要素を選択する

あなたのケース:

例 1:

$('body').append($('<p>').html('hello my friend'));

新しい段落要素を作成し、テキストを指定すると、要素が本文に追加されます。

例 2:

$('body').append($('p').html('hello my friend'));

DOM に既に存在するすべての段落要素を選択し、それらのコンテンツを 'hello my friend' に変更します。次に、それらすべてを本文に追加しますが、それらは既に DOM にあるため、あまり意味がありません。

このコードを実行しても何も表示されないため、ページには要素が含まれていない可能性が高く、セレクター<p>に一致するものはありません。$("p")