Bagaimana untuk menggantikan tag dengan jquery

Dengan pembangunan berterusan teknologi bahagian hadapan, semakin banyak tapak web mula menggunakan jQuery untuk mengendalikan operasi DOM halaman HTML. Antaranya, menggantikan tag adalah kaedah yang biasa digunakan dalam jQuery Artikel ini akan memperkenalkan cara menggunakan jQuery untuk menggantikan tag.

1. Penggunaan asas teg gantian jQuery

Pertama, mari kita lihat penggunaan asas teg gantian jQuery. Terdapat dua kaedah utama untuk menggantikan tag dalam jQuery: replaceWith() dan replaceAll().

1. kaedah replaceWith()

kaedah replaceWith() digunakan untuk menggantikan elemen yang dipilih dengan elemen HTML atau DOM yang ditentukan. Penggunaan khusus adalah seperti berikut:

$(selector).replaceWith(content)

Antaranya, pemilih ialah pemilih CSS bagi elemen yang dipilih, dan kandungan ialah kandungan yang akan dimasukkan ke dalam elemen yang dipilih, yang boleh menjadi tag HTML, DOM elemen atau objek jQuery.

Berikut ialah contoh di mana kami menggantikan elemen p yang dipilih dengan perenggan dengan kandungan "Ini adalah perenggan baharu".

$(document).ready(function(){
  $("p").replaceWith("<p>这是一个新段落。</p>");
});

2. kaedah replaceAll()

kaedah replaceAll() digunakan untuk menggantikan elemen yang ditentukan dengan elemen yang dipilih. Penggunaan khusus adalah seperti berikut:

$(selector).replaceAll(content)

Antaranya, pemilih ialah pemilih CSS bagi elemen yang akan diganti, dan kandungan ialah kandungan yang akan diganti, yang boleh menjadi tag HTML, elemen DOM atau objek jQuery.

Berikut ialah contoh di mana kami menggantikan semua elemen dengan ID "id1" dengan perenggan baharu.

$(document).ready(function(){
  $("<p>这是一个新段落。</p>").replaceAll("#id1");
});

2. Aplikasi lanjutan bagi teg penggantian jQuery

Selain penggunaan asas, teg gantian jQuery mempunyai banyak aplikasi lanjutan. Di bawah, kami akan memperkenalkan beberapa aplikasi lanjutan yang biasa digunakan.

1. Rekod keadaan asal

Kadangkala, kita perlu merekodkan keadaan asal sesuatu elemen sebelum menggantikan teg supaya ia boleh dipulihkan apabila diperlukan. Untuk melakukan ini, kita boleh menggunakan kaedah klon() untuk mencipta salinan elemen yang dipilih dan memanggil kaedah detach() untuk memadamkannya daripada dokumen.

var p = $("p");
var old_p = p.clone().detach();

2. Tambah teg penutup secara automatik

Apabila menggantikan teg menggunakan kaedah replaceWith(), jika kita tidak menambah teg penutup untuk elemen baharu, maka kod yang diganti Ralat mungkin berlaku. Untuk mengelakkan situasi ini, kami boleh mentakrifkan pembolehubah global untuk menyimpan senarai teg yang perlu menambah teg penutup secara automatik.

var selfClosingTags = ['img', 'link', 'input'];

Kemudian, apabila memanggil kaedah replaceWith(), kami boleh menambah teg penutup secara automatik mengikut keperluan.

var new_element = $("<img>", {src: "test.jpg"});
if ($.inArray(new_element.prop("tagName").toLowerCase(), selfClosingTags) == -1) {
  new_element.append("</" + new_element.prop("tagName") + ">");
}
$("p").replaceWith(new_element);

3. Tukar antara berbilang elemen

Dalam sesetengah kes, kita mungkin perlu menukar kedudukan berbilang elemen. Untuk melakukan ini, kita boleh mengalih keluar elemen ini daripada dokumen menggunakan kaedah detach() dan memasukkannya selepas elemen lain menggunakan kaedah insertAfter().

var element1 = $("#element1").detach();
var element2 = $("#element2").detach();
element1.insertAfter($("#target"));
element2.insertAfter(element1);

3. Ringkasan

Melalui pengenalan artikel ini, kami dapat melihat bahawa teg gantian jQuery boleh membantu kami melaksanakan operasi DOM dalam halaman HTML dengan cepat. Sama ada penggunaan asas atau aplikasi lanjutan, menguasainya boleh membolehkan kami menyelesaikan kerja pembangunan tapak web dengan lebih cekap. Oleh itu, adalah disyorkan bahawa pembangun memanfaatkannya dengan lebih banyak dalam pembangunan harian untuk meningkatkan kecekapan pembangunan.

Atas ialah kandungan terperinci Bagaimana untuk menggantikan tag dengan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!