系列DOM實(shí)際操作理論

1、系列DOM實(shí)際操作理論2回顧 :input可以匹配哪些元素？所有 input, textarea, select 和 button 元素 修改元素樣式有幾種方法？css(“樣式名”,”樣式值”)attr(“style”,”樣式值”)addClass(“css類”)/removeClass(“css類”);attr(“class”,” css類”)3本章任務(wù) 使用jQuery操作DOM 進(jìn)一步了解jQuery事件 4 使用jQuery操作DOM 添加新元素 刪除元素 替換元素 復(fù)制元素本章目標(biāo)5DOM操作 創(chuàng)建新元素 例：$(“”) 或者 $(“”)$(“新元素”) 注意：HTML代碼中標(biāo)簽必須

2、完整HTML代碼中標(biāo)簽不要使用大寫字母 語法：$(“HTML代碼”)6DOM操作 追加元素 添加兒子 添加兄弟自己.append(小兒子) 或者 小兒子.appendTo(自己)自己.prepend(大兒子) 或者 大兒子.prependTo(自己)自己.after(弟弟) 或者 弟弟.insertAfter(自己)自己.before(哥哥) 或者 哥哥.insertBefore(自己)如果添加的元素為已有元素，則變?yōu)樵匾苿?dòng)。7DOM操作 刪除元素 empty()刪除匹配的元素集合中所有的子節(jié)點(diǎn)。 remove(expr)從DOM中刪除所有匹配的元素。 detach(expr)從DOM中刪除

3、所有匹配的元素。remove / detach所有綁定的事件、附加的數(shù)據(jù)等不會(huì)/都會(huì)保留下來。8DOM操作 替換元素 replaceWith(content)將所有匹配的元素替換成指定的HTML或DOM元素。 replaceAll(selector)用匹配的元素替換掉所有 selector匹配到的元素。9DOM操作 復(fù)制元素 clone()克隆匹配的DOM元素并且選中這些克隆的副本。 clone(true)克隆匹配的DOM元素以及其所有的事件處理并且選中這些克隆的副本。10事件 事件處理 bind(type, data, fn)為每個(gè)匹配元素的特定事件綁定事件處理函數(shù)。參數(shù)參數(shù)類型類型說明說明

4、typeString含有一個(gè)或多個(gè)事件類型的字符串，比如click或submitdata (可選可選)Object作為event.data屬性值傳遞給事件對(duì)象的額外數(shù)據(jù)對(duì)象fnFunction綁定到每個(gè)匹配元素的事件上面的處理函數(shù)11事件 事件對(duì)象 fn這個(gè)參數(shù)的回調(diào)函數(shù)還可以接受一個(gè)參數(shù)。當(dāng)這個(gè)函數(shù)被調(diào)用時(shí)，一個(gè)JavaScript事件對(duì)象會(huì)作為一個(gè)參數(shù)傳進(jìn)來。屬性屬性/方法方法說明說明pageX /pageY 鼠標(biāo)點(diǎn)擊時(shí)相對(duì)于頁面的坐標(biāo)keyCode對(duì)于keyup和keydown事件返回被按下的鍵. 不區(qū)分大小寫, a和A都返回65. 對(duì)于keypress事件請(qǐng)使用which屬性, 因?yàn)閣

5、hich屬性跨瀏覽時(shí)依然可靠.which對(duì)于鍵盤事件, 返回觸發(fā)事件的鍵的數(shù)字編碼. 對(duì)于鼠標(biāo)事件, 返回鼠標(biāo)按鍵號(hào)(1左,2中,3右).12事件 事件處理 one(type, data, fn)為每一個(gè)匹配元素的特定事件（像click）綁定一個(gè)一次性的事件處理函數(shù)。 unbind(type, fn)bind()的反向操作，從每一個(gè)匹配的元素中刪除綁定的事件。如果沒有參數(shù)，則刪除所有綁定的事件。13事件 事件委托 live(type, data, fn)給所有匹配的元素附加一個(gè)事件處理函數(shù)，即使這個(gè)元素是以后再添加進(jìn)來的也有效。這個(gè)方法是基本是的 .bind() 方法的一個(gè)變體。使用 .bind() 時(shí)，選擇器匹配的元素會(huì)附加一個(gè)事件處理函數(shù)，而以后再添加的元素則不會(huì)有。為此需要再使用一次 .bind() 才行。14 添加添加/移動(dòng)元素有哪幾種方法？移動(dòng)元素