JQUERY DOM總結

       一、訪問元素

  在訪問頁面時,需要與頁面中的元素進行交互式的操作。在操作中,元素的訪問是最頻繁、最常用的,主要包括對元素屬性、內容、值、CSS的操作。

  1、 元素屬性操作

  在jQuery中,可以對元素的屬性執行獲取、設置、刪除的操作,通過attr()方法可以對元素屬性執行獲取和設置操作,而removeAttr()方法則可以輕松刪除某一指定的屬性。

  1.1、 獲取元素的屬性

  獲取元素屬性的語法格式如下:

  [javascript]
attr(name)

  其中,參數name表示屬性的名稱。

  1.2、設置元素的屬性

  在頁面中,attr()方法不僅可以獲取元素的屬性值,還可以設置元素的屬性,其設置屬性語法格式如下所示:

  [javascript]
attr(key, value)

  其中,參數key表示屬性的名稱,value表示屬性的值。如果要設置多個屬性,也可以通過attr()方法實現,其語法格式如下所示:

  [javascript]
attr({key0:value0,key1:value1})

  另外,attr()方法還可以綁定一個function()函數,通過該函數返回的值作為元素的屬性值,其語法格式如下所示:

  [javascript]
?attr(key,function(index))

  其中,參數index為當前元素的索引號,整個函數返回一個字符串作為元素的屬性值。

  1.3、刪除元素的屬性

  jQuery中通過attr()方法設置元素的屬性後,使用removeAttr()方法可以將元素的屬性刪除,其使用的語法格式為:

  [javascript]
removeAttr(name)

  其中,參數name為元素屬性的名稱。

  2、 元素內容操作

  在jQuery中,操作元素內容的方法包括html()和text()。前者與JavaScript中的innerHTML屬性類似,即獲取或設置元素的HTML內容;後者類似於JavaScript中的innerHTML屬性,即獲取或設置元素的文本內容。二者的格式與區別如下表所示。

  html()和text()方法的區別語法格式參數說明功能描述

  html()無參數用於獲取元素的HTML內容

  html(val)val參數為元素的HTML內容用於設置元素的HTML內容

  text()無參數用於獲取元素的文本內容

  text(val)val參數為元素的文本內容用戶設置元素的文本內容

  說明:html()方法僅支持XHTML的文檔,不能用於XML文檔,而text()則既支持HTML文檔,也支持XML文檔。

  3、 獲取或設置元素值

  在jQuery中,如果要獲取元素的值,是通過val()方法實現的,其語法格式如下所示:

  [javascript]
val(val)

  其中,如果不帶參數val,則是獲取某元素的值;反之,則是將參數val的值賦給某元素,即設置元素的值。該方法常用於獲取或設置對象的值。

  另外,通過val()方法還可以獲取select標記中的多個選項值,其語法格式如下所示:

  [javascript]
val().join(",")

  4、 元素樣式操作

  在頁面中,元素樣式的操作包括:直接設置樣式、增加CSS類別、類別切換、刪除類別幾部分。

  4.1、直接設置元素樣式值

  在jQuery中,可以通過css()方法為某個指定的元素設置樣式值,其語法格式如下所示:

  [html]
css(name, value)

  其中,name為樣式名稱,value為樣式的值。

  4.2、增加CSS類別

  通過addClass()方法增加元素類別的名稱,其語法格式如下:

  [html]
addClass(class)

  其中,參數class為類別的名稱,也可以增加多個類別的名稱,隻需要用空格將其隔開即可,其語法格式為:

  [html]
addClass(class0 class1 …)

  註意:使用addClass()方法僅是追加樣式類別,即它還保存原有的類別。

  4.3、類別切換

  通過toggleClass()方法切換不同的元素類別,其語法格式如下:

  [html]
