JQuery中DOM操作 一

2022-03-04 22:30:42 字數 1731 閱讀 8428

節點操作

1.插入節點,在jquery中插入的節點方法很多,可以滿足各種不同的節點插入的情況,根據不同的插

入方式分為:增加環繞節點、節點內部插入和外部插入三種方式

今天我們要講的是增加環繞節點,它有三個方法分別是 warp() 、warpall()和 warpinner()

一、warp() 方法 用指定結構的元素包裹元素  

hello

curel

world

當使用warp() 方法 ,指定用乙個div來包裹p元素,執行效果如下圖

二、warpall() 方法   用指定結構的元素包裹多個元素

hello

curel

world

當使用warpall() 方法,指定用乙個div來包裹p元素,效果如下圖

通過執行比較可以看出 warp() 方法是將每乙個p元素都用乙個div包裹起來,而 warpall() 方法則是將所有p元素用乙個div包裹起來。

上面例子中的p元素都是連續的,如果p元素不是連續warp() warpall() 方法 會出現什麼情況呢?

span textwaht about me?another one

$("

span

").wrap("

");

上面**中倆個span標籤被乙個strong 標籤隔開,我們先看warp()  方法的效果:

讓我們在看看 warpall() 方法

$("

span

").wrapall("

");

效果如下圖:

從圖中可以看到已經將第二個span 標籤和第乙個span 標籤放在一起呢。

三、warpinner() 方法

hello

curel

world

$("

p").wrapinner("

");

執行效果如下:

上述**使用 warpinner() 方法將所有p元素所喲文字都加粗,warpinner() 方法也可以指定巢狀的結構標籤來包裹指定元素的子元素

$("

body

").wrapinner("

")

上述**中body中的所有元素都用指定的巢狀結構包裹起來了。

還可以給結構指定樣式

如下圖:

$("

p").wrapinner("

");

上述**中p元素內容用 class為『red』的span 元素包裹  

同樣也可以dom方法建立標籤來包裹指定元素,如下圖:

$("

p").wrapinner(document.createelement("

b"));

jQuery中的DOM操作(一)

首先學習對dom中節點的一系列操作 1.查詢節點例 var li ul li eq 1 2.建立節點 建立元素,文字,屬性節點。例 var li 1 香蕉 3.插入節點 插入節點主要有一下幾種方法 prepend 向每個匹配的元素內部前置內容 after 在每個匹配的元素之後插入內容 before ...

jquery中DOM節點操作(一)

jquery中節點操作主要包括建立節點,插入節點,刪除節點,替換節點,複製節點以及包裹節點。1.建立節點 建立元素節點 建立文字節點 建立屬性節點 2.插入節點 向匹配元素的內部的後面追加內容 prepend 向匹配的元素的內部的前面追加指定的元素 prependto 將匹配的元素新增到指定的元素內...

jQuery中的DOM操作

三 jquery中的dom操作 3.2.1 查詢節點 1.查詢元素節點 var li ul li eq 1 獲取裡第2個節點 var li text li.text 獲取第二個元素節點的文字內容 2.查詢屬性節點 var para p 獲取節點 var p text para.attr title ...