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 JQueryKod $(“ul”).append(“ AA ”); Keputusan AA
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 JQueryKod $ (“ AA ”).appendTo (“ul”).; Résultats AA
Prépend()	Ajouter le contenu à l'intérieur de chaque élément correspondant	HTMLCode Haha JQueryCode $(“p”).prepend(“ABC”); Résultats ABCHaha
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 Haha JQueryCode $("ABC").prependTo.("p"); Résultats ABCHaha
Après()	insère du contenu après chaque élément correspondant, est après	HTMLCode AAA JQueryCode $(“p”).Après(“cc”); Résultats AAA cc
insertAfter()	est l'opposé de Après()	HTMLCode AAA JQueryCode $ ("cc").Après("p"); Résultats AAA cc
Avant()	Insérer du contenu avant chaque élément correspondant	HTMLCode AAA JQueryCode $("p"). Avant ("cc"); Résultats cc AAA
insertBefore()	est l'opposé de Avant()	HTMLCode AAA JQueryCode $ («cc») insertBefore («p»); Résultats cc AAA

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

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程序设计有所帮助。