JQuery事件

window事件
鼠標(biāo)事件
鍵盤(pán)事件
表單事件
事件注冊(cè)語(yǔ)法
- $(對(duì)象).type(fn)
  - type是事件名
  - fn是事件處理函數(shù)
- bind()方法和on()方法類(lèi)綁定單個(gè)事件
  
  image.png

bind,on方法同時(shí)為多個(gè)事件綁定方法

$("input[name = event_1]").on({
  mouseover.function(){
    $("ul").css("display", "none");
},
mouseout.function(){
  $("ul").css("display","block");
}
})

bind ,和on的區(qū)別
bind方法與on方法都是事件綁定，但是兩者卻又有著一個(gè)大區(qū)別：事件委托
當(dāng)我們想要使用事件委托的時(shí)候，我們想到的肯定是on方法。而不是bind方法，因?yàn)橄啾萣ind方法，on方法多了一個(gè)selector方法，也就是子類(lèi)選擇器

移除事件使用unbind()方法和off()方法：
$(對(duì)象).off([type],[fn]) 當(dāng)不帶參數(shù)時(shí)表示移除所綁定的全部事件。

delegate（）方法用于委托事件的注冊(cè)。

定義和用法:
delegate() 方法為指定的元素（屬于被選元素的子元素）添加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)。
使用 delegate() 方法的事件處理程序適用于當(dāng)前或未來(lái)的元素（比如由腳本創(chuàng)建的新元素）。

$("div").delegate("button","click",function(){
  $("p").slideToggle();
});

trigger()用于主動(dòng)觸發(fā)事件處理程序

$("button").click(function(){
    $("input").trigger("select");
});

事件參數(shù)

事件參數(shù)可以提供事件處理函數(shù)需要的數(shù)據(jù)
- 鍵盤(pán)事件提供當(dāng)前按鍵編碼參數(shù)
- 鼠標(biāo)事件提供鼠標(biāo)當(dāng)前坐標(biāo)參數(shù)
- 普通事件提供數(shù)據(jù)對(duì)象作為參數(shù)，事件處理函數(shù)通過(guò)data屬性獲取

DOM

內(nèi)容及value屬性值的操作

節(jié)點(diǎn)操作

查找節(jié)點(diǎn)（利用選擇器）
創(chuàng)建節(jié)點(diǎn)
$(selector)：通過(guò)選擇器獲取節(jié)點(diǎn)ff
$(element)：把DOM節(jié)點(diǎn)轉(zhuǎn)化成jQuery節(jié)點(diǎn)

$(html)：使用HTML字符串創(chuàng)建jQuery節(jié)點(diǎn)

image.png

插入節(jié)點(diǎn)

image.png

image.png
刪除節(jié)點(diǎn)
remove()：刪除整個(gè)節(jié)點(diǎn)(節(jié)點(diǎn).remove())
detach()：刪除整個(gè)節(jié)點(diǎn)，保留元素的綁定事件、附加的數(shù)據(jù)
empty()：清空節(jié)點(diǎn)內(nèi)容
替換節(jié)點(diǎn)
replaceWith()和replaceAll()用于替換某個(gè)節(jié)點(diǎn)
復(fù)制節(jié)點(diǎn)
clone()用于復(fù)制某個(gè)節(jié)點(diǎn)
- 可以使用clone()實(shí)現(xiàn)輸出DOM元素本身的HTML
  clone()用于復(fù)制某個(gè)節(jié)點(diǎn)
  
  image.png