jQuery系列-DOM操作(理論)

1DOM操作JQuery系列2回顧:input可以匹配哪些元素？

所有input,textarea,select和button元素修改元素樣式有幾種方法？

css(“樣式名”,”樣式值”)

attr(“style”,”樣式值”) addClass(“css類”)/removeClass(“css類”); attr(“class”,”css類”)3本章任務(wù)使用jQuery操作DOM進一步了解jQuery事件

4使用jQuery操作DOM添加新元素刪除元素替換元素復(fù)制元素本章目標(biāo)5DOM操作創(chuàng)建新元素

例：

$(“<div></div>”)或者$(“<div/>”)

$(“<div><p>新元素</p></div>”)

注意：

HTML代碼中標(biāo)簽必須完整

HTML代碼中標(biāo)簽不要使用大寫字母

語法：$(“HTML代碼”)6DOM操作追加元素添加兒子添加兄弟自己.append(小兒子)或者小兒子.appendTo(自己)自己.prepend(大兒子)或者大兒子.prependTo(自己)自己.after(弟弟)或者弟弟.insertAfter(自己)自己.before(哥哥)或者哥哥.insertBefore(自己)如果添加的元素為已有元素，則變?yōu)樵匾苿印?DOM操作刪除元素empty()

刪除匹配的元素集合中所有的子節(jié)點。remove([expr])

從DOM中刪除所有匹配的元素。

detach([expr])

從DOM中刪除所有匹配的元素。remove/detach所有綁定的事件、附加的數(shù)據(jù)等不會/都會保留下來。8DOM操作替換元素replaceWith(content)

將所有匹配的元素替換成指定的HTML或DOM元素。replaceAll(selector)

用匹配的元素替換掉所有selector匹配到的元素。

9DOM操作復(fù)制元素clone()

克隆匹配的DOM元素并且選中這些克隆的副本。clone(true)

克隆匹配的DOM元素以及其所有的事件處理并且選中這些克隆的副本。

10事件事件處理bind(type,[data],fn)

為每個匹配元素的特定事件綁定事件處理函數(shù)。

參數(shù)類型說明typeString含有一個或多個事件類型的字符串，比如"click"或"submit"data(可選)Object作為event.data屬性值傳遞給事件對象的額外數(shù)據(jù)對象fnFunction綁定到每個匹配元素的事件上面的處理函數(shù)11事件事件對象fn這個參數(shù)的回調(diào)函數(shù)還可以接受一個參數(shù)。當(dāng)這個函數(shù)被調(diào)用時，一個JavaScript事件對象會作為一個參數(shù)傳進來。

屬性/方法說明pageX/pageY鼠標(biāo)點擊時相對于頁面的坐標(biāo)keyCode對于keyup和keydown事件返回被按下的鍵.不區(qū)分大小寫,a和A都返回65.

對于keypress事件請使用which屬性,因為which屬性跨瀏覽時依然可靠.which對于鍵盤事件,返回觸發(fā)事件的鍵的數(shù)字編碼.對于鼠標(biāo)事件,返回鼠標(biāo)按鍵號(1左,2中,3右).12事件事件處理one(type,[data],fn)

為每一個匹配元素的特定事件（像click）綁定一個一次性的事件處理函數(shù)。unbind([type],[fn])

bind()的反向操作，從每一個匹配的元素中刪除綁定的事件。

如果沒有參數(shù)，則刪除所有綁定的事件。

13事件事件委托l(wèi)ive(type,[data],fn)

給所有匹配的元素附加一個事件處理函數(shù)，即使這個元素是以后再添加進來的也有效。

這個方法是基本是的.bind()方法的一個變體。使用.bind()時，選擇器匹配的元素會附加一個事件處理函數(shù)，而以后再添加的元素則不會有。為此需要再使用一次.bind()才行。