jquery menambah elemen

Sangat mudah dan cekap menggunakan jQuery untuk menambah, memadam, mengubah suai dan menyemak elemen Ia boleh memberikan kami pelbagai fungsi API untuk membantu kami melaksanakan halaman HTML dinamik dengan mudah.

1. Cara menambah elemen dalam Jquery:

1. tambah(): Tambahkan elemen baharu pada penghujung elemen anak bagi elemen yang ditentukan.
2. prepend(): Menambah elemen baharu pada kepala elemen anak bagi elemen yang ditentukan.
3. after(): Masukkan elemen baharu selepas elemen yang ditentukan.
4. before(): Masukkan elemen baharu sebelum elemen yang ditentukan.

2. Cara memadamkan elemen dalam Jquery:

1. move(): Padamkan elemen yang ditentukan dan semua nod anaknya.
2. empty(): Kosongkan semua nod anak bagi elemen yang ditentukan (tetapi kekalkan elemen itu sendiri).

3. Kaedah mengubah suai elemen dalam Jquery:

1. text(): Tetapkan atau dapatkan kandungan teks elemen yang ditentukan.
2. html(): Tetapkan atau dapatkan kandungan HTML elemen yang ditentukan.
3. attr(): Tetapkan atau dapatkan nilai atribut bagi elemen yang ditentukan.
4. val(): Tetapkan atau dapatkan nilai elemen borang.

4. Kaedah menanyakan elemen dalam Jquery:

1. find(): Cari elemen anak mengikut pemilih.
2. parent(): Cari elemen induk bagi elemen yang ditentukan.
3. adik-beradik(): Cari semua elemen adik-beradik bagi elemen yang ditentukan.
4. eq(): Mengembalikan elemen pada kedudukan indeks yang ditentukan.

Di atas ialah kaedah yang biasa digunakan untuk menambah, memadam, mengubah suai dan menyemak elemen dalam Jquery. Mari lihat beberapa contoh praktikal di bawah.

Sebagai contoh, kami mempunyai coretan kod HTML:

<div id="myDiv">
  <p>这是一个段落。</p>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
  </ul>
</div>

Kini kami boleh menggunakan Jquery untuk mengendalikan coretan kod ini.

1. Gunakan kaedah append() untuk menambah elemen baharu:

$('#myDiv ul').append('<li>列表项4</li>');
//将新的列表项添加到myDiv下的ul元素中

2. Gunakan kaedah after() untuk menambah elemen baharu selepas elemen yang ditentukan:

$('#myDiv ul li:first-child').after('<li>列表项0</li>');
//将新的列表项添加到myDiv下的ul元素中，插在第一个列表项之前

3. Gunakan kaedah buang () memadamkan elemen yang ditentukan dan semua nod anaknya:

$('#myDiv ul li:last-child').remove();
//删除myDiv下的ul元素的最后一个列表项

4. Gunakan kaedah text() untuk mengubah suai kandungan teks elemen yang ditentukan:

$('#myDiv p').text('这是修改后的段落内容。');
//将myDiv下的p元素的文本内容修改为“这是修改后的段落内容。”

5. Gunakan kaedah attr() untuk menetapkan nilai Atribut elemen:

$('#myDiv ul').attr('class', 'myList');
//将myDiv下的ul元素的class属性值修改为“myList”

6 Gunakan kaedah find() untuk mencari elemen anak:

$('#myDiv').find('li');
//查找myDiv下的所有li元素

7 () kaedah untuk mengembalikan elemen pada kedudukan indeks yang ditentukan:

$('#myDiv ul li').eq(1);
//返回myDiv下的ul元素的第二个列表项（索引位置为1）

Melalui contoh di atas, kita dapat melihat bahawa kesederhanaan dan kemudahan penggunaan Jquery membolehkan kita menyelesaikan penambahan, pemadaman, pengubahsuaian dan pertanyaan dengan cepat operasi elemen halaman HTML, yang sangat meningkatkan kecekapan pembangunan kami dan membolehkan kami memberi lebih tumpuan pada pelaksanaan fungsi dan interaksi.

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