Menggunakan operasi DOM untuk menggantikan ungkapan biasa dalam jQuery_jquery

Dalam dunia hari ini di mana pelanggan struktur B/S menjadi semakin "gemuk", sebagai pengaturcara penuh, anda berkemungkinan mengendalikan rentetan html pada bahagian hadapan Perhatikan bahawa anda mengendalikan rentetan html, bukan rentetan halaman semasa.

Contohnya, Ueditor, editor teks kaya HTML dalam talian yang dilancarkan oleh Baidu, boleh mencipta dokumen teks kaya dalam talian dan fungsinya setanding dengan versi Microsoft Word yang diperkemas. Walaupun Ueditor mempunyai aura Baidu, kesan sebenar tidak begitu memuaskan Kami perlu memproses rentetan html yang dihasilkannya dua kali, seperti menetapkan lebar semua imej kepada 90%.

Melalui kaedah tertentu, kita boleh mendapatkan rentetan html dalam editor teks Anggapkan rentetan tersebut adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

<p>Sao Nian seperti bunga</p>
<img src="./saonian.png" alt="Sao Nian Selfie" >
<p>Piramid Misteri</p>
<img style="height:30px;" src="./jinzita.png" alt="Piramid Cina" >
<p>Kehidupan seperti mimpi</p>
<img style="width:50px;height:30px;" src="./rensheng.png" alt="Semua jenis kehidupan" >

Tetapi apa yang perlu dilakukan seterusnya? Pemprosesan rentetan yang elegan memudahkan kita memikirkan ungkapan biasa Bolehkah kita menggunakan ungkapan biasa di sini?

Jawapannya boleh, cuba kesan biasa dulu. Tetapkan lebar semua imej kepada 90%. Cara paling mudah ialah menambah atribut gaya pada teg img dan kemudian menentukan lebar dalam gaya.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              langkah pertama kami untuk memadankan semua teg img. Tidak, ini mungkin menimpa atribut asal yang lain, jadi tambahkan secara langsung Penambahan itu tidak akan menimpanya. Masih tidak berfungsi, bagaimana jika ada lebar asalnya. . .

Saya belum mula menulis ungkapan biasa lagi, memikirkan prosesnya dahulu, ia sudah sangat membosankan, pelaksanaannya lebih rumit.

Nasib baik, kami boleh mengubah pemikiran kami dan menyelesaikan masalah ini dengan bantuan jQuery.

Kekuatan jQuery ialah ia boleh membungkus secara terus rentetan HTML ke dalam elemen dom ini tidak wujud dalam halaman semasa, ia diletakkan dalam memori.

Melalui jQuery, anda hanya memerlukan sekeping kod ini untuk mencapainya:

Salin kod Kod adalah seperti berikut:

//Tentukan bekas untuk memudahkan mendapatkan rentetan html yang diubah suai
//Gunakan jQuery terus untuk membalut "<div></div>". Pada masa ini, akan ada elemen div dalam memori
var $container = $("<div></div>");
//Anggap ini rentetan html yang perlu diubah suai
var html = "<img style='width: 50%;' src='./test.jpg' >";
//Masukkan terus rentetan html untuk diubah suai ke dalam bekas
//jQuery cukup kuat untuk membungkus rentetan html secara automatik ke dalam elemen dom dan kemudian memasukkannya ke dalam bekas div dalam memori
$container.append(html);
//Cari semua teg img dalam bekas dan lintasi
$container.find("img").setiap(fungsi(i,n){
//Untuk setiap elemen img, ubah suai atribut lebar secara langsung dalam atribut gayanya
//Jika atribut gaya tidak wujud, tambahkannya secara automatik jika sudah ada atribut lebar, ubah suai terus tidak perlu terlalu risau
$(n).css({
       lebar: "90%"
});
});
//Dapatkan rentetan html yang diubah suai, iaitu kandungan html bekas
makluman($container.html());

Komen dalam kod adalah sangat terperinci, jadi saya tidak akan menerangkan terlalu banyak Kita perlu memahami bahawa jQuery bukan sahaja boleh mengendalikan html dalam halaman sebenar, tetapi juga html maya dalam memori.

Dengan membandingkan kedua-duanya, saya percaya pembaca dapat segera memahami kaedah mana yang lebih baik.

Seperti yang sering dikatakan oleh Xiao Cai: Jika anda fikir masalah boleh diselesaikan, tetapi ia masih belum diselesaikan selepas sekian lama, mungkin pemikiran anda salah Fikirkan dari sudut lain, dan masalah itu akan berlaku diselesaikan!