Penjelasan terperinci tentang kaedah jQuery untuk menambah dan memadam elemen DOM_jquery

Artikel ini menganalisis kaedah jQuery untuk menambah dan mengalih keluar elemen DOM. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Pengenalan

DOM ialah singkatan daripada Document Object Modeule Secara umumnya, operasi DOM terbahagi kepada tiga aspek.

1. Teras DOM

DOM Core tidak eksklusif untuk javascript Mana-mana bahasa pengaturcaraan yang menyokong DOM boleh menggunakannya jauh melebihi halaman web sahaja.
Contohnya: document,getElementsByTagName("form"); //Gunakan DOM Core untuk mendapatkan objek borang.

2. HTML-DOM

Apabila menggunakan Javascript dan DOM untuk menulis skrip untuk fail HTML, terdapat banyak atribut yang dimiliki oleh HTML-DOM HTML-DOM muncul lebih awal daripada DOM Core Ia menyediakan beberapa tatatanda yang lebih ringkas untuk menerangkan pelbagai sifat elemen.
Contohnya:

Salin kod Kod adalah seperti berikut:

document.forms //HTML-DOM menyediakan objek forms .

PS: Dapat dilihat bahawa mendapatkan objek dan atribut boleh dilaksanakan menggunakan Teras DOM atau HTML-DOM.

3. CSS-DOM

CSS-DOM ialah operasi untuk CSS Dalam JavaScript, fungsi utama CSS-DOM adalah untuk mendapatkan dan menetapkan pelbagai atribut objek gaya, supaya halaman web boleh memaparkan pelbagai kesan.

Contohnya:

Salin kod Kod adalah seperti berikut:

element.style.color="red" ;//Settings Kaedah untuk menetapkan warna fon sesuatu elemen.

Kaedah biasa

1. Cari nod elemen

Salin kod Kod adalah seperti berikut:

var $li = $("ul li:eq(0)" );/ /Dapatkan li pertama di bawah teg ul, yang juga boleh ditulis sebagai $("#ulID li:eq(0)");

2. Cari atribut elemen

Gunakan kaedah attr() jquery untuk mendapatkan nilai pelbagai atribut elemen Parameter kaedah attr() boleh menjadi satu atau dua.

Apabila parameter adalah satu, ia adalah nama atribut yang akan ditanya.

Apabila terdapat dua parameter, anda boleh menetapkan nilai atribut.

alert($("#id").attr("title")); //输出元素的title属性.一个参数
$("#id").attr("title","改变title值"); //改变元素的title属性值.二个参数

3. Tambah nod elemen

$(html) Untuk menerangkan secara ringkas, kaedah $(html) akan mencipta objek dom berdasarkan rentetan tag html yang masuk, dan membungkus objek dom ke dalam objek jquery dan secara ringkasnya, ia akan meletakkan semua kod html teg. Hanya pergi ke kilang $()!

Contoh:

var $htmlLi = $(" <li title='香蕉'>香蕉</li>"); //创建DOM对象
var $ul = $("ul");  //获取UL对象
$ul.append($htmlLi); //将$htmlLi追加到$ul元素的li列表

Disenaraikan di bawah adalah beberapa kaedah memasukkan nod

