jQuery的事件機制,事件物件介紹,外掛機制,多庫共存,each()

yzf01發表於2021-09-09
  1. jQuery的事件機制
  2. jq的事件分類
    click() 單擊事件
    blur() 失去焦點
    mouseenter() 滑鼠進入
    mouseleave() 滑鼠離開
    dbclick() 雙擊事件
    change() 改變事件,如:文字框值改變,下拉選單值改變,注意區別 input()
    focus() 獲得焦點
    keydown() 鍵盤摁下
    keyUp() 鍵盤松開
  3. jQ裡事件的繫結
    jqObj.click()
    jqObj.bind( “click”,function(){})
    jqObj.delegate(“p”,”click”,function(){}) 為jqObj下面的所有p標籤繫結click事件
    jqObj.on(“click keydown”,“span”,data, function(){}) 最現代的方式
    第一個引數:events,即事件名,可以由空格分割的多個事件
    圖片描述
    第二個引數:執行事件的jqObj的後代元素
    第三個引數:data,傳遞給處理函式的資料,event.data。(瞭解)
    第四個引數:事件處理函式
    圖片描述

  4. jQ裡事件的解綁
    l unbind()
    解綁使用 bind方式繫結的事件
    l off()
    解綁使用on 方式繫結的事件
    圖片描述
    當off方法沒有引數,會解綁所有的已繫結事件
    圖片描述

  5. trigger()模擬瀏覽器行為
    圖片描述

  6. jQuery的事件物件介紹(重點)
    圖片描述
    回車換行
    圖片描述

  7. each()方法
    $(“li”).each(function(index,element){…})
    引數1 index,表示當前元素在所有匹配到的元素中的索引號
    引數2 element, 表示當前元素物件,但是是DOM物件
    圖片描述

  8. jQuery外掛機制
    jQuery雖然強大,但是還有需要一些擴充套件功能來幫助我們開發
    使用步驟:
    圖片描述
    color.js
    圖片描述
    lazyload.js
    圖片描述

  9. jQuery多庫共存
    此處多庫共存是指:jQuery佔用了$ 和 jQuery 這兩個變數。當在同一個頁面中引用了jQuery這個js庫,並且引用了其他的js庫(或者是其他版本的jQuery庫)中也用了$或者jQuery這兩個變數,要保證每個庫都能正常使用
    解決方式:
    Ø 列印版本號:
    圖片描述
    Ø 讓jQuery釋放對$的使用權:
    $.noConflict()
    Ø 當兩個版本的時候,只需要讓其中的一個jq庫釋放對 $或jQuery的控制權即可,注意jq版本引入的順序
    圖片描述
    Ø 當三個版本的時候
    圖片描述

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/2334/viewspace-2799475/,如需轉載,請註明出處,否則將追究法律責任。

相關文章