JavaScript+jQuery前端開發(fā)基礎(chǔ)教程（第2版）（微課版）課件 劉凡馨 第9章 操作頁面內(nèi)容；第10章 jQuery事件處理

JavaScript+jQuery前端開發(fā)基礎(chǔ)教程微課版第9章操作頁面內(nèi)容本章主要內(nèi)容：元素內(nèi)容操作插入內(nèi)容包裝內(nèi)容替換內(nèi)容刪除內(nèi)容復(fù)制內(nèi)容樣式操作9.1元素內(nèi)容操作jQuery提供的html()、text()、val()和attr()等方法用于訪問元素內(nèi)容9.1.1html()和text()方法html()方法用于讀取或設(shè)置元素的HTML內(nèi)容。text()方法用于讀取或設(shè)置HTML元素的純文本內(nèi)容。方法指定參數(shù)時(shí)，參數(shù)設(shè)置為元素的新內(nèi)容。9.1.2val()方法val()方法用于讀取或設(shè)置表單元素的值無參數(shù)時(shí)方法返回元素的值，有參數(shù)時(shí)將參數(shù)設(shè)置為元素值。9.1.3attr()方法使用attr()方法指定一個(gè)參數(shù)時(shí)，返回參數(shù)對應(yīng)的元素屬性值；同時(shí)指定第2個(gè)參數(shù)時(shí)，將設(shè)置指定屬性的值9.2插入內(nèi)容可用jQuery提供的append()、prepend()、appendTo()、prependTo()、after()、before()、insertAfter()和insertBefore()等方法向文檔插入內(nèi)容。9.2.1append()和appendTo()方法append()方法和appendTo()方法將參數(shù)添加到目標(biāo)元素末尾，方法基本格式如下。$(選擇器).append(參數(shù)1[,參數(shù)2]...)$(參數(shù)).appendTo(選擇器)選擇器匹配的元素作為目標(biāo)元素。若匹配多個(gè)元素，則同時(shí)為這些元素添加相同內(nèi)容。參數(shù)可以是HTML字符串、HTML元素、文本、數(shù)組或jQuery對象，也可以是返回這些內(nèi)容的函數(shù)。參數(shù)是使用選擇器匹配的頁面元素時(shí)，可將對應(yīng)元素移動(dòng)到目標(biāo)元素中。append()方法提供多個(gè)參數(shù)時(shí)，同時(shí)添加多個(gè)內(nèi)容。9.2.2prepend()方法和prependTo()方法prepend()方法和prependTo()方法與append()方法和appendTo()方法類似，只是將內(nèi)容添加到目標(biāo)元素的最前面，方法基本格式如下。$(選擇器).

prepend(參數(shù)1[,參數(shù)2]...)$(參數(shù)).prependTo(選擇器)9.2.3after()方法和insertAfter()方法after()方法和insertAfter()方法將新內(nèi)容作為兄弟節(jié)點(diǎn)內(nèi)容添加到目標(biāo)元素之后，方法基本格式如下。$(選擇器).

after(參數(shù)1[,參數(shù)2]...)$(參數(shù)).

insertAfter(選擇器)9.2.4before()方法和insertBefore()方法before()方法和insertBefore()方法將參數(shù)作為兄弟節(jié)點(diǎn)內(nèi)容添加到目標(biāo)元素之前，方法基本格式如下。$(選擇器).

before(參數(shù)1[,參數(shù)2]...)$(參數(shù)).

