Bagaimana untuk menyalin elemen dalam operasi pokok DOM dalam jQuery_jquery

Contoh dalam artikel ini menerangkan kaedah menyalin elemen dalam operasi pepohon DOM dalam jQuery. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Salin elemen

Operasi yang dinyatakan di atas termasuk memasukkan elemen yang baru dicipta, memindahkan elemen dari satu lokasi ke lokasi lain dalam dokumen dan membungkus elemen sedia ada dengan elemen baharu. Walau bagaimanapun, kadangkala operasi menyalin elemen juga digunakan. Sebagai contoh, anda boleh menyalin menu navigasi yang muncul di bahagian atas halaman dan meletakkan salinan dalam pengaki. Malah, pada bila-bila masa anda boleh meningkatkan kesan visual halaman dengan menyalin elemen, ini adalah peluang yang baik untuk menggunakan semula kod. Lagipun, mengapa menulis semula kod dua kali dan menggandakan kemungkinan ralat apabila kita hanya boleh menulisnya sekali dan membiarkan jQuery menyalinnya untuk kita?

Apabila menyalin elemen, anda perlu menggunakan kaedah .clone() jQuery, yang boleh mencipta salinan mana-mana koleksi elemen padanan untuk kegunaan masa hadapan. Seperti sebelum ini apabila anda menggunakan $() untuk mencipta elemen, elemen ini tidak akan muncul dalam dokumen sehingga anda menggunakan kaedah sisipan pada elemen yang disalin.

Sebagai contoh, baris kod berikut akan membuat salinan perenggan pertama dalam

:

Salin kod Kod adalah seperti berikut:

$('div.chapter p:eq(0)'). klon() ;

Tetapi hanya mencipta salinan tidak mencukupi untuk menukar kandungan halaman. Jika anda mahu kandungan yang disalin dipaparkan pada halaman web, anda boleh menggunakan kaedah sisipan untuk meletakkannya di hadapan

.

Salin kod Kod adalah seperti berikut:

$('div.chapter p:eq(0)'). clone() .insertBefore('div.chapter');

Dengan cara ini, perenggan yang sama akan muncul dua kali. Ia boleh dilihat bahawa hubungan antara .clone() dan kaedah sisipan adalah sama seperti menyalin dan menampal.

Salin bersama-sama dengan acara

Secara lalai, kaedah .clone() tidak menyalin peristiwa yang terikat dalam elemen padanan atau unsur turunannya. Walau bagaimanapun, anda boleh menghantar parameter Boolean kepada kaedah ini Jika anda menetapkan parameter ini kepada benar, anda boleh menyalin acara bersama-sama, iaitu, .clone(true). Dengan cara ini, anda boleh mengelakkan masalah mengikat semula acara secara manual selepas setiap salinan.

Buat petikan tarik melalui salinan Banyak tapak web, seperti rakan cetak mereka, menggunakan petikan tarik untuk menekankan potongan kecil teks dan menarik perhatian pembaca. Petikan yang dipanggil adalah untuk mengekstrak sebahagian daripada teks daripada teks utama dan kemudian menggunakan gaya grafik khas pada teks ini. Kesan hiasan ini boleh dicapai dengan mudah melalui kaedah .clone(). Mula-mula, mari kita lihat perenggan ketiga teks contoh:

Adalah Undang-undang Alam dengan kami bahawa seorang anak lelaki akan mempunyai satu lagi pihak bapa, supaya setiap generasi akan bangkit (sebagai peraturan) satu langkah dalam skala pembangunan dan bangsawan Oleh itu anak Dataran adalah seorang Pentagon, Heksagon dan seterusnya.

Kami mendapati bahawa perenggan ini bermula dengan elemen WX dan kelas di dalamnya disediakan untuk disalin. Apabila anda menampal teks * yang disalin ke lokasi lain, anda juga perlu mengubah suai sifat gayanya supaya ia boleh dibezakan daripada teks asal.
Untuk melaksanakan gaya ini, Tambahkan kelas yang ditarik dan tambahkan peraturan gaya berikut untuk kelas ini dalam helaian gaya:

