简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial js > teks badan

Contoh analisis menggunakan kaedah sisipan terbalik untuk operasi pepohon DOM dalam jQuery_jquery

WBOY
Lepaskan： 2016-05-16 16:18:19
asal
1351 orang telah melayarinya

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

Gunakan kaedah sisipan terbalik

Di sini kita mula-mula memasukkan kandungan yang dicipta di hadapan elemen, dan kemudian memasukkan elemen yang sama ke kedudukan lain dalam dokumen. Secara amnya, apabila memanipulasi elemen dalam jQuery, lebih ringkas dan cekap untuk menggunakan kaedah penggabungan. Tetapi kami tidak mempunyai cara untuk melakukan ini sekarang, kerana ini adalah sasaran .insertBefore() dan kandungan .appendTo(). Pada ketika ini, menggunakan kaedah sisipan terbalik boleh membantu kami menyelesaikan masalah.

Kaedah sisipan seperti .insertBefore() dan .appendTo() biasanya mempunyai kaedah terbalik yang sepadan. Kaedah terbalik juga melakukan operasi yang sama, tetapi "sasaran" dan "kandungan" diterbalikkan. Contohnya:

Salin kod Kod adalah seperti berikut:
$('

Hello

'). appendTo(' #container');

Hasilnya adalah sama seperti kod berikut:

Salin kod Kod adalah seperti berikut:
$('#container').append('

Hello');

Di bawah kita akan menggunakan .before() dan bukannya .insertBefore() untuk membina semula kod, lihat kod berikut:

Salin kod Kod adalah seperti berikut:
$(document).ready(function() {
var $notes = $('
    ')
    .insertBefore('#footer');
    $('span.footnote').setiap(fungsi(indeks) {
    $(ini)
    .sebelum('' (indeks 1) '')
    .appendTo($notes)
    .wrap('
  1. ');
    });
    });

    Sisipkan kaedah panggil balik

    Kaedah sisipan terbalik boleh menerima fungsi sebagai parameter, serupa dengan kaedah .attr() dan .css(). Fungsi yang diluluskan akan dipanggil untuk setiap elemen sasaran dan mengembalikan rentetan HTML yang dimasukkan. Teknik ini sebenarnya boleh digunakan di sini, tetapi kerana ia memerlukan pengulangan operasi yang sama untuk setiap nota kaki, adalah lebih jelas untuk menggunakan kaedah .each().

    Kini, kita boleh mempertimbangkan langkah terakhir: mencipta pautan ke nota kaki yang sepadan di lokasi yang sepadan dalam teks dan pautan dalam nota kaki ke lokasi dalam teks. Untuk melakukan ini, setiap nota kaki memerlukan empat teg: dua pautan, satu dalam teks dan satu dalam nota kaki dan dua atribut id. Oleh kerana dengan cara ini, parameter yang dihantar kepada kaedah .before() akan menjadi rumit, jadi perlu menggunakan kaedah baharu untuk mencipta rentetan di sini.
    Dalam kod di atas, kami menggunakan operator untuk menggabungkan rentetan. Walaupun tiada masalah menggunakan operator,
    Jika anda mempunyai terlalu banyak rentetan untuk digabungkan, ia akan kelihatan tidak kemas. Jadi, kami menggunakan kaedah .join() tatasusunan di sini untuk membina tatasusunan yang lebih besar. Dengan kata lain, dua baris kod berikut mempunyai hasil yang sama.

    Salin kod Kod adalah seperti berikut:
    var str = 'a' 'b' 'c';
    var str = ['a', 'b', 'c'].join('');

    Walaupun contoh ini memerlukan memasukkan lebih banyak aksara, menggunakan kaedah .join() boleh mengelakkan kekeliruan yang disebabkan oleh terlalu banyak rentetan untuk disambungkan. Mari kita lihat kod sampel sekali lagi Kod berikut ialah proses menggunakan .join() untuk mencipta rentetan.

    Salin kod Kod adalah seperti berikut:
    $(document).ready(function() {
    var $notes = $('
      ') .insertBefore('#footer'); $('span.footnote').setiap(fungsi(index) { $ (ini)
      .sebelum([
      '', indeks 1,
      '      '
      ].sertai(''))
      .appendTo($notes)
      .wrap('
    1. ');
      });
      });

      Beachten Sie , dass Index 1 nicht in Klammern gesetzt werden muss, da jedes Element des Arrays Operationen separat ausführt. Mit dieser Technik können Sie einen Link am Ende der Seite und einen eindeutigen ID-Wert für das Fußzeilen-Tag hinzufügen. Gleichzeitig muss in der folgenden Methode auch das entsprechende ID-Attribut zum

    2. -Element hinzugefügt werden, damit der Link ein passendes Ziel hat:

      Code kopieren Der Code lautet wie folgt:
      $(document).ready(function() {
      var $notes = $('
        ') .insertBefore('#footer'); $('span.footnote').each(function(index) { $ (dies)
        .before([
        '',
        '', Index 1,
        '        '
        ].join(''))
        .appendTo($notes)
        .wrap('
      1. ');
        });
        });

        Wenn diese Tags hinzugefügt werden, verfügt jedes Fußnoten-Tag über einen Link zur entsprechenden Fußnote am Ende der Seite. Jetzt muss nur noch in der Fußnote ein Link zum Kontext erstellt werden. Dazu können Sie .append() verwenden, die umgekehrte Methode von .appendTo(), siehe folgenden Code:

        Code kopieren Der Code lautet wie folgt:
        $(document).ready(function() {
        var $notes = $('
          '"id="context-', Index 1,
          '"class = "context__>',
          '', Index 1,
          '          '
          ].join(''))
          .appendTo($notes)
          .append([
          ' (');
          });
          });

        Beachten Sie , dass der href hier auf die ID im Fußnoten-Tag verweist. In den laufenden Ergebnissen sehen Sie eine Fußnote mit dem neuen Link.

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

        Label berkaitan：
        dom jquery 操作 方法 pokok
        sumber：php.cn
        Artikel sebelumnya：Beberapa masalah dalam prototaip Javascript seret dan lepas (menganalisis kod baris demi baris, membolehkan anda memahami dengan mudah prinsip seret dan lepas)_kemahiran javascript Artikel seterusnya：Gunakan penghalaan dan $lokasi untuk menukar pandangan dalam angular_AngularJS
        Kenyataan Laman Web ini
        Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
        Artikel terbaru oleh pengarang
        Isu terkini
        Hantar borang tanpa butang menggunakan Javascript/Jquery Saya cuba menyerahkan borang tanpa butang dengan memanggil fungsi JavaScript dan melaksana...
        daripada 2024-04-06 14:54:03
        0
        2
        421
        Bagaimana untuk mendapatkan semula nilai baris yang tidak dipilih dalam jadual data HTML menggunakan jquery Saya cuba mendapatkan nilai semua baris di mana butang tidak diklik. Sebagai contoh, apabi...
        daripada 2024-04-05 09:26:49
        0
        1
        1418
        Perlukan skrip jquery untuk mengalihkan pilihan yang dipilih dari kotak pilihan berdasarkan pemilihan semasa pengguna akhir Saya mempunyai halaman HTML di mana pengguna akhir boleh meletakkan kedudukan item kami me...
        daripada 2024-04-04 18:40:04
        0
        1
        3528
        Saya telah mencipta elemen dalam CSS tulen melalui penanda halaman. Ia dicipta tetapi tidak kelihatan Kod saya adalah seperti berikut: g=document.createElement('div');g.setAttribute("id&q...
        daripada 2024-04-04 17:27:27
        0
        1
        417
        Tidak dapat menghantar data borang pada iOS Safari/Firefox Ini berfungsi pada semua platform kecuali Safari/Firefox pada iOS: jQuery("#gform_1&q...
        daripada 2024-04-04 12:53:48
        0
        1
        303
        Topik-topik yang berkaitan
        Lagi>
        Cadangan popular
        Tutorial Popular
        Lagi>
        Tutorial berkaitan
        Cadangan popular
        Kursus terkini
        Muat turun terkini
        Lagi>
        kesan web
        Kod sumber laman web
        Bahan laman web
        Templat hujung hadapan
        Tentang kita Penafian Sitemap
        Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！