JQuery事件

• window事件
• 鼠標(biāo)事件
• 鍵盤事件
• 表單事件
• 事件注冊語法
  • $(對象).type(fn)
    • type是事件名
    • fn是事件處理函數(shù)

  • bind()方法和on()方法類綁定單個事件

    
    
    image.png

bind,on方法同時為多個事件綁定方法

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

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

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

delegate（）方法用于委托事件的注冊骚露。

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

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

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

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

事件參數(shù)

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

DOM

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

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

• 查找節(jié)點(diǎn)（利用選擇器）

• 創(chuàng)建節(jié)點(diǎn)
  $(selector)：通過選擇器獲取節(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()：刪除整個節(jié)點(diǎn)(節(jié)點(diǎn).remove())
  detach()：刪除整個節(jié)點(diǎn)，保留元素的綁定事件误续、附加的數(shù)據(jù)
  empty()：清空節(jié)點(diǎn)內(nèi)容

• 替換節(jié)點(diǎn)
  replaceWith()和replaceAll()用于替換某個節(jié)點(diǎn)

• 復(fù)制節(jié)點(diǎn)
  clone()用于復(fù)制某個節(jié)點(diǎn)

  • 可以使用clone()實(shí)現(xiàn)輸出DOM元素本身的HTML
    clone()用于復(fù)制某個節(jié)點(diǎn)

    
    
    image.png

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

attr()用來獲取與設(shè)置元素屬性

image.png

removeAttr()用來刪除元素的屬性

image.png

除css()外吨悍，還有獲取和設(shè)置元素高度、寬度蹋嵌、相對位置等的樣式操作方法

image.png

節(jié)點(diǎn)遍歷

children()方法可以用來獲取元素的所有子元素

image.png

jQuery中可以遍歷前輩元素育瓜，方法如下：
parent()：獲取元素的父級元素
parents()：元素元素的祖先元素

JQuery動畫

image.png

image.png

fadeIn()和fadeOut()可以通過改變元素的透明度實(shí)現(xiàn)淡入淡出效果

image.png

slideDown() 可以使元素逐步延伸顯示，slideUp()則使元素逐步縮短直至隱藏

image.png

JQuery-Ajax

使用$.ajax() 實(shí)現(xiàn)異步交互

image.png