Adakah jquery mempunyai sebelum ini?-Soal Jawab bahagian hadapan-php.cn

Adakah jquery mempunyai sebelum ini?

PHPz

Lepaskan： 2023-05-12 09:43:36

asal

837 orang telah melayarinya

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);

Salin selepas log masuk

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>

Salin selepas log masuk

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

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

Salin selepas log masuk

Ini A elemen myDiv baharu akan dimasukkan sebelum elemen <h1> Hasil halaman adalah seperti berikut:

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

Salin selepas log masuk

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>

Salin selepas log masuk

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

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

Salin selepas log masuk

Kod HTML akhir akan kelihatan seperti ini:

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

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

Salin selepas log masuk

Dengan kod di atas, kami berjaya mengalihkan elemen  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>

Salin selepas log masuk

Kita boleh menggunakan kod berikut untuk memasukkan tiga elemen  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>");

Salin selepas log masuk

Akhirnya Kod HTML akan menjadi seperti ini: Perbandingan fungsi

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

Salin selepas log masuk

`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);

Salin selepas log masuk

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);

Salin selepas log masuk

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!