事件綁定
找到Dom元素购城，
jQuery中事件綁定有兩種方式
("").on(eventName, funcion(){})
優(yōu)缺點:
eventName: 編碼方便, 并不支持自定義的事件，jquery并沒有包括所有js事件瘪板。
on: 編碼不方便, 但更通用
事件解除綁定
jQuery通過off(eventName,function);解綁事件
事件冒泡
什么是事件冒泡?
事件冒泡是從目標(biāo)元素逐級向上傳播到根節(jié)點的過程
如何阻止事件冒泡?
多數(shù)情況下吴趴，我們希望在觸發(fā)一個元素的事件處理程序時，不影響它的父元素, 此時便可以使用停止事件冒泡
子元素中： event.stopPropagation(); 或者return false
事件默認(rèn)行為
什么是默認(rèn)行為?
網(wǎng)頁中的元素有自己的默認(rèn)行為,例如單擊超鏈接后會跳轉(zhuǎn),點擊提交表單按鈕會提交
如何阻止事件默認(rèn)行為?
可以使用event.preventDefault();方法 或者return false阻止事件默認(rèn)行為方法
自動觸發(fā)事件
什么是自動觸發(fā)事件?
通過代碼控制事件, 不用人為點擊/移入/移除等事件就能被觸發(fā)
自動觸發(fā)事件方式
$("selector").trigger("eventName"); 觸發(fā)事件的同時會觸發(fā)事件冒泡 觸發(fā)事件的同時會觸發(fā)事件默認(rèn)行為
$("selector").triggerHandler("eventName");觸發(fā)事件的同時不會觸發(fā)事件冒泡 觸發(fā)事件的同時不會觸發(fā)事件默認(rèn)行為
自定義事件
什么是自定義事件?
自定義事件的前提條件
自定義事件就是自己起一個不存在的事件名稱來注冊事件, 然后通過這個名稱還能觸發(fā)對應(yīng)的方法執(zhí)行
1.事件必須是通過on綁定的
2.事件必須通過trigger triggerHandler來觸發(fā)
因為trigger方法可以自動觸發(fā)對應(yīng)名稱的事件,所以只要事件的名稱和傳遞給trigger的名稱一致就能執(zhí)行對應(yīng)的事件方法
事件命名空間
什么是事件命名空間?
眾所周知一個元素可以綁定多個相同類型的事件.企業(yè)多人協(xié)同開發(fā)中,如果多人同時給某一個元素綁定了相同類型的事件,但是事件處理的方式不同,就可能引發(fā)事件混亂
為了解決這個問題jQuery提出了事件命名空間的概念
事件命名空間主要用于區(qū)分相同類型的事件,區(qū)分不同前提條件下到底應(yīng)該觸發(fā)哪個人編寫的事件
格式: "eventName.命名空間"
添加事件命名空間的前提條件
1.事件是通過on來綁定的
2.通過trigger觸發(fā)事件
注意點
不帶命名空間事件被trigger調(diào)用,會觸發(fā)帶命名空間事件
帶命名空間事件被trigger調(diào)用,只會觸發(fā)帶命名空間事件
下級不帶命名空間事件被trigger調(diào)用,會冒泡觸發(fā)上級不帶命名空間和帶命名空間事件
下級帶命名空間事件被trigger調(diào)用,不會觸發(fā)上級不帶命名空間事件
下級帶命名空間事件被trigger調(diào)用,會觸發(fā)上級帶命名空間事件
事件委托
什么是事件委托?
事件委托就是請其他人幫忙做我們想做的事侮攀，并且做完之后最終的結(jié)果還是會反饋到我們這里
js中事件委托的好處
減少監(jiān)聽數(shù)量
新增元素自動有事件響應(yīng)處理
添加到頁面上的事件處理程序數(shù)量將直接關(guān)系到頁面的整體運行性能锣枝，因為需要不斷的與dom節(jié)點進行交互，訪問dom的次數(shù)越多兰英，引起瀏覽器重繪與重排的次數(shù)也就越多撇叁，就會延長整個頁面的交互就緒時間
每個監(jiān)聽的函數(shù)都是一個對象，是對象就會占用內(nèi)存畦贸，對象越多税朴，內(nèi)存占用率就越大，自然性能就越差
... ...
默認(rèn)情況下新增的元素?zé)o法響應(yīng)新增前添加的事件
jQuery中如何添加事件委托
添加前
$("li").click隱式迭代給界面上所有l(wèi)i都添加了click事件(監(jiān)聽數(shù)量眾多)
通過$("ul").append新添加的li無法影響click事件
鼠標(biāo)事件：
單擊：click([[data],fn]) 需要松開即可發(fā)生家制。
雙擊：dblclick([[data],fn])
進入：mouseenter([[data],fn]) 只有指定
離開：mouseleave([[data],fn])
上方：mouseover([[data],fn]) 如果鼠標(biāo)指針穿過任何子元素，同樣會觸發(fā) mouseover 事件泡一。颤殴，而且子元素被一移入移出會觸發(fā)父元素的事件。
移開：mouseout([[data],fn])
移動：mousemove([[data],fn])當(dāng)鼠標(biāo)指針在指定的元素中移動時鼻忠，就會發(fā)生 mousemove 事件涵但。
放松：mouseup[[data],fn])當(dāng)在元素上放松鼠標(biāo)按鈕時，會發(fā)生 mouseup 事件帖蔓。
按下鼠標(biāo)：mousedown[[data],fn])當(dāng)鼠標(biāo)指針移動到元素上方矮瘟，并按下鼠標(biāo)按鍵時，會發(fā)生 mousedown 事件塑娇。
鍵盤事件:
keydown：在鍵盤上按下某鍵時發(fā)生,一直按著則會不斷觸發(fā)（opera瀏覽器除外）, 它返回的是鍵盤代碼;
keypress：在鍵盤上按下一個按鍵澈侠，并產(chǎn)生一個字符時發(fā)生, 返回ASCII碼。注意: shift刽宪、alt谒府、ctrl等鍵按下并不會產(chǎn)生字符迁沫，所以監(jiān)聽無效 ,換句話說, 只有按下能在屏幕上輸出字符的按鍵時keypress事件才會觸發(fā)。若一直按著某按鍵則會不斷觸發(fā)拳球。
按下：keydown([[data],fn])
彈起：keyup([[data],fn])
按下的過程：keypress([[data],fn])
窗口事件
載入：unload([[data],fn])
改變窗口大小:resize([[data],fn])
滾動scroll([[data],fn])
離開頁面：
表單事件
提交：submit([[data],fn])
改變:change([[data],fn])
獲得焦點：focus([[data],fn]) 可以通過鼠標(biāo)點擊或者鍵盤上的TAB導(dǎo)航觸發(fā)。這將觸發(fā)所有綁定的focus函數(shù)珍特，注意祝峻，某些對象不支持focus方法。
獲得焦點 focusin([data],fn) focusin事件跟focus事件區(qū)別在于，他可以在父元素上檢測子元素獲取焦點的情況莱找。
失去焦點: blur([[data],fn])
失去焦點: focusout([data],fn)focusout事件跟blur事件區(qū)別在于酬姆，他可以在父元素上檢測子元素失去焦點的情況。
被選擇：select([[data],fn]) 當(dāng) textarea 或文本類型的 input 元素中的文本被選擇時宋距，會發(fā)生 select 事件轴踱。
其他
錯誤信息：error([[data],fn])
頁面載入：ready(fn)
懸浮/事件切換:hover([over],out） 這個事件
事件處理
on(eve,[sel],[data],fn)
off(eve,[sel],[fn])
bind(type,[data],fn)
one(type,[data],fn)
trigger(type,[data])
triggerHandler(type, [data])
unbind(t,[d|f])
事件委派
delegate(s,[t],[d],fn)
undelegate([s,[t],fn])
jquery 靜態(tài)方法定義一個類:function ClassName() {}
直接給這個類添加一個方法ClassName.staticMethod = function () {} ，這種直接添加給類的方法就是靜態(tài)方法
靜態(tài)方法通過類名調(diào)用：ClassName.staticMethod();
通過prototype給這個類添加的方法是實例方法 ClassName.prototype.instanceMethod = function () {}
實例方法通過類的實例調(diào)用：var a = new ClassName(); a.instanceMethod();
常用方法
屬性節(jié)點
attr(name|pro|key,val|fn)
一個參數(shù)：獲取屬性節(jié)點谚赎，參數(shù)是想要獲取的屬性節(jié)點淫僻。但是只能獲取第一個元素的屬性節(jié)點值
兩個參數(shù)：修改屬性節(jié)點。第一個是屬性名壶唤，第二個是數(shù)值雳灵。若不存在，系統(tǒng)會新增屬性節(jié)點闸盔。找到多少個元素就會設(shè)置多少個元素悯辙。
removeAttr(name)
刪除所有找到元素指定的屬性節(jié)點
屬性+屬性節(jié)點
prop(n|p|k,v|f)
removeProp(name)
既然所有的DOM對象，都有一個attributes屬性,而prop可以操作屬性,所以也可以操作屬性節(jié)點
官方推薦在操作屬性節(jié)點時,具有 true 和 false 兩個屬性的屬性節(jié)點迎吵，如 checked, selected 或者 disabled 使用prop()躲撰，其他的使用 attr()
因為如果具有 true 和 false 兩個屬性的屬性節(jié)點,如果沒有編寫默認(rèn)attr返回undefined,而prop返回false
css方法：
格式1:.css("樣式名稱", "值");
格式2:.css({"樣式名稱1":"值1","樣式名稱2":"值2"});
格式3:批量設(shè)置 .css({樣式名稱1："值1"，樣式名稱2："值2"})
位置
offset([coordinates])：獲取元素距離窗口的偏移位置
position()：獲取元素距離定位元素的偏移位置击费。不能設(shè)置
scrollTop([val])：獲取滾動的偏移位
scrollLeft([val])
動畫
jquery 效果
基本
show([s,[e],[fn]])
顯示隱藏的匹配元素拢蛋。
hide([s,[e],[fn]])
隱藏顯示的元素
參數(shù)說明： speed："slow","normal", or "fast"或表示動畫時長的毫秒數(shù)值 easing:(Optional) 用來指定切換效果，默認(rèn)是"swing"蔫巩，可用參數(shù)"linear" fn:在動畫完成時執(zhí)行的函數(shù)谆棱，每個元素執(zhí)行一次。
toggle（[s],[fn]）
切換 hide() 和 show() 方法圆仔。
滑動【動態(tài)顯示垃瞧、隱藏】這個動畫效果只調(diào)整元素的高度，可以使匹配的元素以“滑動”的方式顯示出來
slideDown([s],[e],[fn])
slideUp([s],[e],[fn]])
通過高度變化（向下增大/向上減少）來動態(tài)地顯示/隱藏所有匹配的元素坪郭，在顯示/隱藏完成后可選地觸發(fā)一個回調(diào)函數(shù)个从。
slideToggle([s],[e],[fn])
通過高度變化來切換所有匹配元素的可見性，并在切換完成后可選地觸發(fā)一個回調(diào)函數(shù)歪沃。
參數(shù)說明： speed："slow","normal", or "fast"或表示動畫時長的毫秒數(shù)值 easing:(Optional) 用來指定切換效果信姓，默認(rèn)是"swing"，可用參數(shù)"linear" fn:在動畫完成時執(zhí)行的函數(shù)绸罗，每個元素執(zhí)行一次意推。
淡入淡出【這個動畫只調(diào)整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發(fā)生變化珊蟀【罩担】
fadeIn([s],[e],[fn])
通過不透明度的變化來實現(xiàn)所有匹配元素的淡入效果外驱，并在動畫完成后可選地觸發(fā)一個回調(diào)函數(shù)。
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
把所有匹配元素的不透明度以漸進方式調(diào)整到指定的不透明度腻窒，并在動畫完成后可選地觸發(fā)一個回調(diào)函數(shù)昵宇。opacity:一個0至1之間表示透明度的數(shù)字。
fadeToggle([s,[e],[fn]])
通過不透明度的變化來開關(guān)所有匹配元素的淡入和淡出效果儿子，并在動畫完成后可選地觸發(fā)一個回調(diào)函數(shù)
自定義
animate(p,[s],[e],[fn])
params:一組包含作為動畫屬性和終值的樣式屬性和及其值的集合 參數(shù)定義形成動畫的 CSS 屬性
speed:三種預(yù)定速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數(shù)值(如：1000)
easing:要使用的擦除效果的名稱(需要插件支持).默認(rèn)jQuery提供"linear" 和 "swing".
fn:在動畫完成時執(zhí)行的函數(shù)瓦哎，每個元素執(zhí)行一次
注意：默認(rèn)情況下，所有 HTML 元素都有一個靜態(tài)位置柔逼，且無法移動蒋譬。如需對位置進行操作，要記得首先把元素的 CSS position 屬性設(shè)置為 relative愉适、fixed 或 absolute犯助！
stop([stopAll],[goToEnd])
可選的 stopAll 參數(shù)規(guī)定是否應(yīng)該清除動畫隊列。默認(rèn)是 false维咸，即僅停止活動的動畫剂买，允許任何排入隊列的動畫向后執(zhí)行。
可選的 goToEnd 參數(shù)規(guī)定是否立即完成當(dāng)前動畫癌蓖。默認(rèn)是 false瞬哼。
delay(d,[q])
設(shè)置一個延時來推遲執(zhí)行隊列中之后的項目。
參數(shù)說明：
duration:延時時間租副，單位：毫秒
queueName:隊列名詞坐慰，默認(rèn)是Fx，動畫隊列
finish([queue])
停止當(dāng)前正在運行的動畫附井，刪除所有排隊的動畫，并完成匹配元素所有的動畫两残。
設(shè)置（屬性）
jQuery.fx.off
作用：控制頁面上的動畫（所有效果會立即執(zhí)行完畢）
參數(shù)：
true 關(guān)閉頁面上所有的動畫永毅。
false重新開啟所有動畫
jQuery.fx.interval
作用：設(shè)置動畫的顯示幀速。
