jQuery---事件、動畫

事件(return false阻止冒泡)

• 滑鼠

• click 單擊對象(按下松開) //單擊事件：//滑鼠按下的時刻滑鼠指針在被選區域内 滑鼠松開滑鼠指針也在被選區域内
• dblclick 輕按兩下對象 //輕按兩下事件：//滑鼠第一次按下的時候和第二次松開的時候在同一被選區域
• mousedown 在對象上按下時 //按下事件：//滑鼠按下時，滑鼠指針在被選區域内
• mouseup 按下,在對象上松開時 //松開事件://滑鼠按下再松開時，滑鼠指針在被選區域内
• mousemove 滑鼠在對象上移動時 //滑鼠移動事件//由像素和時間一起決定
• mouseover 滑鼠指針穿過被選元素區域觸發,穿過其子元素區域也觸發 //若在父元素觸發了 又進入子元素 子元素仍然會觸發
• mouseout 滑鼠指針離開被選元素或者子元素區域
• mouseenter 滑鼠指針穿過被選元素區域 /若在父元素觸發了 則進入子元素不會再觸發 即若父元素觸發了再進入子元素不會再冒泡//不管怎樣 隻觸發一次 即子元素不會再冒泡
• mouseleave 滑鼠指針離開被選元素區域

• 鍵盤:焦點在哪裡哪個控件的鍵盤事件才觸發

• keypress 鍵盤按鍵被按下并松開。
• keydown 鍵盤按鍵被按下。
• keyup 鍵盤按鍵被松開。

• 表單

• focus節點獲得焦點後觸發
• blur節點失去焦點後觸發

• • focusin将要獲得焦點時觸發，發生在focus事件之前
  • focusout将要失去焦點時觸發，發生在blur事件之前
  • change内容改變時//光标失去後 内容改變 change事件觸發

• • reset 表單重置時
  • submit 表單送出時
• dom節點中的oninput事件

< script > $( "#text")[ 0]. oninput = function (e) { if($( "#box"). children(). length< this. value. length){ var p = $( "<p></p>"); p. text( this. value); $( "#box"). append( p); } if($( "#box"). children(). length> this. value. length){ $( "#box"). children().last(). remove(); } } </ script >

• 加載(圖檔文檔等)

• //dom裡的window.onload jq:$(function) $(document).ready $(document).load(funcition)
• load 完成加載 //當對象加載了才進行執行後面的代碼
• abort 加載被中斷
• error 加載發生錯誤

• 懸浮

hover//注:hover(fn1,fn2) hover事件要求有兩個回調函數,分别是 移入和移除,隻寫一個回調函數時,兩個狀态都觸發同一個函數 < script > var timer1 = null, timer2 = null; $( "#btn").hover( function () { clearInterval( timer1); if($( "#left-box"). width()>= 50){ clearInterval( timer1); } timer1 = setInterval( function () { $( "#left-box").css( "width", function (index,old) { return $( this). width()+ 10+ "px"; }) }, 50) }, function () { // clearInterval(timer2); if($( "#left-box"). width()<= 0){ clearInterval( timer2); } timer2 = setInterval( function () { $( "#left-box").css( "width", function (index,old) { return $( this). width()- 10+ "px"; }) }, 50)

}) </ script >

事件對象 事件觸發時會傳入回調函數一個事件對象,這個對象的屬性包含了事件觸發時的一些資訊

• 滑鼠

• • altKey 滑鼠事件發生時，是否按下alt鍵,傳回一個布爾
  • ctrlKey 滑鼠事件發生時，是否按下ctrl鍵,傳回一個布爾
  • metaKey 滑鼠事件發生時，是否按下windows/commond鍵,傳回一個布爾
  • shiftKey 滑鼠事件發生時，是否按下shift鍵,傳回一個布爾
  • clientX，clientY傳回滑鼠位置相對于浏覽器視窗左上角的坐标，機關為像素
  • screenX，screenY傳回滑鼠位置相對于螢幕左上角的坐标，機關為像素
• 鍵盤

• altKey，ctrlKey，metaKey，shiftKey傳回一個布爾值，表示是否按下對應的鍵
• key屬性傳回一個字元串，表示按下的鍵名。如果同時按下一個控制鍵和一個符号鍵，則傳回符号鍵的鍵名。比如，按下Ctrl+a，則傳回a。如果無法識别鍵名，則傳回字元串Unidentified

綁定事件mouseleave(fn) 回調函數傳回值為false時阻止冒泡

① jq(“button”).click(fn) jq(“button”).mouseenter(fn) jq(“button”). jq(“button”).click(fn).mouseenter(fn).mouseleave(fn)

② bind(“events”,fn);//多事件用空格隔開 jq(“button”).bind(“click mouseenter mouseleave”,fn)

③ 不同的事件想觸發不同的方法,傳一個對象進去 jq(“button”).bind({“click”:fn,”mouseenter ”:fm,”mouseleave”:fo})

④ 觸發一次one(“event”,fn) jq(“button”).one(“click”:fn)

