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事件
- JavaScript 複習之各類事件(一)JavaScript事件
- JavaScript 複習之各類事件(二)JavaScript事件
- 36. jQuery 事件jQuery事件
- jQuery事件監聽jQuery事件
- JavaScript 複習之 事件模型 和 Event物件JavaScript事件模型物件
- Vue學習筆記之路由篇Vue筆記路由
- JQuery6:事件冒泡jQuery事件
- jQuery select 觸發事件jQuery事件
- jquery獲取回車事件jQuery事件
- JQuery4:滑鼠事件和滾動事件jQuery事件
- 學習 Webpack5 之路(優化篇)Web優化
- JQuery7:事件委託jQuery事件
- 使用 jQuery 觸發 Vue 事件jQueryVue事件
- jQuery基本功能——事件jQuery事件
- jquery自定義事件的使用jQuery事件
- jquery鍵盤常見事件---jQuery事件
- 1.21 JQuery4:滑鼠事件與滾動事件jQuery事件
- jQuery事件中on實現繫結多個事件jQuery事件
- AI 學習之路——輕鬆初探 Python 篇(三)AIPython
- jQuery複製指定li元素jQuery
- jQuery知識總結之事件jQuery事件
- 常用的jQuery事件有幾種?jQuery事件
- 動力節點jQuery學習教程,jQuery入門看這一篇就夠了jQuery
- SQL專項複習(視窗函式)——習題篇01SQL函式
- jQuery之_事件繫結與解綁jQuery事件
- JQuery的一些常用事件jQuery事件
- jquery中如何使用事件委託?jQuery事件
- Android面試複習之View事件體系(原始碼分析)Android面試View事件原始碼
- 1.22 JQuery5:繫結自定義事件jQuery事件
- jQuery事件物件event的屬性和方法jQuery事件物件
- Jquery學習1jQuery
- JQuery學習系列jQuery
- 重構之路:開篇