<dfn id="w48us"></dfn><ul id="w48us"></ul>
  • <ul id="w48us"></ul>
  • <del id="w48us"></del>
    <ul id="w48us"></ul>
  • 剖析JQuery中的事件與動畫

    時間:2024-09-10 07:56:05 jQuery Mobile 我要投稿
    • 相關推薦

    剖析JQuery中的事件與動畫

      首先,使用JQuery事件與動畫的效果比使用原生js來的方便得多,當然,最重要的是考慮到了瀏覽器的兼容性。

      事件:

      基于原生js,常用事件有blur,focus,hover,mouseout,mouseover,mouseleave,ready,change,select,submit等等,不再贅述。

      事件綁定:

      在文檔加載完成后,使用bind(type,[data],func())方法綁定事件.

      合成事件:

      hover(enter-func,leave-func)相當于bind("mouseover")和bind("mouseleave").

      toggle()模擬鼠標連點情況下的顯示與隱藏事件toggle(show-func,hide-func).

      事件冒泡:

      在學習js高程(三)時,曾提及到大部分瀏覽器的事件處理機制是事件冒泡,也就是事件是逐級向上發生的。如果給你個內嵌元素綁定了事件,給他的父元素也綁定了一個相同type的事件,那么當事件處理內嵌元素時,父元素的事件也會隨之觸發,JQuery用一個方法可以阻止事件冒泡,使用event(事件對象).stopPropagation().

      既讓可以阻止事件冒泡,那么也可以阻止事件的默認行為,比如錨點元素a,當我們為a綁定一個click事件時,他不僅會實現我們綁定的事件函數,也會跳轉到指定的href,那么要阻止這一跳轉行為,需要用到event.preventDefault()來實現。這個方法也經常用在表單驗證的過程中,當驗證的字段不通過是,使用event.preventDefault()來阻止表單的submit。

      當然,對于阻止事件冒泡和阻止默認行為,我們也可以使用return false,當我們要知道,return false同時阻止了冒泡與默認行為,所以要慎用。

      事件對象:

      寫在回調函數中的參數event即為事件對象。

      type屬性,獲取事件的類型。

      preventDefault()方法,阻止默認行為

      stopPropagation()方法,阻止事件冒泡

      target屬性,獲取事件觸發的元素

      pageX,pageY屬性,獲取光標相對于頁面的坐標

      mataKey屬性,獲取crtl按鍵

      事件移除:

      unbind(type,func-name)

      第一個參數是移出事件的類型,第二個為移除事件的變量名,如果沒有參數,刪除該元素的所有事件,如果提供了type,則刪除該元素所有類型為type的事件,若制訂了第二個參數,則刪除指定事件。

      事件模擬:

      trigger(),利用該函數實現進入頁面時就觸發指定事件(這個事件的類型是可以自定義的),trigger()有連個參數,第一個為type,第二個為[data],這個是可選的,用于傳遞數據。我認為trigger()實際是上調用事件的過程。

      動畫:

      Jquery中的動畫用起來十分的方便。jquer所有的動畫效果都可以添加時間參數。

      show()與hide():

      顯示與隱藏元素,hide()相當于display:none,而show()則把他還原(之前的display屬性是什么,還原后還是什么)。可以通過設置參數來實現動畫效果,show(),hide()接收關鍵字和時間值(ms),關鍵字有slow(0.6s),fast(.2s),nomal(.4s),他會同時改變元素的高度,寬度和不透明度。

      fadeIn()與fadeOut():

      改變元素的不透明度,fadeIn()提高不透明度,fadeOut()降低不透明度,直到display:none.

      slideDown與SlideUp()

      改變元素的高度,slideDown()元素自上到下延伸,slideUp()元素自下向上收縮。

      animate()

      當上面的方法實現的動畫無法滿足我們時,可以使用animate()來自定義動畫。

      animate(params,speed,callback)

      params:包含樣式的映射,如{left:"100px",heiget:"100px"}

      speed:動畫實現需要的事件(ms)

      callback:動畫完成時執行的函數。

      像上面所寫的params的栗子,實現的時left與height的同時改變,若不想同時改變,使用鏈式寫法分開寫。需要注意一點,css()不算動畫,要想在動畫執行完成后改變樣式,需要把css()寫入callback中.

      判斷元素是否處于動畫狀態is(":animated").

      延遲操作:animate().delay(time).

      其他動畫:

      toggle()顯示與隱藏

      slideToggle()改變高度的顯示與隱藏。

      fadeTo(time,op)通過指定時間將元素的不透明度變為op

      fadeToggle()改變不透明度的顯示與隱藏。

    【剖析JQuery中的事件與動畫】相關文章:

    如何理解jquery事件冒泡09-15

    jQuery中prev()方法用法07-16

    jQuery中replaceAll()方法用法10-15

    jQuery中parent()和siblings()的問題10-16

    合并ppt中動畫的方法05-06

    怎么在ppt中添加動畫10-13

    深度剖析平面設計中的引導設計08-28

    數字媒體中的動畫設計07-26

    動畫設計中色彩的運用10-11

    定格動畫在廣告中的運用06-09

    主站蜘蛛池模板: 国产精品亚洲精品观看不卡| 久久免费精品视频| 国产国产精品人在线视| 国产精品无码久久综合网| 国产精品色内内在线播放| 日韩欧美国产精品第一页不卡| 老司机99精品99| jizzjizz国产精品久久| 亚洲av无码国产精品色午夜字幕| 久久狠狠一本精品综合网| 亚洲国产精品线在线观看| 99久久这里只有精品| 久久亚洲私人国产精品| 亚洲视频在线精品| 久久精品国产亚洲AV不卡| 精品久久久久久无码国产| 国产成人精品无人区一区| 欧美+亚洲+精品+三区| 97精品一区二区视频在线观看| 久久久久人妻精品一区二区三区| 四虎国产精品永久地址入口| 精品一区二区三区免费视频| 国产精品 综合 第五页| 日本精品中文字幕| 国产亚洲精品a在线观看app| 国产精品亚洲精品| 久久精品国产只有精品2020| 精品久久一区二区| 久久精品国产福利国产秒| 99久久精品国产免看国产一区| 精品无码人妻一区二区三区| 久久久久久久久无码精品亚洲日韩| 亚洲精品无码激情AV| 55夜色66夜色国产精品视频| 精品人妻人人做人人爽| 久久99国内精品自在现线| 蜜芽亚洲av无码精品色午夜| 日韩国产成人精品视频| 日韩精品一区二区三区色欲AV| 最新国产精品拍自在线播放| 亚洲精品美女久久777777|