細說 jQuery DOM操作篇（二） - DOM 樹操作

Anchorer 發布于2019-08-21 12:20 / 1617人閱讀

摘要：此時，點擊新建的將會觸發。設置元素內容的方法則使用上述兩種方法，將新內容作為參數傳遞即可，例如修改上例中的文本內容方法同理。

我們知道通過 $() 函數可以訪問文檔中的元素，并返回一個 jQuery 對象，并且通過一系列方法，我們可以修改元素的樣式和內容，實際上，我們還可以通過該函數做更多的事情，例如添加、刪除、復制等操作來改變 DOM 樹的結構。

創建元素

我們可以通過 $() 函數來直接創建元素，例如

$("new");

但僅僅創建了元素，還沒有插入到頁面中來，接下來介紹插入方法。

插入元素

最基本的四種插入方法如下：

1.insertBefore 指定元素外部，前面
2.insertAfter 指定元素外部，后面
3.prependTo 指定元素內部，前面
4.appendTo 指定元素內部，后面

假設現有元素為一個 div，如下：

origin

將上例中的 span 插入到 div 內部的前面，可以這樣操作：

$("new").prependTo("div");

結果為：

neworigin

反向插入元素

我們也可以反向插入元素，對應的方法為：

1.insertBefore - before
2.insertAfter - after
3.prependTo - prepend
4.appendTo - append

對于上例，使用反向插入元素的方法為：

$("div").prepend("new");

結果是一致的。

移動元素

對于已經存在的元素使用上述的四類方法，則起到移動元素的效果，假設 span 元素已經存在在 div 內部如下：

neworigin

我們嘗試將 span 移至 div 外部的后面，如下：

$("span").insertAfter("div");

移動后的效果為：

包裹元素

包裹元素即給元素添加一個外層元素，假設現在有兩個 span 如下：

A
B

我們希望給每個 span 都包裹一個 li，從而實現列表化，此時我們可以使用 wrap 方法:

$("span").wrap("");

結果為：

如果我們希望用一個 ul 包裹所有 span 元素，那么可以使用 wrapAll 方法：

$("span").wrapAll("
").wrap("");

克隆元素

克隆元素的方法為 clone，使用起來很簡單，但是這里有一點需要注意，克隆元素時，綁定在該元素極其后代元素的事件是否也會被克隆呢，默認情況下是不會的，但是我們可以將其設置為同時克隆。舉例如下：

clone

綁定點擊事件給 span：

  $("span").click(function() {
    alert("hello");//
  });

克隆 span 并插入到 div 內部：

$("span").clone().appendTo("div");

但此時點擊新建的 span 并不能觸發 alert，因為 clone 方法默認未將綁定的事件克隆，為了達到事件克隆的效果，只需要將參數設置為 true 即可。

$("span").clone(true).appendTo("div");

此時，點擊新建的 span 將會觸發 alert。

獲取、設置元素內容

假設有 div 如下：

content

我們希望獲取 div 元素的內容，可以使用 html 方法。

$("div").html()

返回結果為："content"。

我們也可以使用 text 方法：

$("div").text()

返回結果為："content"。
所以很明顯，html 方法和 text 方法的區別在于 text 方法只獲取純文本內容，所以 HTML 標簽都將被忽略。

設置元素內容的方法則使用上述兩種方法，將新內容作為參數傳遞即可，例如修改上例中的文本內容：

$("div").text("new content")

html 方法同理。

參考

http://book.douban.com/subject/24669823/

云服務器 GPU云服務器 Dom操作 dom對象操作 DOM交互操作 PHP操作DOM

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/87542.html

細說 jQuery 元素篇（一） - 理解 DOM

摘要：最強大的特性之一就是簡化了對元素的操作。從圖中，我們可以看出元素中父元素子元素之間的關系。被封裝到對象中的元素會被自動地，隱式地循環遍歷。訪問從上可知，返回的是對象，但是我們有時也希望直接對元素進行操作。 DOM - Document Object Model，即文檔對象模型，它通過對象樹來展示 HTML 代碼。jQuery 最強大的特性之一就是簡化了對 DOM 元素的操作。 DOM...

everfight 2019-08-19 14:52 評論0 收藏0
細說 jQuery 元素篇（二） - 選擇符

摘要：為了更方便對元素操作，提供了完整的選擇符體系，可以分為選擇符屬性選擇符以及自定選擇符。選擇符幾乎支持到規范中的所有選擇符。介紹個比較有用的自定義選擇符選擇符。為了更方便對 DOM 元素操作，jQuery 提供了完整的選擇符體系，可以分為 CSS 選擇符、屬性選擇符以及自定選擇符。 CSS 選擇符 jQuery 幾乎支持 CSS1 到 CSS3 規范中的所有選擇符。舉例如下： ...

104828720 2019-08-19 14:51 評論0 收藏0
細說 jQuery 事件篇（二） - 處理簡單事件

摘要：我們可以利用可以對用戶發起的事件進行處理，這里以樣式轉換為例來說明。其他類似的操作事件都可以通過這個方法，將處理事件的程序綁定到同名事件上面。我們可以利用 jQuery 可以對用戶發起的事件進行處理，這里以樣式轉換為例來說明。增添樣式基于用戶的事件，對特定的 DOM 元素樣式進行轉換是 jQuery 處理事件中比較常見的情形，舉例說明，當用戶點擊輸入框后，會增添 highli...

ckllj 2019-08-19 14:51 評論0 收藏0
細說 jQuery DOM操作篇（一） - 屬性操作

摘要：之前已經知道可以使用和等方法來修改類屬性，今天來具體討論下各種屬性的操作。非類屬性有時候，我們還需要對一些其他的屬性進行操作，例如，，等等。例如單選按鈕的屬性。之前已經知道可以使用 addClass 和 removeClass 等方法來修改類屬性，今天來具體討論下各種屬性的操作。非類屬性有時候，我們還需要對一些其他的屬性進行操作，例如 href，title，id 等等。這里，...

ideaa 2019-08-19 14:52 評論0 收藏0
jQuery基礎（二）DOM篇

摘要：將匹配元素集合的父級元素刪除，保留自身和兄弟元素，如果存在在原來的位置。方法查找指定元素集合中每一個元素的同輩元素。每次回調函數執行時，會傳遞當前循環次數作為參數從開始計數。 DOM節點的創建先介紹下需要用到的瀏覽器提供的一些原生的方法（這里不處理低版本的IE兼容問題）創建流程比較簡單，大體如下：創建節點(常見的：元素、屬性和文本) 添加節點的一些屬性加入到文檔中流程中涉及的一...

Harpsichord1207 2019-08-22 10:42 評論0 收藏0