介紹

DOM是Document Object Modeule的縮寫，一般來說，DOM操作分成3個方面。

1、DOM Core

DOM Core并不專屬于javascript，任何一種支持DOM的程序設(shè)計語言都可以使用它，用途也遠(yuǎn)不止僅限于網(wǎng)頁，也可以用來處理任何一種使用標(biāo)記語言編寫出來的文檔，如XML。

例如：document,getElementsByTagName(“form”);//使用DOM Core來獲取表單對象的方法。

2、HTML-DOM

在使用Javascript和DOM為HTML文件編寫腳本時，有許多屬于HTML-DOM的屬性，HTML-DOM的出現(xiàn)甚至比DOM Core還要早，他提供了一些更簡明的記號來描述各種HTML元素的屬性。

例如：document.forms //HTML-DOM提供了一個forms對象。

PS:可以看出，獲取對象、屬性即可以用DOM Core來實(shí)現(xiàn)民，也可以用HTML-DOM實(shí)現(xiàn)。

3、CSS-DOM

CSS-DOM是針對CSS的操作,在javascript中，CSS-DOM主要的作用是獲取和設(shè)置style對象的各種屬性，由此達(dá)到網(wǎng)頁呈現(xiàn)出各種不同的效果.

例如：element.style.color=”red”;//設(shè)置某元素的字體顏色的方法。

常用方法

1.查找元素節(jié)點(diǎn)

var $li = $(“ul li:eq(0)”);//獲取ul標(biāo)記下的第一個li,也可以寫成 $(“#ulID li:eq(0)”);

2.查找元素屬性

利用jquery的attr()方法來獲取元素的各種屬性的值，attr()方法的參數(shù)可以是一個，也可以是兩個。

當(dāng)參數(shù)是一個時，則是要查詢的屬性名稱。

當(dāng)參數(shù)是兩個時，則可以設(shè)置屬性的值。

alert($(“#id”).attr(“title”)); //輸出元素的title屬性.一個參數(shù)

$(“#id”).attr(“title”,”改變title值”); //改變元素的title屬性值.二個參數(shù)

3.添加元素節(jié)點(diǎn)

$(html) 簡單說明一下$(html)方法會根據(jù)傳入的html標(biāo)記字符串創(chuàng)建一個dom對象，并將這個dom對象包裝成一個jquery對象返回，總之就是把標(biāo)記所有html代碼都放到$()工廠里面就行了！

例：

var $htmlLi = $(”<li title='香蕉'>香蕉</li>”);//創(chuàng)建DOM對象
var $ul = $(“ul”);//獲取UL對象
$ul.append($htmlLi); //將$htmlLi追加到$ul元素的li列表

下面列出部分插入節(jié)點(diǎn)的方法

好了，不要齋看，自己動手試試吧:)

4.刪除元素節(jié)點(diǎn)

由于我們需要經(jīng)常動態(tài)去改變DOM元素，因此Jquery提供了兩種刪除節(jié)點(diǎn)的方法，即remove()和empty();

4.1 remove()方法

$(“p”).remove();// 我們可以獲取到要刪除的元素，然后調(diào)用remove()方法

$(“ul li:eq(0)”).remove().appendTo(“ul”);// 刪除ul下面的第一個li標(biāo)記，然后再把刪除的li標(biāo)記重新加到ul里面，remove()方法返回刪除元素的引用，這時你可以繼續(xù)使用

$(“ul li”).remove(“l(fā)i[title!=ABC]“);//remove可以接受通過參數(shù)來選擇性的刪除符合條件的元素;

4.2 empty()方法

嚴(yán)格來講，empty()方法并不是刪除元素，而是清空

例：

HTML代碼

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

JQuery代碼

$(“ul li:eq(0)”).empty();

結(jié)果

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

記住，只會清空內(nèi)容，不會請空屬性;

以上這篇Jquery元素追加和刪除的實(shí)現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論