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

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

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

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

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

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

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

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

e1

=

$.Event('click')

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

e2

=

new

$.Event('click')

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

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