toggleClass(class)

  其中,參數class為類別名稱,其功能是當元素中含有名稱為class的CSS類別時,刪除該類別,否則增加一個該名稱的CSS類別。

  4.4、刪除類別

  與增加CSS類別的addClass()方法相對應,removeClass()方法則用於刪除類別,其語法格式如下:

  [html]
removeClass(class)

  其中,參數class為類別名稱,該名稱是可選項,當選該名稱時,則刪除名稱是class的類別,有多個類別時用空格隔開。如果不選名稱,則刪除元素中的所有類別。

  如果要刪除p標記是cls0的類別,可以使用如下的代碼:

  [javascript]
$("p").removeClass("cls0");

  註意:toggleClass()方法可以實現類別間的切換,而css()或addClass()方法僅是增加新的元素樣式,並不能實現類別的切換功能。

  二、創建節點元素

  我們知道,整個頁面是一個DOM模型,頁面中的各元素通過模型的節點相互關聯形成樹狀,因此,如果要在頁面中增加某個元素,隻需要找到元素的上級節點,通過函數$(html)完成元素的創建後,增加到該節點中。

  函數$()用於動態創建頁面元素,其語法格式如下:

  [javascript]
$(html)

  其中,參數html表示用於動態創建DOM元素的HTML標記字符串,即如果要在頁面中動態創建一個p標記,並設置其內容和屬性,可以加入如下代碼:

  [javascript]
var $p = $("WriteLess Do More");

  $("body").append($p);

  執行上述代碼後,將在頁面文檔body中創建一個p標記,其內容為“Write Less Do More”,屬性title的值為“jQuery 理念”。

  三、插入節點

  在頁面中動態創建元素需要執行節點的插入或追加操作。而在jQuery中,有多種方法可以實現該功能,append()方法僅是其中之一,按照插入元素的順序來分,可以分為內部和外部兩種插入方法。下面將分別對這些方法進行詳細介紹。

  3.1、 內部插入節點方法

  內部插入節點的方法如下表所示:

  內部插入節點語法格式參數說明功能描述

  append(content)content表示追加到目標中的內容向所選擇的元素內部插入內容

  append(function(index, html))通過function函數返回追加到目標中的內容想所選擇的元素內部插入function函數所返回的內容

  appendTo(content)content表示被追加的內容把所選擇的元素追加到另一個指定的元素集合中

  prepend(content)content表示插入目標元素內部前面的內容向每個所選擇的元素內部前置內容

  prepend(function(index, html))通過function函數返回插入目標元素內部前面的內容向所選擇的元素內部前置function函數所返回的內容

  prependTo(content)content表示用於選擇元素的jQuery表達式將所選擇的元素前置到另一個指定的元素集合中

  3.2、 外部插入節點方法

  外部插入節點語法格式參數說明功能描述

  after(content)content表示插入目標元素外部後面的內容向所選擇的元素外部後面插入內容

  after(function)通過function函數返回插入目標外部後面的內容向所選擇的元素外部後面插入function函數所返回的內容

  before(content)content表示插入目標元素外部前面的內容向所選擇的元素外部前面插入內容

  before(function)通過function函數返回插入目標外部前面的內容向所選擇的元素外部前面插入function函數所返回的內容

  insertAfter(content)content表示插入目標元素外部後面的內容將所選擇的元素插入另一個指定的元素外部後面

  insertBefore(content)content表示插入目標元素外部前面的內容將所選擇的元素插入另一個指定的元素外部前面

  四、復制節點

  在頁面中,有時需要將某個元素節點復制到另外一個節點後,如購物網站中購物車的設計。在傳統的javaScript中,需要編寫較為復雜的代碼,而在jQuery中,可以通過方法clone()輕松實現,該方法的語法格式為:

  [javascript]
clone()

  其功能為復制匹配的DOM元素並且選中復制成功的元素,該方法僅是復制元素本身,被復制後的新元素不具有任何元素行為。如果需要在復制時將該元素的全部行為也進行復制,可以通過方法clone(true)實現,其格式為:

  [javascript]
