Adakah jquery mempunyai sebelum ini?

jQuery ialah perpustakaan JavaScript yang sangat popular yang menyediakan banyak kaedah dan fungsi mudah yang boleh membantu kami memanipulasi dan mengurus komponen dengan lebih mudah pada dokumen HTML dan halaman web. Dalam jQuery, terdapat banyak fungsi yang biasa digunakan, termasuk fungsi before(). Jadi, apakah sebenarnya before()? Apa yang ia lakukan? Dalam artikel ini, kami akan menjawab soalan-soalan ini satu demi satu.

before() Sintaks asas fungsi

Dalam jQuery, kita boleh menggunakan fungsi before() untuk memasukkan kandungan baharu sebelum elemen. Sintaks asasnya adalah seperti berikut:

$(selector).before(content);

di mana selector ialah ungkapan pemilih elemen sebelum kandungan itu hendak disisipkan dan content ialah kandungan yang akan disisipkan. content boleh berupa kod HTML, teks atau objek jQuery.

before() Fungsi fungsi

Menggunakan fungsi before(), kita boleh memasukkan kandungan baharu di mana-mana sahaja pada halaman. Sebagai contoh, katakan kita mempunyai kod HTML berikut:

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

Kita boleh menggunakan fungsi before() untuk memasukkan kod HTML baharu sebelum elemen dc6dce4a544fdca2df29d5ac0ea9906b ini seperti berikut:

$("#myDiv").before("<h1>Welcome</h1>");

Ini A elemen myDiv baharu akan dimasukkan sebelum elemen 4a249f0d628e2318394fd9b75b4636b1 Hasil halaman adalah seperti berikut:

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

Kita juga boleh menggunakan fungsi before() untuk mengalihkan elemen sedia ada ke kedudukan lain. Sebagai contoh, katakan kita mempunyai kod HTML berikut:

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

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

Kita boleh menggunakan fungsi before() dan pemilih untuk mengalihkan elemen e388a4556c0f65e1904146cc1a846bee kedua sebelum elemen #newDiv, seperti ini:

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

Kod HTML akhir akan kelihatan seperti ini:

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

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

Dengan kod di atas, kami berjaya mengalihkan elemen e388a4556c0f65e1904146cc1a846bee kedua sebelum elemen #newDiv.

before() Penggunaan fungsi berantai

jQuery boleh menggunakan operasi berantai, yang juga bermakna fungsi before() boleh digunakan beberapa kali. Sebagai contoh, katakan kita mempunyai kod HTML berikut:

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

Kita boleh menggunakan kod berikut untuk memasukkan tiga elemen e388a4556c0f65e1904146cc1a846bee baharu sebelum elemen #myDiv, seperti ini:

$("#myDiv")
  .before("<p>New Paragraph 1</p>")
  .before("<p>New Paragraph 2</p>")
  .before("<p>New Paragraph 3</p>");

Akhirnya Kod HTML akan menjadi seperti ini: Perbandingan fungsi

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

before() dan fungsi insertBefore()

Dalam jQuery, peranan fungsi before() dan asli JavaScript insertBefore() The fungsi sangat serupa. Jadi, apakah perbezaan antara keduanya?

Pertama sekali, insertBefore() ialah fungsi JavaScript asli dan before() ialah fungsi yang disediakan oleh jQuery. Ini bermakna fungsi insertBefore() lebih fleksibel daripada fungsi before() dan boleh digunakan dalam kod JavaScript asli. Sebaliknya, fungsi before() lebih mudah daripada fungsi insertBefore() dan boleh dipanggil beberapa kali menggunakan operasi berantai.

Kedua, susunan parameter mereka berbeza. Sintaks fungsi insertBefore() ialah:

parentElement.insertBefore(newElement, referenceElement);

di mana, parentElement ialah elemen induk di mana elemen baharu akan dimasukkan, newElement ialah elemen baharu yang akan disisipkan dan referenceElement ialah elemen baharu yang akan dimasukkan ke elemen rujukan sebelumnya.

lwn. before() Sintaks fungsi:

$(referenceElement).before(newElement);

Di mana, referenceElement ialah elemen sedia ada dan newElement ialah elemen baharu yang akan disisipkan.

Akhir sekali, fungsi before() mengembalikan objek jQuery yang mengandungi elemen baharu, manakala fungsi insertBefore() mengembalikan elemen baharu itu sendiri.

Kesimpulan

Melalui pengenalan artikel ini, kami memahami penggunaan dan fungsi fungsi before() dalam jQuery. Kita boleh menggunakan fungsi before() untuk memasukkan kandungan baharu pada mana-mana kedudukan, atau mengalihkan elemen sedia ada ke kedudukan lain melalui pemilih. Kami juga menunjukkan bahawa fungsi before() boleh digunakan untuk merantai operasi untuk memasukkan berbilang elemen baharu.

Berbanding dengan fungsi JavaScript asli insertBefore(), fungsi before() lebih mudah dan kurang fleksibel sedikit.

Apabila menggunakannya, kita harus memilih fungsi tertentu berdasarkan keperluan sebenar. Sama ada menggunakan before() atau insertBefore(), ia adalah alatan yang sangat berguna yang boleh membantu kami mengurus dan memanipulasi elemen pada halaman web dengan lebih mudah.

Atas ialah kandungan terperinci Adakah jquery mempunyai sebelum ini?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!