insertBefore(選擇器)9.3包裝內(nèi)容包裝內(nèi)容指用指定HTML結(jié)構(gòu)包裝現(xiàn)有元素，被包裝元素成為結(jié)構(gòu)的內(nèi)容。9.3.1wrap()方法wrap()方法用指定HTML結(jié)構(gòu)包裝元素，參數(shù)可以是HTML字符串、選擇器或者jQuery對象。匹配多個(gè)元素時(shí)，分別包裝各個(gè)元素。9.3.2wrapAll()方法wrapAll()方法將所有選中的元素合并后包裝在一個(gè)HTML結(jié)構(gòu)中，參數(shù)可以是HTML字符串、選擇器或者jQuery對象。9.3.3wrapInner()方法wrapInner()方法用指定HTML結(jié)構(gòu)包裝選中元素的內(nèi)容。9.3.4unwrap()方法unwrap()方法執(zhí)行wrap()方法的反向操作，即刪除目標(biāo)元素的父元素。9.4替換內(nèi)容使用jQuery提供的replaceWith()方法和replaceAll()方法可將頁面中的元素替換為新的內(nèi)容。9.4.1replaceWith()方法replaceWith()方法用指定參數(shù)替換選中的元素，參數(shù)可以是HTML字符串、DOM元素、DOM元素?cái)?shù)組或者jQuery對象。9.4.2replaceAll()方法replaceAll()和replaceWith()作用相同，但replaceAll()不返回被替換對象。9.5刪除內(nèi)容jQuery還提供了empty()、remove()和detach()等方法用于刪除頁面中的內(nèi)容。9.5.1empty()方法empty()方法刪除元素的全部內(nèi)容，剩下空的元素。9.5.2remove()方法9.5.3detach()方法detach()方法與remove()方法類似，但detach()方法可返回被刪除的內(nèi)容，以便將其重新插入頁面或做他用。被刪除的內(nèi)容重新插入頁面時(shí)，原有的數(shù)據(jù)和事件處理器保持不變。9.6復(fù)制內(nèi)容clone()方法可用于復(fù)制元素，并可修改其內(nèi)容。9.7樣式操作在HTML文檔中，串聯(lián)樣式表（CascadingStyleSheets，CSS）用于格式化元素。jQuery提供了用于操作CSS的方法。9.7.1css()方法css()方法可獲取或設(shè)置CSS樣式。9.7.2CSS類操作方法jQuery提供了直接操作元素class屬性的方法。addClass()：添加類。removeClass()：刪除類。toggleClass()：切換類。若元素?zé)o指定類，則為其添加該類；若有指定類，則將其刪除。9.8編程實(shí)踐：jQuery版的選項(xiàng)卡切換本節(jié)綜合應(yīng)用本章所學(xué)知識，修改第8章中的編程實(shí)踐，使用jQuery實(shí)現(xiàn)選項(xiàng)卡切換，鼠標(biāo)指針指向選項(xiàng)卡標(biāo)題時(shí)，顯示對應(yīng)的詩，如圖9-25所示。JavaScript+jQuery前端開發(fā)基礎(chǔ)教程微課版第10章

jQuery事件處理本章主要內(nèi)容：jQuery事件對象附加和解除事件處理函數(shù)事件快捷方法10.1jQuery事件對象jQuery事件對象封裝了瀏覽器差異，并按照W3C標(biāo)準(zhǔn)進(jìn)行了規(guī)范和統(tǒng)一，確保在所有瀏覽器中采用統(tǒng)一的處理方法。10.1.1事件對象構(gòu)造函數(shù)jQuery的Event()構(gòu)造函數(shù)用事件名稱作為參數(shù)來創(chuàng)建事件對象。使用構(gòu)造函數(shù)創(chuàng)建事件對象時(shí)，可不使用new關(guān)鍵字。var

e1

=

$.Event('click')

//創(chuàng)建事件對象var

e2

=

new

$.Event('click')

//創(chuàng)建事件對象事件對象可作為trigger()方法的參數(shù)來觸發(fā)事件。$('body').trigger(e1)