clone(true);

  其中的參數設置為true就可以復制元素的所有事件處理。

  五、替換節點

  在jQuery中,如果要替換元素中的節點,可以使用replaceWith()和replaceAll()這兩種方法,其語法格式分別如下:

  [javascript]
replaceWith(content)

  該方法的功能是將所有選擇的元素替換成指定的HTML或DOM元素,其中參數content為被所選擇元素替換的內容。

  [javascript]
replaceAll(selector)

  該方法的功能是將所有選擇的元素替換成指定selector的元素,其中參數selector為需要被替換的元素。

  註意:replaceWith()與replaceAll()方法都可以實現元素節點的替換,二者最大的區別在於替換字符的順序,前者是用括號中的字符替換所選擇的元素,後者是用字符串替換括號中所選擇的元素。同時,一旦完成替換,被替換元素中的全部事件都將消失。

  六、包裹節點

  在jQuery中,不僅可以通過方法替換元素節點,還可以根據需求包裹某個指定的節點,對節點的包裹也是DOM對象操作中很重要的一項,其與包裹節點相關的全部方法如下表所示:

  包裹節點語法格式參數說明功能描述

  wrap(html)html參數為字符串代碼,用於生成元素並包裹所選元素把所有選擇的元素用其他字符串代碼包裹起來

  wrap(elem)elem參數用於包裝所選元素的DOM元素把所有選擇的元素用其他DOM元素包裝起來

  warp(fn)fn參數為包裹結構的一個函數把所有選擇的元素用function函數返回的代碼包裹起來

  unwrap()無參數移除所選元素的父元素或包裹標記

  warpAll(html)html參數為字符串代碼,用於生成元素並包裹所選元素把所有選擇的元素用單個元素包裹起來

  warpAll(elem)elem參數用於寶藏所選元素的DOM元素把所有選擇的元素用單個DOM元素包裹起來

  warpInner(html)html參數為字符串代碼,用於生成元素並包裹所選元素把所有選擇的元素的自內容(包括文本節點)用字符串代碼包裹起來

  warpInner(elem)elem參數用於包裝所選元素的DOM元素把所有選擇的元素的子內容(包括文本節點)用DOM元素包裹起來

  warpInner(fn)fn參數為包裹結構的一個函數把所有選擇的元素的自內容(包括文本節點)用function函數返回的代碼包裹起來

  在上述表格中,warp(html)與wrapInner(html)方法較為常用,前者包裹外部元素,後者包裹元素內部的文本字符。

  七、遍歷元素

  在DOM元素操作中,有時需要對同一標記的全部元素進行統一操作。在傳統的JavaScript中,先獲取元素的總長度,然後,以for循環語句,遞減總長度,訪問其中的某個元素,代碼相對復雜;而在jQuery中,可以直接使用each()方法實現元素的遍歷。其語法格式如下:

  [javascript]
each(callback)

  其中,參數callback是一個function函數,該函數還可以接受一個形參index,此形參為遍歷元素的序號(從0開始);如果需要訪問元素中的屬性,可以借助形參index,配合this關鍵字來實現元素屬性的設置或獲取。

  八、刪除元素

  在DOM操作頁面時,刪除多餘或指定的頁面元素是非常必要的,jQuery提供瞭兩種可以刪除元素的方法,即remove()和empty()。嚴格來說,empty()方法並非真正意義上的刪除,使用該方法,僅僅可以清空全部的節點或節點所包括的所有後代元素,並非刪除節點和元素。

  remove()方法的語法格式如下:

  [javascript]
remove([expr])

  其中,參數expr為可選項,如果接受參數,則該參數為篩選元素的jQuery表達式,通過該表述式獲取指定的元素,並進行刪除。

  empty()方法的語法格式如下:

  [javascript]
empty()

  其功能為清空所選擇的頁面元素或所有的後代元素。

發佈留言