Web前端技術(shù)主講人：XXX

XXX學(xué)院任務(wù)23使用jQuery制作評(píng)論頁(yè)面【知識(shí)目標(biāo)】

掌握jQuery的尺寸操作；

掌握jQuery的事件操作，包括事件綁定與解綁、委派和觸發(fā)；

了解事件常用屬性和方法的使用?！炯寄苣繕?biāo)】

能夠根據(jù)需求獲取和設(shè)置元素的尺寸；

能夠根據(jù)需求選擇合適的方法綁定、解綁、委派和觸發(fā)事件；

能夠使用事件常用的屬性獲取事件信息；

能夠根據(jù)阻止事件的默認(rèn)行和冒泡?！舅刭|(zhì)目標(biāo)】

培養(yǎng)學(xué)生團(tuán)隊(duì)協(xié)作精神；

培養(yǎng)學(xué)生分析問(wèn)題、解決問(wèn)題的能力；

培養(yǎng)學(xué)生自主探究的能力。教學(xué)目標(biāo)知識(shí)導(dǎo)圖jQuery尺寸操作jQuery尺寸操作方法作用width()獲取或設(shè)置元素寬度height()獲取或設(shè)置元素高度outerWidth()獲取元素寬度（包含border、padding）outerWidth(true)獲取元素寬度（包含margin、border、padding）outerHeight()獲取元素高度（包含border、padding）outerHeight(true)獲取元素高度（包含margin、border、padding）innerWidth()獲取元素的寬度（包含padding，不包含border）innerHeight()獲取元素的高度（包含padding，不包含border）【操作演示】獲取或設(shè)置元素寬度。jQuery位置操作jQuery位置操作方法作用舉例offset()獲取或設(shè)置元素的位置，返回的是一個(gè)對(duì)象，該對(duì)象包含left和top屬性，這兩個(gè)屬性表示相對(duì)于文檔的偏移坐標(biāo)，和父級(jí)元素沒(méi)有關(guān)系

//div元素距離文檔頂部的距離$("div").offset().top/div元素距離文檔左側(cè)的距離$("div").offset().left//設(shè)置p元素向右偏移100px、向下偏移200px$("div").offset({left:100,top:200})position()獲取當(dāng)前元素距離定位基準(zhǔn)（最近的非static定位的祖先元素）的偏移//獲取id為icon的元素的上邊框距離定位基準(zhǔn)的上邊框的距離$("#icon").position().top;//獲取id為icon的元素的左邊框距離定位基準(zhǔn)的左邊框的距離$("#icon").position().left;scrollTop()設(shè)置或返回被選元素的垂直滾動(dòng)條位置$("div").scrollTop()scrollLeft()設(shè)置或返回被選元素的水平滾動(dòng)條位置$("div").scrollLeft()【操作演示】獲取或設(shè)置元素的位置。jQuery事件事件綁定（1）通過(guò)事件方法綁定事件該種方法的使用非常簡(jiǎn)單，在匹配的元素直接使用事件方法即可，語(yǔ)法格式如下。$(selector).方法名(方法參數(shù))jQuery常用的事件方法如下表所示。分類方法說(shuō)明鼠標(biāo)事件click()單擊元素時(shí)觸發(fā)dblclick()雙擊元素時(shí)觸發(fā)mousemove()鼠標(biāo)指針移入時(shí)觸發(fā)mouseout()鼠標(biāo)指針移出時(shí)觸發(fā)鍵盤(pán)事件keyup()鍵盤(pán)按鍵彈起時(shí)觸發(fā)keypress()鍵盤(pán)按鍵按下時(shí)觸發(fā)（Shift、Fn、CapsLock等非字符鍵除外）keydown()鍵盤(pán)按鍵按下時(shí)觸發(fā)表單事件blur()失去焦點(diǎn)時(shí)觸發(fā)focus()獲得焦點(diǎn)時(shí)觸發(fā)change()元素的值發(fā)生變化時(shí)觸發(fā)input()表單輸入框內(nèi)容變化時(shí)觸發(fā)submit()提交表單時(shí)觸發(fā)select()當(dāng)文本框（input或textarea）的內(nèi)容被選中時(shí)觸發(fā)瀏覽器事件scroll()當(dāng)滾動(dòng)條發(fā)生變化時(shí)觸發(fā)resize()當(dāng)瀏覽器窗口大小發(fā)生變化時(shí)觸發(fā)事件綁定（2）通過(guò)on()方法綁定事件on()方法用于在匹配的元素上綁定一個(gè)或多個(gè)事件處理函數(shù)，該方法的語(yǔ)法格式如下：$(select).on(events,[selector],[data],fn)參數(shù)說(shuō)明如下。events：必選，表示事件類型，多個(gè)用空格隔開(kāi)。selector：可選，表示觸發(fā)事件的選擇器元素的后代。data：可選，表示事件觸發(fā)時(shí)要傳遞event.data給事件處理函數(shù)。fn：必選，事件被觸發(fā)時(shí)執(zhí)行的函數(shù)。【操作演示】使用on()方法給元素綁定事件。事件解綁在jQuery中，可以使用off()方法來(lái)移除通過(guò)on()方法添加的事件處理程序，具體語(yǔ)法如下。$(selector).off(event,function)參數(shù)說(shuō)明如下。selector：必需，用于選擇要移除事件處理程序的元素。event：可選，用于指定要移除的事件類型。function：可選，用于指定要移除的事件處理程序。事件觸發(fā)（1）使用事件方法直接觸發(fā)事件示例代碼如下。$("#btn").click(function(){alert("Hello!");});（2）使用trigger()方法觸發(fā)事件示例代碼如下。<inputtype="text"id="user"><script>$("#user").focus(function(){alert("事件觸發(fā)了");});$("#user").trigger("focus");</script>（3）使用triggerHandler()方法觸發(fā)事件triggerHandler()方法與trigger()方法都會(huì)觸發(fā)事件，不同之處在于triggerHandler()方法在觸發(fā)事件時(shí)不會(huì)執(zhí)行元素的默認(rèn)行為，示例代碼如下。<inputtype="text"id="user"><script>$("#user").focus(function(){$(this).val("test");});$("#user").triggerHandler("focus");</script>【操作演示】事件觸發(fā)示例事件對(duì)象jQuery對(duì)DOM中的事件對(duì)象event進(jìn)行了封裝，兼容性更好，獲取更方便，使用變化不大。事件被觸發(fā)后，就會(huì)有事件對(duì)象的產(chǎn)生。事件對(duì)象的語(yǔ)法格式如下。屬性說(shuō)明type獲取事件類型target獲取綁定下事件的DOM元素data獲取事件時(shí)傳入的額外參數(shù)relatedTarget對(duì)于鼠標(biāo)事件,表示觸發(fā)事件時(shí)離開(kāi)或者進(jìn)入的DOM元素currentTarget冒泡前的當(dāng)前觸發(fā)事件的DOM對(duì)象,等同于thispageX/Y用于獲取鼠標(biāo)事件相對(duì)于頁(yè)面原點(diǎn)的水平/垂直坐result上一個(gè)事件處置函數(shù)返回的值timeStamp事件發(fā)生時(shí)的時(shí)間preventDefault()用于阻止元素的默認(rèn)行為stopPropagation()用于阻止事件冒泡$(selector).on(eve