jQuery基礎 二 DOM篇

2021-08-16 19:43:15 字數 2453 閱讀 6650

//通過jquery生成div元素節點

var div = $("動態建立div元素節點

(爹).prepend(大兒子)   主動收乙個大兒子

(大兒子).prependto(爹)   主動來認爹當大兒子

$("button").on('click', function() )
remove會刪除div,empty只是清空了div的內容,div本身還存在。就好像empty只是把可樂倒了裝可樂的瓶子還留著,remove直接把可樂瓶一起丟了

detach是剪下的話,clone就是複製了 

with是受  a.with.b 就是a被b替換

all是攻   b.all.a 就是b把a替換

在集合中匹配的每個元素周圍包裹乙個html結構

.remove()是自殺,.empty()是自宮, 而這個unwrap就是自**

用wrap也可以給所有p元素增加div,但不是同乙個div。而wrapall能給所有p元素增加乙個共同的div

記住:wrap()穿外套,wrapinner()穿內衣!

$(".aaron1").on('click', function() )

$("#bt2").click(function() )
.children() 找兒子

之前的:

.detach() 隱身

.remove 自殺

.empty 身體被掏空

.clone 複製 (true全複製 false 淺複製,無事件)

.replacewith 刪除並替換節點(結合.replaceall()來記)

.wrap 每個人加個爸爸

.unwrap 爸爸沒了

.wrapall 所有人加個爸爸

.wrapall(function)每個人加個爸爸

.wrapinner 加個兒子

$("button:last").click(function() )
.children() 找兒子

.find() 找後代

$("button:last").click(function() )
.closest(),首先從本身開始向上匹配,若匹配到符合要求的第乙個,即停止匹配。

.parents(),從元素父級一直向上匹配,找出所有匹配的符合要求元素。

$("button:last").click(function() )

$("button:last").click(function() )

$("button:last").click(function() )

$("button:first").click(function() )

$("button:first").click(function() )

})

.html(),.text(),.val()的區別:

.html(),.text(),.val()

三種方法都是用來讀取選定元素的內容;只不過

.html()

是用來讀取元素的

html

內容(包括

html

標籤),

.text()

用來讀取元素的純文字內容,包括其後代元素,

.val()

是用來讀取表單元素的

"value"

值。其中

.html()

和.text()

方法不能使用在表單元素上,而

.val()

只能使用在表單元素上;另外

.html()

方法使用在多個元素上時,只讀取第乙個元素;

.val()

方法和.html()

相同,如果其應用在多個元素上時,只能讀取第乙個表單元素的

"value"

值,但是

.text()

和他們不一樣,如果

.text()

應用在多個元素上時,將會讀取所有選中元素的文字內容。

jQuery基礎篇(二)DOM

我們可以通過以下語句來建立乙個新的標籤。動態建立元素後還需要將節點放入到文字中。a.prepend b 將b新增到a中,並設定為第乙個a的子元素 a.prependto b 將a新增到b中,並設定為第乙個b的子元素 另一組節點插入方法 after before insertafter insertb...

jQuery基礎 DOM節點操作

如 p id name a href p 增加環繞節點 方法說明 wrap 用指定結構的元素包裹元素 wrapall 用指定結構的元素包裹多個元素 wrapinner 用指定結構元素包裹元素的內容 節點內部插入 方法說明 向每個匹配元素內部的最後面新增元素 將所有匹配的元素追加到指定的元素中 pre...

jQuery基礎之DOM和jQuery之間的轉換

引言 jquery物件 通過jquery包裝dom物件後產生的物件。dom物件不可使用jquery物件的方法。同理jquery物件也不可使用dom物件的方法。例如 foo html 這是jquery物件的使用 它的功能等同於 document.getelementbyid foo innerhtml...