Salin kod Kod adalah seperti berikut:

.ditarik {
kedudukan: mutlak; lebar: 120px; fon: condong 1.2em "Times New Roman", Times, latar belakang: #e5e5e5; bayang kotak: 1px 1px 8px rgba(0, 0, 0, 0.6);
}

Dadurch werden dem Pull-Zitat ein hellgrauer Hintergrund, etwas Abstand und eine andere Schriftart hinzugefügt. Noch wichtiger ist, dass es absolut 20 Pixel über und 20 Pixel rechts vom nächsten Vorfahrenelement positioniert ist, das (absolut oder relativ) im DOM positioniert ist. Wenn es im Vorgängerelement keine Elemente gibt, für die eine Positionierung gilt (außer statisch), wird das Pull-Quote relativ zum

-Element positioniert. Stellen Sie dazu sicher, dass in Ihrem jQuery-Code auf das übergeordnete Element des kopierten Pull-Quotes der Stil „position:relative“ angewendet wird.

CSS-Position berechnen

Obwohl die Position des oberen Rands des Pull-Quote-Felds relativ intuitiv ist, ist es möglicherweise nicht so leicht zu verstehen, wenn die linke Seite 20 Pixel rechts vom positionierten übergeordneten Element liegt. Um diese Zahl zu erhalten, müssen Sie zunächst die Gesamtbreite des Pull-Quote-Felds berechnen. Dies ist der Wert des Breitenattributs plus der linken und rechten Auffüllung oder 145 Pixel 5 Pixel 10 Pixel. Das Ergebnis ist 160 Pixel. Wenn Sie das richtige Attribut für ein Pull-Quote festlegen, richtet ein Wert von 0 die rechte Seite des Pull-Quotes an der rechten Seite seines übergeordneten Elements aus. Um seine linke Seite 20 Pixel nach rechts vom übergeordneten Element zu verschieben, muss es daher um 20 Pixel mehr als seine Gesamtbreite, die -180 Pixel beträgt, in die entgegengesetzte Richtung verschoben werden.

Jetzt kehren wir zum jQuery-Code zurück und sehen uns an, wie man Stile anwendet. Beginnen Sie zunächst mit einem Selektorausdruck, der allen -Elementen entspricht, und wenden Sie dann den position:relative-Stil auf die ausgewählten Elemente an, siehe folgenden Code:

Code kopieren Der Code lautet wie folgt:

$(document).ready(function() {
$('span.pull-quote').each(function(index) { var $parentParagraph = $(this).parent('p'); $parentParagraph.css('position', 'relative');
});
});

Hier speichern wir auch den Selektorausdruck, der mehrmals in der Variablen $parentParagraph verwendet werden muss, um die Leistung und Lesbarkeit zu verbessern.

Der nächste Schritt besteht darin, das Highlight-Zitat selbst zu erstellen, um die vorbereiteten CSS-Stile zu nutzen. Zu diesem Zeitpunkt kopieren wir zunächst jedes -Element, fügen dann die gezogene Klasse zur erhaltenen Kopie hinzu und fügen diese Kopie schließlich am Anfang des übergeordneten Absatzes ein, siehe folgenden Code:

Code kopieren Der Code lautet wie folgt:

$(document).ready(function() {
$('span.pull-quote').each(function(index) { var $parentParagraph = $(this).parent('p'); $parentParagraph.css('position', 'relative'); var $ clonedCopy = $(this).clone();
$clonedCopy
.addClass('pulled')
.prependTo($parentParagraph);
});
});

Hier definieren wir eine neue Variable $clonedCopy für die spätere Verwendung.
Da für das kopierte Element eine absolute Positionierung festgelegt wurde, spielt seine Position innerhalb des Absatzes keine Rolle. Gemäß den Einstellungen in den CSS-Regeln wird es, solange es sich innerhalb des Absatzes befindet, relativ zur oberen und rechten Seite des Absatzes positioniert. Derzeit sehen Absätze mit eingefügten hervorgehobenen Zitaten so aus:

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.