多元素綁定事件 ①原始的//每個li都綁定了一個事件 jq(“li”).bind(“click”,function(){alert(jq(this).html())}) <ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>

②代理//隻給ul(一定要綁父親)綁定了事件(冒泡) jq(“ul”).delegate(“li”,”click”,function(){alert(jq(this).html())})

③前面所有的方式都忘掉,用這種:on(“events”,”selector”,fn) jq(“ul”).on(“click”,”li”,function(){alert(jq(this).html())}) //ul 是on方法第二個參數li的爸爸,on第一個參數是事件,第二個參數是選擇器,第三個參數是回調,回調裡面的this關鍵字是個指針,指向觸發click事件的對象.

< script > //多事件方法相同 $( "div"). bind( "click mousedown mouseleave", function () { console. log( 111); });

//不同的事件想觸發不同的方法,傳一個對象進去 $( 'div'). bind( { "click": function () {}, "mousedown": function () {} });

//隻觸發一次之後就不再觸發了 $( "div").one( "dblclick", function () { });

//多元素綁定事件 $( "li"). bind( "click", function () { console. log( this. innerHTML); });

//delegate 綁定父親的點選事件 事件由兒子來執行 $( "ul").delegate( "li", "click", function () { console. log( this. innerHTML); })

//on（事件，選擇器，方法） $( "ul").on( "click", "li", function () { console. log( this. innerHTML); }) </ script > < script > $( "body").on( "mouseover", "div", function () { this. style. border= "5px solid black"

}) $( "body").on( "mouseleave", "div", function () {

this. style. border= "0px solid black" }) </ script >

事件解綁 對應的unbind undelegate off 例子:jq(“ul”).on(“click mouseenter”,”li”,function(){alert(jq(this).html())}) jq(“ul”).off(“click”) 現象:滑鼠移入觸發,點選卻不觸發

事件觸發 事件的觸發有兩種方式 真事件觸發:真的用滑鼠點了 假事件觸發:用代碼讓事件觸發(2種方式): ①事件名調用時不傳參數(不傳回調函數): $(‘#div’).click() //相當于使用者已經點選了一次 ②$(‘#div’).trigger(‘click’)

動畫

• 隐藏

• • hide(sd,fn)隐藏元素
  • show(sd,fn)顯示元素
  • toggle(sd,fn)隐藏顯示開關(來回掉用)
  • //參數都是可選的,sd是速度可填slow fast normal 或數字(ms),fn是回調函數
  • //jq(“p”).hide(2000,function(){alert(666)})
• 淡入淡出

• fadeIn(sd,fn)//淡入已經隐藏的元素
• fadeOut(sd,fn)//淡出已經顯示的元素
• fadeToggle(sd,fn)//淡出入開關
• fadeTo(sd,alpha,fn)//自定義透明度

//參數都是可選的,sd是速度可填slow fast normal或數字(ms),alpha是透明度,fn是回調函數

• 滑動隐藏

• • slideUp(sd,fn)//向上滑動隐藏
  • slideDown(sd,fn)//向下滑動顯示
  • slideToggle(sd,fn)//上下滑動隐藏顯示開關
  • //參數都是可選的,sd是速度可填slow fast normal 或數字(ms) fn是回調函數
• 自定義//幀動畫（資源）,補間動畫（樣式）

• • animate({屬性},sd,fn)//動畫
  • //要讓元素實作動畫,必須設定定位
  • //參數:{}必填,sd可選動畫時間,fn可選,回調函數
  • //屬性必須用駝峰命名法寫,不能用原始的css屬性:margin-left改為marginLeft
  • 動畫隊列,隊列按照順序依次執行:
  • jq("button").click(function(){
  • jq(".div").animate({ width:'200px'});//隊列1
  • jq(".div").animate({ width:'2000px'});//隊列2
  • jq(".div").animate({ width:'200px'});//隊列3
  • })
• <script>

$( "button").hover( hide, show) function hide() { $( "#div1").hide( 2000, function () { console. log( 111) }) } function show() { $( "#div1"). show( 2000, function () { console. log( 2222); }) } $( "button").hover( function () { $( "#div1"). toggle( 2000, function () { console. log( 666) }) }) //滑動隐藏 $( "button").hover( slideUp, slideDown); function slideUp() { //向上滑動隐藏 $( "#div1").slideUp( 1000, function () { console. log( 111); }) } function slideDown() { //想下滑動顯示 $( "#div1").slideDown( 1000, function () { console. log( 122); }) }

//上下滑動隐藏、顯示開關 $( "button").hover( slideToggle); function slideToggle() { $( "#div1").slideToggle( 1000, function () { console. log( 123) }) }

//自定義//幀動畫，補間動畫 //元素的屬性在事件段内動态改變的過程 //一個動畫隊列 $( "div").animate({ width: "200px"}); $( "div").animate({ width: "200px"}); </ script >

• 停止屬性改變

jq(".div").stop(bool,bool)//停止動态改變屬性的現象:比如動畫 滑動(參數:都可選布爾值,第一個是否停止所有隊列,第二個是否立即執行完所有效果)