Penjelasan terperinci tentang kaedah jQuery untuk menambah div secara dinamik dan menetapkan nilai atribut

jQuery ialah perpustakaan JavaScript yang pantas dan ringkas. Ia adalah perlu untuk membina halaman web interaktif, dengan kemudahan penggunaan, fleksibiliti dan skalabiliti. Dalam pembangunan web, menambah elemen div secara dinamik adalah keperluan biasa. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk menambah div secara dinamik dan menetapkan nilai atribut.

1. Persediaan

Sebelum menggunakan jQuery, anda perlu memperkenalkan perpustakaan jQuery ke dalam fail HTML. Dalam contoh ini, kami akan menggunakan versi jQuery 3.5.1:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. Tambah div secara dinamik

Dalam jQuery, anda boleh menggunakan kaedah append() untuk menambah elemen secara dinamik. Kaedah ini menerima parameter yang menentukan kandungan untuk ditambah. Boleh jadi HTML markup, elemen DOM, teks atau objek jQuery.

Sebagai contoh, kita boleh menambah div pada elemen badan menggunakan kod berikut:

$("body").append("<div>这是一个新的div</div>");

Dalam kod di atas, kita menggunakan fungsi $() untuk memilih elemen badan dan kaedah append() Tambah elemen div baharu. Rentetan kandungan yang ditambahkan boleh berupa sebarang penanda HTML atau teks biasa.

Jika anda ingin menambah berbilang elemen secara dinamik, anda boleh meletakkannya dalam rentetan dan memisahkannya dengan koma. Contohnya:

$("body").append("<div>这是第一个div</div>, <div>这是第二个div</div>");

Ini akan menambah dua elemen div di dalam elemen badan.

3. Tetapkan nilai atribut

Setelah elemen div baharu ditambahkan, anda boleh menggunakan kaedah attr() untuk menetapkan nilai atribut. Kaedah attr() menerima dua parameter, parameter pertama ialah nama atribut yang akan ditetapkan, dan parameter kedua ialah nilai atribut. Contohnya:

$("body").append("<div>这是一个新的div</div>");
$("div").attr("id", "new-div");

Kod di atas akan menetapkan atribut id untuk elemen div yang baru ditambah dan menetapkan nilainya kepada "new-div".

Anda boleh menggunakan kaedah prop() untuk menetapkan nilai atribut Boolean, contohnya:

$("input").prop("checked", true);

Kod di atas menetapkan atribut yang disemak bagi semua elemen input kepada benar.

Selain menggunakan kaedah attr() dan prop(), anda juga boleh menggunakan kaedah css() untuk menetapkan nilai sifat CSS. Sebagai contoh, anda boleh menetapkan warna latar belakang elemen div yang baru ditambah kepada biru:

$("div").css("background-color", "blue");

Gunakan kaedah css() untuk menetapkan sebarang sifat CSS, termasuk warna, fon, saiz, jidar, dsb.

4. Lengkapkan kod sampel

Berikut ialah kod sampel lengkap, yang menambahkan dua elemen div secara dinamik dan menetapkan atribut id dan warna latar belakangnya:

    
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $("body").append("<div>这是第一个新的div</div>");
            $("body").append("<div>这是第二个新的div</div>");
            $("div").eq(0).attr("id", "div1").css("background-color", "blue");
            $("div").eq(1).attr("id", "div2").css("background-color", "green");
        });
    </script>

Dalam kod di atas, kami menggunakan fungsi $(document).ready() untuk memastikan kod JavaScript dilaksanakan selepas halaman dimuatkan sepenuhnya. Kami mula-mula menambah dua elemen div baharu di dalam elemen badan dan kemudian menggunakan kaedah eq() untuk memilih salah satu daripadanya. Akhir sekali, kami menggunakan kaedah attr() untuk menetapkan atribut id div1, dan menggunakan kaedah css() untuk menetapkan warna latar belakang kepada biru. Kemudian pilih elemen div2, gunakan kaedah attr() untuk menetapkan atribut idnya dan gunakan kaedah css() untuk menetapkan warna latar belakang kepada hijau.

5. Ringkasan

Menambah elemen div secara dinamik dan menetapkan nilai atribut dalam jQuery ialah keperluan biasa. Kita boleh menggunakan kaedah append() untuk menambah elemen div baharu dan kaedah attr(), prop(), dan css() untuk mengubah suai atribut dan gaya elemen. Untuk memastikan kod boleh dibaca dan diselenggara, adalah disyorkan untuk meletakkan kod JavaScript dalam fail berasingan dan merujuknya dalam fail HTML.

Atas ialah kandungan terperinci Penjelasan terperinci tentang kaedah jQuery untuk menambah div secara dinamik dan menetapkan nilai atribut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!