Kaedah	Penerangan	Contoh
Lampirkan()	Tambahkan kandungan pada setiap elemen yang sepadan	HTMLKod ff6d136ddc5fdfeffaf53ff6ee95f185929d1f5ca49e04fdcb27f9465b944689 JQueryKod $(“ul”).append(“25edfb22a4f469ecb59f1190150159c6AAbed06894275b65c1ab86501b08a632eb”); Keputusan ff6d136ddc5fdfeffaf53ff6ee95f185 25edfb22a4f469ecb59f1190150159c6AAbed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689
tambahkepada()	Kaedah ini bertentangan dengan Lampirkan() a.Lampirkan(b) adalah untuk menggantikan b dilampirkan pada a, dan tambahkepada() ialah untuk ditambahkan b mengejar a dalam	HTMLKod ff6d136ddc5fdfeffaf53ff6ee95f185929d1f5ca49e04fdcb27f9465b944689 JQueryKod $ (“25edfb22a4f469ecb59f1190150159c6AAbed06894275b65c1ab86501b08a632eb”).appendTo (“ul”).; Résultats ff6d136ddc5fdfeffaf53ff6ee95f185 25edfb22a4f469ecb59f1190150159c6AAbed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689
Prépend()	Ajouter le contenu à l'intérieur de chaque élément correspondant	HTMLCode e388a4556c0f65e1904146cc1a846beeHaha94b3e26ee717c64999d7867364b1b4a3 JQueryCode $(“p”).prepend(“a4b561c25d9afb9ac8dc4d70affff419ABC0d36329ec37a2cc24d42c7229b69747a”); Résultats e388a4556c0f65e1904146cc1a846beea4b561c25d9afb9ac8dc4d70affff419ABC0d36329ec37a2cc24d42c7229b69747aHaha94b3e26ee717c64999d7867364b1b4a3
prependTo()	Cette méthode est opposée à Prepend() A Prepend (b) consiste à remplacer b est ajouté à a, et prependTo () doit être ajouté à b est précédé de a dans	HTMLCode e388a4556c0f65e1904146cc1a846beeHaha94b3e26ee717c64999d7867364b1b4a3 JQueryCode $("a4b561c25d9afb9ac8dc4d70affff419ABC0d36329ec37a2cc24d42c7229b69747a").prependTo.("p"); Résultats e388a4556c0f65e1904146cc1a846beea4b561c25d9afb9ac8dc4d70affff419ABC0d36329ec37a2cc24d42c7229b69747aHaha94b3e26ee717c64999d7867364b1b4a3
Après()	insère du contenu après chaque élément correspondant, est après	HTMLCode e388a4556c0f65e1904146cc1a846beeAAA94b3e26ee717c64999d7867364b1b4a3 JQueryCode $(“p”).Après(“a4b561c25d9afb9ac8dc4d70affff419cc0d36329ec37a2cc24d42c7229b69747a”); Résultats e388a4556c0f65e1904146cc1a846beeAAA94b3e26ee717c64999d7867364b1b4a3a4b561c25d9afb9ac8dc4d70affff419cc0d36329ec37a2cc24d42c7229b69747a
insertAfter()	est l'opposé de Après()	HTMLCode e388a4556c0f65e1904146cc1a846beeAAA94b3e26ee717c64999d7867364b1b4a3 JQueryCode $ ("a4b561c25d9afb9ac8dc4d70affff419cc0d36329ec37a2cc24d42c7229b69747a").Après("p"); Résultats e388a4556c0f65e1904146cc1a846beeAAA94b3e26ee717c64999d7867364b1b4a3a4b561c25d9afb9ac8dc4d70affff419cc0d36329ec37a2cc24d42c7229b69747a
Avant()	Insérer du contenu avant chaque élément correspondant	HTMLCode e388a4556c0f65e1904146cc1a846beeAAA94b3e26ee717c64999d7867364b1b4a3 JQueryCode $("p"). Avant ("a4b561c25d9afb9ac8dc4d70affff419cc0d36329ec37a2cc24d42c7229b69747a"); Résultats a4b561c25d9afb9ac8dc4d70affff419cc0d36329ec37a2cc24d42c7229b69747ae388a4556c0f65e1904146cc1a846beeAAA94b3e26ee717c64999d7867364b1b4a3
insertBefore()	est l'opposé de Avant()	HTMLCode e388a4556c0f65e1904146cc1a846beeAAA94b3e26ee717c64999d7867364b1b4a3 JQueryCode $ («a4b561c25d9afb9ac8dc4d70affff419cc0d36329ec37a2cc24d42c7229b69747a») insertBefore («p»); Résultats a4b561c25d9afb9ac8dc4d70affff419cc0d36329ec37a2cc24d42c7229b69747ae388a4556c0f65e1904146cc1a846beeAAA94b3e26ee717c64999d7867364b1b4a3

好了，不要斋看，自己动手试试吧:)

4.删除元素节点

由于我们需要经常动态去改变DOM元素，因此Jquery提供了两种删除节点的方法，即remove()和empty();

4.1 remove()方法

$("p").remove();// 我们可以获取到要删除的元素，然后调用remove()方法
$("ul li:eq(0)").remove().appendTo("ul");// 删除ul下面的第一个li标记，然后再把删除的li标记重新加到ul里面，remove()方法返回删除元素的引用，这时你可以继续使用
$("ul li").remove("li[title!=ABC]");//remove可以接受通过参数来选择性的删除符合条件的元素;

4.2 empty()方法

严格来讲，empty()方法并不是删除元素，而是清空

例：

HTML代码：

<ul>
<li title="AAA">AAA</li>
</ul>

JQuery代码：

复制代码 代码如下:

$("ul li:eq(0)").empty();

结果

<ul>
<li title="AAA"></li>
</ul>

记住，只会清空内容，不会请空属性;

更多关于jQuery操作DOM元素相关内容感兴趣的读者可查看本站专题：《jQuery操作DOM节点方法总结》

希望本文所述对大家jQuery程序设计有所帮助。