tetapan dinamik jquery div

Apabila halaman web menjadi lebih kompleks, pembangunan bahagian hadapan menjadi lebih penting. jQuery, sebagai perpustakaan JavaScript yang kaya dengan ciri, digunakan secara meluas dalam pembangunan web. Dalam jQuery, menetapkan div secara dinamik ialah salah satu operasi biasa Artikel ini akan memperkenalkan cara menggunakan jQuery untuk menetapkan div secara dinamik.

1. Buat elemen div

Dalam jQuery, anda boleh mencipta elemen div melalui kod berikut:

var div = $("<div></div>");

Pada ketika ini, jQuery akan mencipta elemen div kosong. Apabila mencipta, anda juga boleh menambah beberapa atribut:

var div = $("<div></div>", {
  "class": "myDiv",
  "id": "myId"
});

Ini mencipta elemen div dengan kelas myDiv dan id myId. Lebih banyak atribut boleh ditambah dalam bentuk JSON.

2. Tetapkan kandungan elemen div

Kandungan elemen div boleh ditetapkan melalui fungsi text() dan html(). Fungsi text() digunakan untuk menetapkan kandungan teks div, seperti yang ditunjukkan di bawah:

var div = $("<div></div>");
div.text("This is my div.");

Kod di atas akan mencipta elemen div dengan teks "This is my div." Fungsi

html() digunakan untuk menetapkan kandungan HTML elemen div:

var div = $("<div></div>");
div.html("
This is my div.
");

Kod di atas akan mencipta elemen div yang mengandungi elemen perenggan.

3. Tetapkan gaya elemen div

Anda boleh menetapkan gaya elemen div melalui fungsi css(). Fungsi css() menerima objek JSON, yang mengandungi beberapa atribut gaya dan nilai yang sepadan, seperti yang ditunjukkan di bawah:

var div = $("<div></div>");
div.css({
  "color": "red",
  "background-color": "yellow"
});

Kod di atas akan mencipta elemen div dengan warna merah dan set warna latar belakang kuning.

4. Elemen div operasi

Anda boleh mengendalikan elemen div melalui pelbagai kaedah jQuery, seperti menambah, memadam, mengalih, menyembunyikan, menunjukkan, dsb. Berikut adalah beberapa kaedah biasa.

• Tambah elemen

Satu elemen boleh ditambah kepada elemen lain melalui fungsi appendTo(): ​​

var div1 = $("<div></div>");
var div2 = $("<div></div>");
div2.appendTo(div1);

Kod di atas akan mencipta dua elemen div dan tambah div2 sebagai elemen anak div1.

• Alih keluar elemen

Satu elemen boleh dipadamkan melalui fungsi remove():

var div = $("<div></div>");
div.remove();

Kod di atas akan mencipta elemen div dan memadamkannya .

• Pindahkan elemen

Melalui fungsi appendTo() dan prependTo(), anda boleh mengalihkan satu elemen ke elemen lain:

var div1 = $("<div></div>");
var div2 = $("<div></div>");
div2.appendTo(div1); // div2 移动到 div1 中

var div1 = $("<div></div>");
var div2 = $("<div></div>");
div2.prependTo(div1); // div2 移动到 div1 前面

• Sembunyikan elemen

Satu elemen boleh disembunyikan melalui fungsi hide():

var div = $("<div></div>");
div.hide();

Kod di atas akan mencipta elemen div dan menyembunyikannya.

• Tunjukkan elemen

Satu elemen boleh dipaparkan melalui fungsi show():

var div = $("<div></div>");
div.hide();
div.show();

Kod di atas akan mencipta elemen div dan menyembunyikannya , Kemudian tunjukkan sekali lagi.

Di atas adalah beberapa kaedah operasi elemen div yang biasa. Terdapat banyak kaedah lain untuk butiran, sila rujuk dokumentasi rasmi jQuery.

Ringkasnya, jQuery menyediakan pelbagai kaedah untuk menetapkan div secara dinamik, membolehkan pembangun menyelesaikan tugas pembangunan web dengan mudah. Saya harap kandungan yang diperkenalkan dalam artikel ini akan membantu pembaca.

Atas ialah kandungan terperinci tetapan dinamik jquery div. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!