//觸發(fā)事件10.1.2事件對象屬性event.currentTarget：事件冒泡過程中的當(dāng)前DOM元素。event.data：事件對象存儲(chǔ)的附加數(shù)據(jù)。event.pageX、event.pageY：鼠標(biāo)事件發(fā)生時(shí)，鼠標(biāo)指針在瀏覽器窗口中的坐標(biāo)。event.relatedTarget：和事件有關(guān)的其他DOM元素，如鼠標(biāo)指針離開的對象。event.result：事件處理函數(shù)的最新返回值。event.target：最初發(fā)生事件的DOM元素。event.timeStamp：事件發(fā)生的時(shí)間戳，單位為毫秒。event.type：事件類型。event.which：在發(fā)生鍵盤事件時(shí)，屬性返回按鍵的ASCII值。發(fā)生鼠標(biāo)事件時(shí)，屬性返回所按下的鼠標(biāo)按鍵。10.1.3事件對象方法事件對象的常用方法如下。event.preventDefault()：阻止事件默認(rèn)行為。event.stopImmediatePropagation()：停止執(zhí)行元素的所有事件處理函數(shù)，同時(shí)阻止事件冒泡。event.stopPropagation()：阻止事件冒泡。10.2附加和解除事件處理函數(shù)附加事件處理函數(shù)指將函數(shù)和事件關(guān)聯(lián)起來，在發(fā)生事件時(shí)執(zhí)行該函數(shù)來處理事件。解除事件處理函數(shù)則是解除函數(shù)和事件的關(guān)聯(lián)關(guān)系。10.2.1附加事件處理函數(shù)on()方法為事件關(guān)聯(lián)處理函數(shù)，早期的bind()方法已被棄用。on()方法的基本語法格式如下。$('selector').on('eventname',func)$('selector')為要附加事件處理函數(shù)的目標(biāo)對象。eventname為事件名稱，如click。func可以是函數(shù)名或者匿名函數(shù)，可以為元素的同一個(gè)事件附加多個(gè)處理函數(shù)。10.2.2解除事件處理函數(shù)off()方法用于解除附加到元素的事件處理函數(shù)，其基本語法格式如下。$('selector').off('eventname',func)$('selector')為要解除事件處理函數(shù)的目標(biāo)對象，為其解除eventname事件附加的func()函數(shù)。不帶參數(shù)的off()方法解除匹配元素所有的事件處理函數(shù)。10.3事件快捷方法jQuery提供了一系列事件快捷方法來處理事件處理函數(shù)。例如，click()方法可以為對象附加click事件處理函數(shù)，不帶參數(shù)時(shí)則可觸發(fā)click事件。10.3.1瀏覽器事件快捷方法resize()：帶參數(shù)時(shí)，為對象附加resize事件處理函數(shù)。scroll()：帶參數(shù)時(shí)，為對象附加scroll事件處理函數(shù)。10.3.2表單事件快捷方法blur()：帶參數(shù)時(shí)為對象附加blur事件處理函數(shù)。change()：帶參數(shù)時(shí)為對象附加change事件處理函數(shù)。focus()：帶參數(shù)時(shí)為對象附加focus事件處理函數(shù)。focusin()：帶參數(shù)時(shí)為對象附加focusin事件處理函數(shù)。focusout()：帶參數(shù)時(shí)為對象附加focusout事件處理函數(shù)。select()：帶參數(shù)時(shí)為對象附加select事件處理函數(shù)。submit()：帶參數(shù)時(shí)為對象附加submit事件處理函數(shù)。10.3.3鍵盤事件快捷方法keydown()：帶參數(shù)時(shí)附加keydown事件處理函數(shù)。keypress()：帶參數(shù)時(shí)附加keypress事件處理函數(shù)。keyup()：帶參數(shù)時(shí)附加keyup事件處理函數(shù)。另外，無參數(shù)的方法觸發(fā)對象的對應(yīng)事件。10.3.4鼠標(biāo)事件快捷方法click()：帶參數(shù)時(shí)附加click事件處理函數(shù)。contextmenu()：帶參數(shù)時(shí)附加contextmenu事件處理函數(shù)。dblclick()：帶參數(shù)時(shí)附加dblclick事件處理函數(shù)。hover()：只帶一個(gè)參數(shù)時(shí)附加mouseleave事件處理函數(shù)；帶兩個(gè)參數(shù)時(shí)，第1個(gè)為mouseenter事件處理函數(shù)，第2個(gè)為mouseleave事件處理函數(shù)。mousedown()：帶參數(shù)時(shí)附加mousedown事件處理函數(shù)。10.3.4鼠標(biāo)事件快捷方法mouseenter()：帶參數(shù)時(shí)附加mouseenter事件處理函數(shù)。mouselea