事件綁定
找到Dom元素，
jQuery中事件綁定有兩種方式
("").on(eventName, funcion(){})
優缺點:
eventName: 編碼方便, 并不支持自定義的事件，jquery并沒有包括所有js事件。
on: 編碼不方便, 但更通用
事件解除綁定
jQuery通過off(eventName,function);解綁事件
事件冒泡
什么是事件冒泡?
事件冒泡是從目標元素逐級向上傳播到根節點的過程
如何阻止事件冒泡?
多數情況下，我們希望在觸發一個元素的事件處理程序時，不影響它的父元素, 此時便可以使用停止事件冒泡
子元素中： event.stopPropagation(); 或者return false
事件默認行為
什么是默認行為?
網頁中的元素有自己的默認行為,例如單擊超鏈接后會跳轉,點擊提交表單按鈕會提交
如何阻止事件默認行為?
可以使用event.preventDefault();方法 或者return false阻止事件默認行為方法
自動觸發事件
什么是自動觸發事件?
通過代碼控制事件, 不用人為點擊/移入/移除等事件就能被觸發
自動觸發事件方式
$("selector").trigger("eventName"); 觸發事件的同時會觸發事件冒泡 觸發事件的同時會觸發事件默認行為
$("selector").triggerHandler("eventName");觸發事件的同時不會觸發事件冒泡 觸發事件的同時不會觸發事件默認行為
自定義事件
什么是自定義事件?
自定義事件的前提條件
自定義事件就是自己起一個不存在的事件名稱來注冊事件, 然后通過這個名稱還能觸發對應的方法執行
1.事件必須是通過on綁定的
2.事件必須通過trigger triggerHandler來觸發
因為trigger方法可以自動觸發對應名稱的事件,所以只要事件的名稱和傳遞給trigger的名稱一致就能執行對應的事件方法
事件命名空間
什么是事件命名空間?
眾所周知一個元素可以綁定多個相同類型的事件.企業多人協同開發中,如果多人同時給某一個元素綁定了相同類型的事件,但是事件處理的方式不同,就可能引發事件混亂
為了解決這個問題jQuery提出了事件命名空間的概念
事件命名空間主要用于區分相同類型的事件,區分不同前提條件下到底應該觸發哪個人編寫的事件
格式: "eventName.命名空間"
添加事件命名空間的前提條件
1.事件是通過on來綁定的
2.通過trigger觸發事件
注意點
不帶命名空間事件被trigger調用,會觸發帶命名空間事件
帶命名空間事件被trigger調用,只會觸發帶命名空間事件
下級不帶命名空間事件被trigger調用,會冒泡觸發上級不帶命名空間和帶命名空間事件
下級帶命名空間事件被trigger調用,不會觸發上級不帶命名空間事件
下級帶命名空間事件被trigger調用,會觸發上級帶命名空間事件
事件委托
什么是事件委托?
事件委托就是請其他人幫忙做我們想做的事，并且做完之后最終的結果還是會反饋到我們這里
js中事件委托的好處
減少監聽數量
新增元素自動有事件響應處理
添加到頁面上的事件處理程序數量將直接關系到頁面的整體運行性能，因為需要不斷的與dom節點進行交互，訪問dom的次數越多，引起瀏覽器重繪與重排的次數也就越多，就會延長整個頁面的交互就緒時間
每個監聽的函數都是一個對象，是對象就會占用內存，對象越多，內存占用率就越大，自然性能就越差
... ...
默認情況下新增的元素無法響應新增前添加的事件
jQuery中如何添加事件委托
添加前
$("li").click隱式迭代給界面上所有li都添加了click事件(監聽數量眾多)
通過$("ul").append新添加的li無法影響click事件
鼠標事件：
單擊：click([[data],fn]) 需要松開即可發生。
雙擊：dblclick([[data],fn])
進入：mouseenter([[data],fn]) 只有指定
離開：mouseleave([[data],fn])
上方：mouseover([[data],fn]) 如果鼠標指針穿過任何子元素，同樣會觸發 mouseover 事件。，而且子元素被一移入移出會觸發父元素的事件。
移開：mouseout([[data],fn])
移動：mousemove([[data],fn])當鼠標指針在指定的元素中移動時，就會發生 mousemove 事件。
放松：mouseup[[data],fn])當在元素上放松鼠標按鈕時，會發生 mouseup 事件。
按下鼠標：mousedown[[data],fn])當鼠標指針移動到元素上方，并按下鼠標按鍵時，會發生 mousedown 事件。
鍵盤事件:
keydown：在鍵盤上按下某鍵時發生,一直按著則會不斷觸發（opera瀏覽器除外）, 它返回的是鍵盤代碼;
keypress：在鍵盤上按下一個按鍵，并產生一個字符時發生, 返回ASCII碼。注意: shift、alt、ctrl等鍵按下并不會產生字符，所以監聽無效 ,換句話說, 只有按下能在屏幕上輸出字符的按鍵時keypress事件才會觸發。若一直按著某按鍵則會不斷觸發。
按下：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]) 可以通過鼠標點擊或者鍵盤上的TAB導航觸發。這將觸發所有綁定的focus函數，注意，某些對象不支持focus方法。
獲得焦點 focusin([data],fn) focusin事件跟focus事件區別在于，他可以在父元素上檢測子元素獲取焦點的情況。
失去焦點: blur([[data],fn])
失去焦點: focusout([data],fn)focusout事件跟blur事件區別在于，他可以在父元素上檢測子元素失去焦點的情況。
被選擇：select([[data],fn]) 當 textarea 或文本類型的 input 元素中的文本被選擇時，會發生 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 靜態方法定義一個類:function ClassName() {}
直接給這個類添加一個方法ClassName.staticMethod = function () {} ，這種直接添加給類的方法就是靜態方法
靜態方法通過類名調用：ClassName.staticMethod();
通過prototype給這個類添加的方法是實例方法 ClassName.prototype.instanceMethod = function () {}
實例方法通過類的實例調用：var a = new ClassName(); a.instanceMethod();
常用方法
屬性節點
attr(name|pro|key,val|fn)
一個參數：獲取屬性節點，參數是想要獲取的屬性節點。但是只能獲取第一個元素的屬性節點值
兩個參數：修改屬性節點。第一個是屬性名，第二個是數值。若不存在，系統會新增屬性節點。找到多少個元素就會設置多少個元素。
removeAttr(name)
刪除所有找到元素指定的屬性節點
屬性+屬性節點
prop(n|p|k,v|f)
removeProp(name)
既然所有的DOM對象，都有一個attributes屬性,而prop可以操作屬性,所以也可以操作屬性節點
官方推薦在操作屬性節點時,具有 true 和 false 兩個屬性的屬性節點，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
因為如果具有 true 和 false 兩個屬性的屬性節點,如果沒有編寫默認attr返回undefined,而prop返回false
css方法：
格式1:.css("樣式名稱", "值");
格式2:.css({"樣式名稱1":"值1","樣式名稱2":"值2"});
格式3:批量設置 .css({樣式名稱1："值1"，樣式名稱2："值2"})
位置
offset([coordinates])：獲取元素距離窗口的偏移位置
position()：獲取元素距離定位元素的偏移位置。不能設置
scrollTop([val])：獲取滾動的偏移位
scrollLeft([val])
動畫
jquery 效果
基本
show([s,[e],[fn]])
顯示隱藏的匹配元素。
hide([s,[e],[fn]])
隱藏顯示的元素
參數說明： speed："slow","normal", or "fast"或表示動畫時長的毫秒數值 easing:(Optional) 用來指定切換效果，默認是"swing"，可用參數"linear" fn:在動畫完成時執行的函數，每個元素執行一次。
toggle（[s],[fn]）
切換 hide() 和 show() 方法。
滑動【動態顯示、隱藏】這個動畫效果只調整元素的高度，可以使匹配的元素以“滑動”的方式顯示出來
slideDown([s],[e],[fn])
slideUp([s],[e],[fn]])
通過高度變化（向下增大/向上減少）來動態地顯示/隱藏所有匹配的元素，在顯示/隱藏完成后可選地觸發一個回調函數。
slideToggle([s],[e],[fn])
通過高度變化來切換所有匹配元素的可見性，并在切換完成后可選地觸發一個回調函數。
參數說明： speed："slow","normal", or "fast"或表示動畫時長的毫秒數值 easing:(Optional) 用來指定切換效果，默認是"swing"，可用參數"linear" fn:在動畫完成時執行的函數，每個元素執行一次。
淡入淡出【這個動畫只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發生變化。】
fadeIn([s],[e],[fn])
通過不透明度的變化來實現所有匹配元素的淡入效果，并在動畫完成后可選地觸發一個回調函數。
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
把所有匹配元素的不透明度以漸進方式調整到指定的不透明度，并在動畫完成后可選地觸發一個回調函數。opacity:一個0至1之間表示透明度的數字。
fadeToggle([s,[e],[fn]])
通過不透明度的變化來開關所有匹配元素的淡入和淡出效果，并在動畫完成后可選地觸發一個回調函數
自定義
animate(p,[s],[e],[fn])
params:一組包含作為動畫屬性和終值的樣式屬性和及其值的集合 參數定義形成動畫的 CSS 屬性
speed:三種預定速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
easing:要使用的擦除效果的名稱(需要插件支持).默認jQuery提供"linear" 和 "swing".
fn:在動畫完成時執行的函數，每個元素執行一次
注意：默認情況下，所有 HTML 元素都有一個靜態位置，且無法移動。如需對位置進行操作，要記得首先把元素的 CSS position 屬性設置為 relative、fixed 或 absolute！
stop([stopAll],[goToEnd])
可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false，即僅停止活動的動畫，允許任何排入隊列的動畫向后執行。
可選的 goToEnd 參數規定是否立即完成當前動畫。默認是 false。
delay(d,[q])
設置一個延時來推遲執行隊列中之后的項目。
參數說明：
duration:延時時間，單位：毫秒
queueName:隊列名詞，默認是Fx，動畫隊列
finish([queue])
停止當前正在運行的動畫，刪除所有排隊的動畫，并完成匹配元素所有的動畫。
設置（屬性）
jQuery.fx.off
作用：控制頁面上的動畫（所有效果會立即執行完畢）
參數：
true 關閉頁面上所有的動畫。
false重新開啟所有動畫
jQuery.fx.interval
作用：設置動畫的顯示幀速。
