2023學(xué)年完整公開課版jQuery事件操作

《物聯(lián)網(wǎng)Web前端開發(fā)基礎(chǔ)》課程

jQuery事件操作【任務(wù)9-5】jQuery事件操作下面將帶領(lǐng)讀者學(xué)習(xí)jQuery事件操作。需求分析事件處理在JavaScript中是一個很重要的功能，jQuery分別對每種類型的事件提供了相應(yīng)的方法進行處理，如表單事件、鼠標事件、鍵盤事件以及頁面加載事件等?！救蝿?wù)9-5】jQuery事件操作知識儲備——常用事件方法標簽中通過屬性設(shè)置事件，每個屬性都由一個on和事件名組成。例如，單擊事件對應(yīng)的屬性為onclick。在jQuery中則可直接使用其提供的與事件類型同名的方法。例如，單擊事件對應(yīng)的方法為click()。這些事件方法允許重復(fù)綁定處理程序，按照綁定順序依次執(zhí)行。若省略參數(shù)，則表示觸發(fā)事件?！救蝿?wù)9-5】jQuery事件操作知識儲備——常用事件方法分類方法說明表單事件blur([[data],function])當元素失去焦點時觸發(fā)focus([[data],function])當元素獲得焦點時觸發(fā)change([[data],function])當元素的值發(fā)生改變時觸發(fā)focusin([data],function)在父元素上檢測子元素獲取焦點的情況focusout([data],function)在父元素上檢測子元素失去焦點的情況select([[data],function])當文本框（包括<input>和<textarea>）中的文本被選中時觸發(fā)submit([[data],function])當表單提交時觸發(fā)鍵盤事件keydown([[data],function])鍵盤按鍵被按下時觸發(fā)keypress([[data],function])鍵盤按鍵（Shift等非字符鍵除外）被按下時觸發(fā)【任務(wù)9-5】jQuery事件操作知識儲備——常用事件方法分類方法說明鍵盤事件keyup([[data],function])鍵盤按鍵被松開時觸發(fā)鼠標事件mouseover([[data],function])當鼠標移入對象時觸發(fā)mouseout([[data],function])在鼠標從元素上離開時觸發(fā)click([[data],function])當單擊元素時觸發(fā)dblclick([[data],function])當雙擊元素時觸發(fā)mousedown([[data],function])當鼠標指針移動到元素上方，并按下鼠標按鍵時觸發(fā)mouseup([[data],function])當在元素上放松鼠標按鈕時，會被觸發(fā)瀏覽器事件scroll([[data],function])當滾動條發(fā)生變化時觸發(fā)resize([[data],function])當調(diào)整瀏覽器窗口的大小時會被觸發(fā)【任務(wù)9-5】jQuery事件操作知識儲備——常用事件方法參數(shù)function表示觸發(fā)事件時執(zhí)行的處理程序（函數(shù)）。參數(shù)data用于為事件處理函數(shù)傳遞數(shù)據(jù)。

（可在事件處理函數(shù)中使用“事件對象.data”獲?。救蝿?wù)9-5】jQuery事件操作知識儲備——焦點與失去焦點$('input[type=text]').focus(function(){//文本框獲取焦點

vartips=$('<span></span>');tips.html('請按要求輸入');$('input:focus').after(tips);});$('input[type=text]').blur(function(){//文本框失去焦點

$(this).next().remove();});【任務(wù)9-5】jQuery事件操作知識儲備——焦點與失去焦點【任務(wù)9-5】jQuery事件操作知識儲備——鍵盤控制div塊的移動【任務(wù)9-5】jQuery事件操作知識儲備——鍵盤控制div塊的移動代碼實現(xiàn)思路分析：事件對象.which：獲取當前按下鍵盤的對應(yīng)碼值keyCode。通過offset()獲取當前按下鍵盤時div元素的位置（left和top值）。根據(jù)碼值修改div元素的位置（

left和top值）。碼值：37（左）、38（上）、39（右）、40（下）?！救蝿?wù)9-5】jQuery事件操作知識儲備——鼠標的移入和移出//鼠標移入$('.hit').mouseover(function(){ $(this).css('background-color','green');});//鼠標移出

$('.hit').mouseout(function(){ $(this).css('background-color','');});【任務(wù)9-5】jQuery事件操作知識儲備——手風(fēng)琴案例代碼實現(xiàn)思路：編寫網(wǎng)頁，設(shè)置CSS完成手風(fēng)琴的結(jié)構(gòu)和樣式設(shè)置?！救蝿?wù)9-5】jQuery事件操作知識儲備——手風(fēng)琴案例代碼實現(xiàn)思路：為所有圖片添加鼠標移入與移出事件。鼠標移入時，將當前元素的width設(shè)為圖片的原寬，其他圖片的width=

(<div>的寬度-圖片的原寬)/剩余圖片元素個數(shù)。鼠標移出時，所有圖片的width=<div>的寬度/所有圖片的個數(shù)?！救蝿?wù)9-5】jQuery事件操作知識拓展——頁面加載事件類比選項window.onload$(document).ready()執(zhí)行時機必須等待網(wǎng)頁中的所有內(nèi)容加載完成后（包括外部元素，如圖片）才能執(zhí)行網(wǎng)頁中的所有DOM結(jié)構(gòu)繪制完成后就執(zhí)行（可能關(guān)聯(lián)內(nèi)容并未加載完成）編寫個數(shù)不能同時編寫多個能夠同時編寫多個簡化寫法無$()jQuery中的ready與JavaScript中的onload相比，不僅可以在頁面加載后立即執(zhí)行，還允許注冊多個事件處理程序?！救蝿?wù)9-5】jQuery事件操作知識拓展——頁面加載事件jQuery中的頁面加載事件方法有3種語法形式，具體如下。$(document).ready(function(){}); //語法方式1$().ready(function(){}); //語法方式2$(function(){}); //語法方式3【任務(wù)9-5】jQuery事件操作知識拓展——事件綁定與切換事件綁定和事件切換相關(guān)的方法如下。語法說明on(events,[selector],[data],function)在匹配元素上綁定一個或多個事件處理函數(shù)off(events,[selector],[function])在匹配元素上移除一個或多個事件處理函數(shù)one(events,[data],function)為每個匹配元素的事件綁定一次性的處理函數(shù)trigger(type,[data])在每個匹配元素上觸發(fā)某類事件triggerHandler(type,[data])同trigger()，但瀏覽器默認動作將不會被觸發(fā)hover([over,]out)元素鼠標移入與移出事件切換【任務(wù)9-5】jQuery事件操作知識拓展——事件綁定與切換參數(shù)events表示事件名（多個用空格分隔）。參數(shù)selector表示選擇器。參數(shù)data表示將要傳遞給事件處理函數(shù)function的數(shù)據(jù)。參數(shù)type表示為元素添加的事件類型（多個用空格分隔）。參數(shù)over和out分別表示鼠標移入移出時的事件處理函數(shù)?！救蝿?wù)9-5】jQuery事件操作知識拓展——事件綁定與切換$('div').on('click',function(){console.log('已完成單點擊');});$('div').off('click');$('div').one('click',function(){console.log('已完成1次單點擊');});【任務(wù)9-5】jQuery事件操作知識拓展——事件綁定與切換$('div').on('mouseovermouseout',function(){console.log('鼠標移入或移出');});$('div').on({mouseover:function(){console.log('鼠標移入');},mouseout:function(){console.log('鼠標移出');}});【任務(wù)9-5】jQuery事件操作知識拓展——事件綁定與切換$('body').on('click','div',function(){console.log('收到');});//測試：創(chuàng)建<div>元素$('b