jQueryには以前ありましたか？

jQuery は非常に人気のある JavaScript ライブラリで、HTML ドキュメントや Web ページ上のコンポーネントをより簡単に操作および管理できる便利なメソッドと関数を多数提供します。 jQuery には、before() 関数など、一般的に使用される関数が多数あります。では、before() とは一体何でしょうか?それは何をするためのものか？この記事では、これらの質問に一つずつ答えていきます。

before() 関数の基本構文

jQuery では、before() 関数を使用して、要素の前に新しいコンテンツを挿入できます。 。その基本的な構文は次のとおりです。

$(selector).before(content);

ここで、selector はコンテンツが挿入される前にある要素のセレクター式であり、content は挿入されるコンテンツです。挿入されました。 content には、HTML コード、テキスト、または jQuery オブジェクトを指定できます。

before() 関数の関数

before() 関数を使用すると、ページ上の任意の場所に新しいコンテンツを挿入できます。たとえば、次の HTML コードがあるとします。

<div id="myDiv">
  <p>Hello World!</p>
</div>

before() 関数を使用して、この <div># の前に新しい HTML コードを挿入できます。以下に示す ## 要素: <pre class='brush:php;toolbar:false;'>$(&quot;#myDiv&quot;).before(&quot;&lt;h1 id=&quot;Welcome&quot;&gt;Welcome&lt;/h1&gt;&quot;);</pre>これにより、<p>myDiv<code> 要素の前に新しい

要素が挿入され、ページの結果は次のようになります。次のように:

Welcome
<div id="myDiv">
  <p>Hello World!</p>
</div>

before() 関数を使用して、既存の要素を別の位置に移動することもできます。たとえば、次の HTML コードがあるとします。

<div>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</div>

<div id="newDiv"></div>

before() 関数とセレクターを使用して、2 番目の

要素を移動できます。以下に示すように、 #newDiv 要素に追加します。

$("#newDiv").before($("div:first p:last"));

最終的な HTML コードは次のようになります。

<div id="newDiv">
  <p>Paragraph 2</p>
</div>

<div>
  <p>Paragraph 1</p>
</div>

上記のコードにより、2 番目の ## が正常に追加されました。 #<p></p>

要素は #newDiv 要素の前に移動されます。

before()

関数の連鎖使用jQuery は連鎖操作を使用できます。これは、

before()

関数を複数回使用できることも意味します。 。たとえば、次の HTML コードがあるとします。 <pre class='brush:php;toolbar:false;'>&lt;div id=&quot;myDiv&quot;&gt; &lt;p&gt;Paragraph 1&lt;/p&gt; &lt;p&gt;Paragraph 2&lt;/p&gt; &lt;/div&gt;</pre> 次のコードを使用して、

#myDiv

要素の前に 3 つの新しい <p></p> 要素を挿入できます。以下に示すように: <pre class='brush:php;toolbar:false;'>$(&quot;#myDiv&quot;) .before(&quot;&lt;p&gt;New Paragraph 1&lt;/p&gt;&quot;) .before(&quot;&lt;p&gt;New Paragraph 2&lt;/p&gt;&quot;) .before(&quot;&lt;p&gt;New Paragraph 3&lt;/p&gt;&quot;);</pre>最終的な HTML コードは次のようになります:

New Paragraph 3
New Paragraph 2
New Paragraph 1
<div id="myDiv">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</div>

<p></p>before()

関数と insertBefore() 関数の比較jQuery では、

before()

関数は JavaScript ネイティブの insertBefore() 関数と非常によく似ています。では、この 2 つの違いは何でしょうか? まず、

insertBefore()

は JavaScript のネイティブ関数であり、before() は jQuery が提供する関数です。これは、insertBefore() 関数が before() 関数よりも柔軟であり、ネイティブ JavaScript コードで使用できることを意味します。一方、before() 関数は insertBefore() 関数よりも便利で、連鎖操作を使用して複数回呼び出すことができます。 第二に、パラメータの順序が異なります。

insertBefore()

関数の構文は次のとおりです。 <pre class='brush:php;toolbar:false;'>parentElement.insertBefore(newElement, referenceElement);</pre> このうち、

parentElement

は新しい要素が挿入される親要素であり、newElement は挿入される新しい要素です。referenceElement は新しい要素が挿入される前にある参照要素です。 Comparison

before()

関数構文: <pre class='brush:php;toolbar:false;'>$(referenceElement).before(newElement);</pre>このうち、

referenceElement

は既存の要素、newElement は新しい要素が挿入されました。 最後に、

before()

関数は新しい要素を含む jQuery オブジェクトを返し、insertBefore() 関数は新しい要素自体を返します。 結論

この記事の導入部を通じて、jQuery の

before()

関数の使用法と機能を理解しました。 before() 関数を使用すると、任意の位置に新しいコンテンツを挿入したり、セレクターを通じて既存の要素を別の位置に移動したりできます。また、before() 関数を使用して複数の新しい要素を挿入する操作を連鎖させることができることも示しました。 ネイティブ JavaScript 関数

insertBefore()

と比較すると、before() 関数はより便利ですが、柔軟性が若干劣ります。 これを使用する場合は、実際のニーズに基づいて特定の機能を選択する必要があります。

before()

を使用するか insertBefore() を使用するかにかかわらず、これらは、Web ページ上の要素をより簡単に管理および操作するのに役立つ非常に便利なツールです。