jquery複習之路---事件篇
jq的優勢:輕量級(大小不到30kb),強大的選擇器,出色的DOM操作封裝,可靠地事件處理機制, 完善的ajax , 不汙染頂級變數, 出色的瀏覽器相容,鏈式操作,隱式迭代, 行為層和結構層的分離,豐富的外掛支援,完善的文件,開源;
$(this)和this的區別
$(this)是jQuery物件,this是HTML元素
jq的事件篇
一,使用文件和瀏覽器視窗事件
ready() 當html文件載入完成時觸發$(document).ready(function(){ })或者$(function(){})可以使用多次
load() html所有的元件全部載入完成時觸發
unload() 當瀏覽器視窗關閉或者使用者單擊一個新連結或者在瀏覽器位址列輸入新地址時觸發
resize() 當使用者改變瀏覽器視窗大小時觸發
scroll() 當瀏覽器捲軸滾動時觸發
errror() 當http請求遇到錯誤時觸發
//在使用者離開頁面時觸發
$(window).unload(funciton(
alert("are you really leave this window?");
))
二,bind(),live(),delegate(),on()繫結事件或者用對映方式繫結多個事件
$(selector).bind('type',function(){}); //不能為動態新建立的元素繫結事件,僅能為已經存在的DOM元素新增繫結事件
$(selector).live('type',function(){}); //不僅能為DOM已經存在的元素,而且還可能為將來動態生成的元素繫結事件,但是他不支援鏈式呼叫
$(selector).delegate('selectorChild','type',function(){}); //能夠為DOM已經存在的元素和動態生成的元素新增事件,而且還支援鏈式呼叫。
$(selector).on('type',function(){}) //on() 方法是 bind()、live() 和 delegate() 方法的新的替代品,使用 on() 方法新增的事件處理程式適用於當前及未來的元素(比如由指令碼建立的新元素)。
$(selector).one('type',function(){}) //one() 方法為被選元素新增一個或多個事件處理程式,並規定當事件發生時執行的函式,當使用 one() 方法時,每個元素只能執行一次事件處理程式函式
$(selector).trigger("type"); //觸發被選元素上指定的事件以及事件的預設行為(比如表單提交)。
$(selector).hover(function(){},function(){}) //事件切換,滑鼠移入時執行第一個函式,移出時執行第二個引數
$(selector).toggle(function(){},function(){},function(){}...) //當在元素上點選時呼叫第一個指定函式,當再次點選時呼叫第二個函式,以此類推。
//對應的移除繫結事件
$(selector).unbind("type");
$(selector).die("type");
$(selector).undelegate("type");
$(selector).off("type");
滑鼠事件
click() //單擊滑鼠並釋放將觸發此事件
dbclick() //雙擊滑鼠觸發此事件
mousedown() //滑鼠被按下那一刻觸發此事件
mouseup() //滑鼠被按下鬆開那一刻觸發此事件
mouseenter() // 滑鼠進入某一元素區域時觸發
mouseleave() // 滑鼠離開某一元素區域時觸發
mousemove() // 滑鼠在某一元素區域內移動時觸發
mouseout() //滑鼠離開某一元素及其父元素時觸發
mouseover() // 滑鼠進入某一元素及其父元素時觸發
表單事件
change() //表單項的值改變時觸發此事件
focus() //按tab鍵進入某個文字域或者選擇某個文字域(得到焦點時)觸發此事件
focusin() //一個元素或者他的子元素得到焦點時觸發
focusout() //一個元素或者他的子元素失去焦點時觸發
blur() //文字域(input:text)或者文字框(textarea)失去焦點時觸發
select() //元素內的文字被選中時觸發
submit() //表單提交時觸發(或者點選了Submit按鈕,或者按下了Enter鍵)
reset() //表單使用 input type=“reset” 重置表單資料時觸發
鍵盤事件
keydown() //當一個按鍵被按下時觸發
keypress() //當一個鍵被按下一次或者多次時觸發
keyup() //當一個鍵彈起時觸發
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/758/viewspace-2799485/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- jquery複習之路---常用外掛jQuery
- 初步學習jQuery之事件jQuery事件
- jquery複習總結二jQuery
- JQuery學習隨筆(三) - 事件jQuery事件
- jQuery程式碼優化:事件委託篇jQuery優化事件
- jQuery程式碼優化:基本事件篇jQuery優化事件
- jquery事件jQuery事件
- jQuery 事件jQuery事件
- jquery中事件重複繫結以及解綁問題jQuery事件
- JavaScript 複習之各類事件(一)JavaScript事件
- JavaScript 複習之各類事件(二)JavaScript事件
- jquery學習手記(10)事件簡介jQuery事件
- Vue學習筆記之路由篇Vue筆記路由
- JavaScript 複習之 事件模型 和 Event物件JavaScript事件模型物件
- jQuery 事件方法jQuery事件
- jQuery 事件冒泡jQuery事件
- jQuery hover事件jQuery事件
- jQuery事件物件jQuery事件物件
- jQuery mousemove 事件jQuery事件
- jQuery mouseup事件jQuery事件
- jQuery mousedown事件jQuery事件
- jQuery mouseout 事件jQuery事件
- jQuery mouseover事件jQuery事件
- jQuery mouseenter事件jQuery事件
- jQuery dblclick事件jQuery事件
- jQuery click事件jQuery事件
- jQuery submit事件jQueryMIT事件
- jQuery change事件jQuery事件
- jQuery focusout事件jQuery事件
- jQuery focusin事件jQuery事件
- jQuery blur事件jQuery事件
- jQuery focus事件jQuery事件
- jQuery scroll事件jQuery事件
- jQuery resize事件jQuery事件
- jQuery error事件jQueryError事件
- jQuery----事件jQuery事件
- 學習 Webpack5 之路(優化篇)Web優化
- jQuery 事件(二) 表單事件jQuery事件