Bagaimana untuk melaksanakan penambahan DOM jquery, pemadaman, pengubahsuaian dan semak

jQuery ialah salah satu perpustakaan JavaScript yang paling popular pada masa ini. Ia mengandungi satu siri API untuk memudahkan manipulasi elemen DOM kami. Dalam jQuery, kita boleh mendapatkan atau memanipulasi elemen DOM melalui kaedah yang serupa dengan pemilih CSS, menjadikan keseluruhan operasi sangat mudah dan pantas.

Artikel ini akan memperkenalkan kaedah penambahan, pemadaman, pengubahsuaian dan carian DOM yang biasa digunakan dalam jQuery. Saya harap pembaca dapat memahami dengan lebih jelas tentang operasi DOM jQuery.

1. Dapatkan elemen DOM

Dalam jQuery, kita boleh menggunakan pemilih CSS biasa untuk mendapatkan elemen DOM, seperti:

$('p') // 获取所有的p标签
$('.img') // 获取class名为img的元素
$('#box') // 获取ID为box的元素

Selain daripada pilihan biasa ini Dalam Selain pelayar, jQuery juga menyediakan satu siri kaedah untuk mendapatkan elemen DOM. Sebagai contoh, kita boleh menggunakan kaedah find() untuk mencari unsur keturunan unsur tertentu:

$('.container').find('.box') // 获取class名为container的元素中所有class名为box的后代元素

Kita juga boleh menggunakan kaedah parent() untuk mendapatkan unsur induk bagi unsur tertentu:

$('.box').parent() // 获取所有class名为box的元素的父元素

2. Tambah elemen

Apabila melakukan operasi DOM, kita selalunya perlu menambah elemen baharu. jQuery menyediakan satu siri kaedah untuk menambah elemen pada DOM.

1. append() dan appendTo()

digunakan untuk menambah elemen anak pada elemen yang ditentukan, contohnya:

// 方法1
$('.container').append('<p>这是一个新的段落</p>');

// 方法2
$('<p>这是一个新的段落</p>').appendTo('.container');

2. prepend() dan prependTo()

digunakan untuk menambah sub-elemen pada elemen yang ditentukan, tetapi di hadapan sub-elemen, contohnya:

// 方法1
$('.container').prepend('<p>这是一个新的段落</p>');

// 方法2
$('<p>这是一个新的段落</p>').prependTo('.container');

3. after() dan insertAfter()

digunakan untuk menambah unsur adik beradik selepas elemen yang ditentukan, contohnya:

// 方法1
$('.box').after('<div class="box2">这是一个新的盒子</div>');

// 方法2
$('<div class="box2">这是一个新的盒子</div>').insertAfter('.box');

4. before() dan insertBefore()

digunakan untuk menambah elemen adik beradik di hadapan elemen yang ditentukan, contohnya:

// 方法1
$('.box').before('<div class="box2">这是一个新的盒子</div>');

// 方法2
$('<div class="box2">这是一个新的盒子</div>').insertBefore('.box');

3. Padam elemen

Selain menambah elemen ke DOM, kita juga sering perlu memadamkan elemen dalam DOM. jQuery juga menyediakan satu siri kaedah untuk memadam elemen.

1. remove()

Kaedah ini digunakan untuk memadam elemen tertentu, contohnya:

$('.box').remove() // 删除所有class名为box的元素

2. empty()

Kaedah ini digunakan untuk memadam semua elemen anak di bawah elemen yang ditentukan, contohnya:

$('.container').empty() // 删除class名为container的元素下所有子元素

3. Ubah suai elemen

Mengubah suai elemen DOM juga menjadi masalah kita sering perlu fikirkan. Dalam jQuery, kita boleh mengubah suai atribut, teks, gaya, dsb. elemen.

1. Ubah suai atribut

Kita boleh menggunakan kaedah attr() untuk mengubah suai atribut unsur, contohnya:

$('.box').attr('title', '新的标题') // 修改所有class名为box的元素的title属性

2. Ubah suai teks

Kita boleh menggunakan kaedah text() untuk mengubah suai teks elemen, contohnya:

$('.box').text('新的文本内容') // 修改所有class名为box的元素的文本

3. Ubah suai gaya

Kita boleh menggunakan kaedah css() untuk mengubah suai gaya elemen, contohnya:

$('.box').css('color', 'red') // 修改所有class名为box的元素的文本颜色为红色

4. Tetapkan atribut

Kita boleh menggunakan Kaedah prop() untuk menetapkan atribut elemen, contohnya:

$('input[type="checkbox"]').prop('checked', true) // 将所有type为checkbox的input元素的checked属性设置为true

Ringkasan

Artikel ini memperkenalkan kaedah penambahan, pemadaman, pengubahsuaian dan carian DOM yang biasa digunakan dalam jQuery I harap pembaca dapat memahami dengan lebih jelas tentang operasi DOM jQuery melalui artikel ini dan belajar daripadanya dalam projek sebenar. Sudah tentu, jQuery juga menyediakan beberapa kaedah lain yang berkuasa untuk memanipulasi DOM, dan pembaca boleh mengetahui lebih lanjut mengenainya melalui dokumentasi rasmi.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan penambahan DOM jquery, pemadaman, pengubahsuaian dan semak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!