博學(xué)谷——讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效《JavaScript+jQueryWeb前端開發(fā)技術(shù)（微課版）》教學(xué)設(shè)計課程名稱：授課班級：授課學(xué)期：教師姓名：年月

課題名稱學(xué)習(xí)單元8JavaScript框架之jQuery應(yīng)用計劃課時12課時教學(xué)引入隨著互聯(lián)網(wǎng)的高速發(fā)展和Web3.0的興起，JavaScript越來越受到重視，因此很多JavaScript類庫應(yīng)運而生，從早期的Prototype、Dojo到之后的jQuery、ExtJS等等，互聯(lián)網(wǎng)正在掀起一場JavaScript風(fēng)暴。jQuery以其簡約、優(yōu)雅的風(fēng)格，成為眾多JavaScript類庫中最優(yōu)秀的類庫之一。本單元主要介紹jQuery的基本應(yīng)用。教學(xué)目標(biāo)1.知識目標(biāo)（1）了解jQuery的相關(guān)概念；（2）掌握jQuery對象相關(guān)概念；（3）掌握jQuery選擇器以及方法的相關(guān)概念。2.技能目標(biāo)（1）掌握jQuery環(huán)境的下載、安裝、配置與使用；（2）掌握利用jQuery對象及選擇器實現(xiàn)網(wǎng)頁特效設(shè)計；（3）靈活運用jQuery方法實現(xiàn)對網(wǎng)頁元素的操作。3.素養(yǎng)目標(biāo)（1）培養(yǎng)自主學(xué)習(xí)能力素養(yǎng)；（2）了解jQuery技術(shù)的發(fā)展，激發(fā)學(xué)生的愛國情懷。教學(xué)重點jQuery對象相關(guān)概念jQuery選擇器以及方法的使用教學(xué)難點jQuery對象相關(guān)概念jQuery選擇器的使用jQuery方法的使用教學(xué)過程任務(wù)8.1為網(wǎng)頁添加定時廣告特效——jQuery基礎(chǔ)（6課時）一、任務(wù)描述“詩歌賞析”網(wǎng)站上線成功吸引了大量用戶，為網(wǎng)站插播廣告以實現(xiàn)商業(yè)價值。為引起用戶關(guān)注，廣告以慢慢下滑方式顯示；廣告占用頁面大面積篇幅，為避免引起用戶反感，為廣告設(shè)置3秒后慢慢上滑方式隱藏特效，或者為廣告設(shè)置大廣告畫面慢慢隱藏，小廣告畫面慢慢顯示并停留在頁面的特效。二、任務(wù)分析為一個運行上線的網(wǎng)站插播廣告特效，快捷高效是開發(fā)人員的首選。相對于JavaScript而言，jQuery通過對JavaScript的函數(shù)封裝，使得語法更加簡潔，同時消除了很多瀏覽器的兼容性問題，因此本任務(wù)選用jQuery替代JavaScript來實現(xiàn)。下載配置jQuery環(huán)境，利用jQuery實現(xiàn)廣告定時顯示與隱藏，或者定時大廣告、小廣告切換的效果。三、知識點講解1、初始jQueryjQuery是一個語法簡潔并兼容多瀏覽器的JavaScript庫，是由JohnResig（約翰·瑞思格）于2006年1月創(chuàng)建的開源項目，核心理念是writeless，domore(寫的更少，做的更多)，因此也吸引了世界各地眾多JavaScript高手關(guān)注?，F(xiàn)在的jQuery主要包括核心庫、UI、插件和jQueryMobile等。jQuery是免費、開源的，使用MIT許可協(xié)議。jQuery憑借簡潔的語法和跨平臺的兼容性，使開發(fā)者更加便捷，例如操作文檔對象、選擇DOM元素、制作動畫效果、事件處理、使用AJAX以及其他功能。除此以外，jQuery提供API讓開發(fā)者編寫插件，其模塊化的使用方式使開發(fā)者可以很輕松的開發(fā)出功能強大的靜態(tài)或動態(tài)網(wǎng)頁。2、jQuery優(yōu)勢（1）輕量級（2）強大的選擇器（3）更少的代碼（4）出色的DOM封裝（5）可靠的事件處理機制（6）封裝好的AJAX函數(shù)（7）處理了瀏覽器的兼容問題（8）隱式迭代（9）擁有豐富的插件（10）開源3、jQuery版本對比目前jQuery庫文件有三個大版本：jQuery1.x系列的經(jīng)典版本保持了對早期瀏覽器的支持，使用最為廣泛，最終版本是jQuery1.12.4；jQuery2.x系列版本不再兼容IE6-IE8瀏覽器，從而更加輕量級，最終版本是jQuery2.2.4；而jQuery3.x系列的版本不兼容IE6-IE8瀏覽器，此版本增加了一些新方法，對一些方法的行為做了優(yōu)化和改進。目前jQuery1.x和2.x系列版本已停止更新，除非特殊需求，一般不會使用此版本，本書選擇使用jQuery3.x。4、jQuery的引用方式j(luò)Query庫文件的引用有兩種方式：（1）引入本地下載的jQuery下載后的jQuery庫文件不需要安裝，直接將下載的jQuery文件復(fù)制到項目的一個指定位置，當(dāng)使用該文件時，直接在網(wǎng)頁頭部進行引用就可以。例如，將jQuery庫文件jquery-3.7.1.min.js和引用庫文件的網(wǎng)頁放置到同一個目錄下，則網(wǎng)頁中引用jQuery庫文件的語句參考如下：<scriptsrc="jquery-3.7.1.min.js"></script>（2）引入在線的jQuery引入在線的jQuery，用戶無需下載，通過CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）引入在線的jQuery。例如在網(wǎng)頁中引用jQuery官網(wǎng)的在線jQuery庫文件的語句參考如下：<scriptsrc="/jquery-3.7.1.min.js"></script>5、jQuery對象在實際開發(fā)中，用戶一般操作兩類對象，即jQuery對象和DOM對象。DOM對象指的是普通的JavaScript對象，而jQuery對象則是包裝DOM對象后產(chǎn)生的對象。jQuery對象的作用是通過自身提供的一系列快捷功能來簡化DOM操作的復(fù)雜度，提高程序的開發(fā)效率，同時解決了不同瀏覽器的兼容問題。對比項window.onload$(document).ready()執(zhí)行時機必須等待網(wǎng)頁中的所有內(nèi)容（包括外部資源，如圖片）加載完成后才能執(zhí)行網(wǎng)頁中的所有DOM結(jié)構(gòu)繪制完成后就執(zhí)行（可能關(guān)聯(lián)內(nèi)容并未加載完成）編寫個數(shù)不能編寫多個事件處理函數(shù)能夠編寫多個事件處理函數(shù)簡化寫法無$()四、任務(wù)實施1、下載jQuery打開jQuery的官方首頁，單擊網(wǎng)頁右上角的【DownloadjQuery】按鈕，進行最新的jQuery3.x系列版本的下載。將鼠標(biāo)指針移動到【Downloadthecompressed,productionjQuery3.7.1】鏈接上，右擊，選擇【鏈接另存為】菜單項，將文件jquery-3.7.1.min.js下載到本地。用戶還可以通過“/”網(wǎng)址，任選jQuery1.x、2.x和3.x系列，同時還可以選擇各個版本的壓縮類型或未壓縮類型。2、配置運行環(huán)境將下載的jquery-3.7.1.min.js復(fù)制到項目的一個指定位置，以便后續(xù)編碼引用。本案例中將文件存放在項目的js文件夾下。3、引入jQuery打開項目中的index.html文件，在文件頭部將js文件夾下的jquery-3.7.1.min.js文件引入到項目中。4、為頁面添加廣告圖片將adbig.png和adsmall.png圖片復(fù)制到項目的img文件夾下，在index.html文件頁腳<footer>代碼塊下添加圖片加載代碼。5、為圖片設(shè)置CSS樣式在項目的css文件夾下新建adimg.css樣式文件，設(shè)置廣告圖片的顯示位置及樣式。6、引入廣告樣式文件在index.html文件的頭部引入adimg.css文件，兩個廣告圖片初始狀態(tài)都是隱藏狀態(tài)。7、為廣告添加顯示與隱藏特效一在項目js文件夾下新建adimg.js文件，編寫jQuery代碼。特效一是瀏覽網(wǎng)頁時，大廣告圖片慢慢向下滑動展開，三秒鐘后慢慢向上滑動閉合消失。8、引入廣告特效js代碼在index.html文件頭部引入adimg.js文件。9、為廣告添加顯示與隱藏特效二修改adimg.js文件，設(shè)置大廣告圖片慢慢滑動展開，3秒鐘后慢慢滑動閉合消失同時小廣告圖片慢慢滑動展開特效。10、網(wǎng)頁運行測試保存并運行網(wǎng)頁。五、課堂實踐通過測試題的方式檢測學(xué)生知識學(xué)習(xí)，通過任務(wù)實踐掌握jQuery基礎(chǔ)。任務(wù)8.2為網(wǎng)頁添加輪播圖特效——jQuery應(yīng)用（6課時）一、復(fù)習(xí)鞏固教師通過任務(wù)8.1的完成情況和測試題的測試結(jié)果進行分析，對學(xué)生掌握薄弱的知識點和技能點進行復(fù)習(xí)鞏固。二、任務(wù)描述為強化“詩歌賞析”網(wǎng)站的品牌形象，提高網(wǎng)站用戶體驗，為網(wǎng)站頭部添加圖片輪播特效，增添網(wǎng)站動感和活力。三、任務(wù)分析將網(wǎng)站原來banner部分的圖片區(qū)域修改為多幅圖片輪播特效，可以利用jQuery獲取元素、設(shè)置元素樣式以及調(diào)用定時器等技術(shù)結(jié)合完成。四、知識點講解1、jQuery元素獲取在程序開發(fā)過程中，經(jīng)常需要對HTML元素進行操作，在操作前必須先準(zhǔn)確地找到對應(yīng)地DOM元素。為此，jQuery提供了類似CSS選擇器的機制，利用jQuery選擇器可以輕松地獲取DOM元素。jQuery支持CSS1.0到CSS3.0規(guī)則中幾乎所有的選擇器，如標(biāo)簽選擇器、類別選擇器、ID選擇器、后代選擇器等，使用$()或jQuery()就可以非常方便地獲取需要操作的DOM元素，語法格式如下：$(selector)或jQuery(selector)（1）基本選擇器jQuery基本選擇器和CSS選擇器非常類似，常用基本選擇器如表1所示。選擇器功能描述示例#id獲取指定id的元素$("#lastname");//選取id為lastname的元素*匹配所有元素$("*");//選取所有元素.class獲取同一類class的元素$(".intro");//選取所有class為intro的元素element獲取相同標(biāo)簽名的所有元素$("p");//選取所有的<p>的元素el1,el2,el3選取多個元素$("h1,div,p");//同時獲取所有<h1>、<div>和<p>的元素（2）層級選擇器jQuery層級選擇器可以通過一些指定的符號來完成多層級元素之間的獲取，常用層級選擇器如表2所示。選擇器功能描述示例parent>child獲取父元素下的所有子元素$("div>p");//獲取<div>元素下的所有名稱為<p>的直接子元素（一級）parentdescendant獲取父元素下的所有后代元素$("divp");//獲取<div>元素下的所有名稱為<p>的后代元素（多級）element+next獲取當(dāng)前元素緊鄰的兄弟元素$("div+p");//獲取緊鄰<div>元素的下一個名稱為<p>的兄弟元素element~siblings獲取當(dāng)前元素后的所有兄弟元素$("div~p");//獲取<div>元素后的所有名稱為<p>的同級元素節(jié)點（3）篩選選擇器開發(fā)中若需要對獲取的元素進行篩選，可以使用jQuery提供的基本篩選選擇器完成，常用基本篩選選擇器如表3所示。選擇器功能描述示例:first獲取指定選擇器中的第一個元素$("li:first");//獲取第一個<li>元素:last獲取指定選擇器中的最后一個元素$("li:last");//獲取最后一個<li>元素:even獲取索引為偶數(shù)的指定選擇器中的奇數(shù)行數(shù)據(jù)，索引默認從0開始$("li:even")獲取所有l(wèi)i元素中，索引為偶數(shù)的奇數(shù)行數(shù)據(jù)，如索引為0、2、4的第1個、第3個和第5個<li>元素:odd獲取索引為奇數(shù)的指定選擇器中的偶數(shù)行數(shù)據(jù)，索引默認從0開始$("li:odd")獲取所有l(wèi)i元素中，索引為奇數(shù)的偶數(shù)行數(shù)據(jù)，如索引為1、3、5的第2個、第4個和第6個<li>元素:eq(index)獲取索引等于index的元素，默認從0開始$("li:eq(3)")獲取索引為3的<li>元素:gt(index)獲取索引大于index的元素$("li:gt(3)")獲取索引大于3的所有<li>元素:lt(index)獲取索引小于index的元素$("li:lt(3)")獲取索引小于3的所有<li>元素:not(seletor)獲取除指定的選擇器外的其他元素$("input:not(:empty)")獲取所有不為空的<input>元素:focus匹配當(dāng)前獲取焦點的元素$("input:focus")匹配當(dāng)前獲取焦點的<input>元素:animated匹配所有正在執(zhí)行動畫效果的元素$("div:not(:animated)")匹配當(dāng)前沒有執(zhí)行動畫的<div>元素（4）其他常用選擇器①內(nèi)容選擇器jQuery提供了根據(jù)內(nèi)容完成指定元素的獲取，常用內(nèi)容過濾選擇器如表4所示。選擇器功能描述示例:contains(text)獲取內(nèi)容包含text文本的元素$("li:contains('Hello')");//獲取內(nèi)容包含“Hello”的<li>元素:empty獲取內(nèi)容為空的元素$("li:empty");//獲取內(nèi)容為空的<li>元素:has(selector)獲取內(nèi)容包含指定選擇器的元素$("li:has('a')");//獲取內(nèi)容中包含<a>元素的所有<li>元素:parent選取帶有子元素或包含文本的元素$("li:parent");//選取帶有子元素或包含文本的<li>元素②可見性選擇器為了方便開發(fā)，jQuery提供了可見或隱藏元素的獲取，具體如表5所示。選擇器功能描述示例:hidden獲取所有隱藏元素$("li:hidden");//選取所有隱藏的<li>元素:visible獲取所有可見元素$("li:visible");//選取所有可見的<li>元素③屬性選擇器jQuery中提供了根據(jù)元素的屬性獲取指定元素的方式，常用的屬性選擇器如表6所示。選擇器功能描述示例[attr]獲取具有指定屬性的元素$("[href]");//選取所有帶有href屬性的元素[attr=value]獲取屬性值等于value的元素$("[href='#']");//選取所有href屬性的值等于"#"的元素[attr!=value]獲取屬性值不等于value的元素$("[href!='#']");//選取所有href屬性的值不等于"#"的元素[attr$=value]獲取屬性值以value結(jié)尾的元素$("[href$='.jpg']");//選取所有href屬性的值以".jpg"結(jié)尾的元素[attr^=value]獲取屬性值以value開始的元素$("[title^='Tom']");//選取所有title屬性的值以"Tom"開頭的元素[attr*=value]獲取屬性值包含value的元素$("[title*='Tom']");//選取所有title屬性值中含有"Tom"的元素④子元素選擇器開發(fā)中若需要通過子元素的方式獲取元素，則可以利用jQuery提供的子元素選擇器完成，常用的子元素選擇器如表7所示。選擇器功能描述示例:nth-child(index/even/odd/公式)索引index默認從1開始，匹配指定index索引、偶數(shù)、奇數(shù)或符合指定公式（如2n，n默認從0開始）的子元素$("p:nth-child(2)");//獲取屬于其父元素的第二個子元素的所有<p>元素:first-child獲取第一個子元素$("p:first-child");//選取屬于其父元素的第一個子元素的所有<p>元素:last-child獲取最后一個子元素$("p:last-child");//選取屬于其父元素的最后一個子元素的所有<p>元素:only-child如果當(dāng)前元素是唯一的子元素，則匹配$("p:only-child");//選取屬于其父元素的唯一子元素的所有<p>元素:nth-last-child(n)選擇所有它們父元素的第n個子元素。計數(shù)從最后一個元素開始到第一個$("p:nth-last-child(2)");//選取屬于其父元素的第二個子元素的<p>元素，從最后一個子元素開始計數(shù):nth-of-type(n)選擇同屬于一個父元素之下，并且標(biāo)簽名相同的子元素中的第n個子元素$("p:nth-of-type(2)");//獲取屬于其父元素的第二個<p>元素的所有<p>元素:first-of-type選擇所有相同的元素名稱的第一個子元素$("p:first-of-type");//選取屬于其父元素的第一個<p>元素的所有<p>元素:last-of-type選擇所有相同的元素名稱的最后一個子元素$("p:last-of-type");//選取屬于其父元素的最后一個<p>元素的所有<p>元素:only-of-type選擇所有沒有兄弟元素，且具有相同的元素名稱的元素$("p:only-of-type");//選取屬于其父元素的特定類型的唯一子元素的所有<p>元素:nth-last-of-type(n)選擇屬于父元素的特定類型的第n個子元素，計數(shù)從最后一個元素到第一個$("p:nth-last-of-type(2)");//選取屬于其父元素的第二個<p>元素的所有<p>元素，從最后一個子元素開始計數(shù)⑤表單選擇器表單在Web開發(fā)中是最常見的操作之一，為此，jQuery專門提供了操作表單元素的表單選擇器，常用的表單選擇器如表8所示。選擇器功能描述示例:input獲取頁面中的所有表單元素，包含<select>以及<textarea>元素$(":input");//獲取所有<input>元素:text選取所有的文本框$(":text");//獲取所有type="text"的<input>元素:password選取所有的密碼框$(":password");//獲取所有type="password"的<input>元素:radio選取所有的單選按鈕$(":radio");//獲取所有type="radio"的<input>元素:checkbox選取所有的復(fù)選框$(":checkbox");//獲取所有type="checkbox"的<input>元素:submit獲取submit提交按鈕$(":submit");//獲取所有type="submit"的<input>元素:reset獲取reset重置按鈕$(":reset");//獲取所有type="reset"的<input>元素:button獲取button按鈕，包括<button></button>和type="button"$(":button");//獲取所有type="button"的<input>元素:image獲取type="image"的圖像域$(":image");//獲取所有type="image"的<input>元素:file獲取type="file"的文件域$(":file");//獲取所有type="file"的<input>元素:enabled獲取所有可用表單元素$(":enabled");//獲取所有啟用的元素:disabled獲取所有不可用表單元素$(":disabled");//獲取所有禁用的元素:selected獲取所有選中的表單元素，主要針對select$(":selected");//獲取所有被選中的<input>元素:checked獲取所有選中的表單元素，主要針對radio和checkbox$(":checked");//獲取所有被選中的<input>元素2、jQuery元素處理在頁面上的元素獲取之后，jQuery提供了一系列方法可以對元素進行增刪改查的操作，同時還提供了一些方法用于元素內(nèi)容、元素樣式以及元素屬性的操作。（1）jQuery元素操作jQuery提供的一系列方法，用于元素的遍歷、創(chuàng)建、添加和刪除操作。①遍歷元素jQuery具有隱式迭代的效果，當(dāng)一個jQuery對象中包含多個元素時，jQueny會對這些元素進行相同的操作。如果想要對這些元素進行遍歷，可以使用jQuery提供的each()方法，其基本語法如下：$(selector).each(function(index，domEle){//對每個元素進行操作});②創(chuàng)建元素在jQuery中直接在“$()”函數(shù)中傳入一個HTML字符串即可方便地動態(tài)創(chuàng)建一個元素。③添加元素jQuery創(chuàng)建完成的元素會保存在內(nèi)存中，要使元素在頁面上顯示需要將它添加到頁面上。jQuery添加元素的方式有兩種，分別是內(nèi)部添加和外部添加。內(nèi)部添加是指在元素內(nèi)部添加元素，用戶可以指定在內(nèi)部的最前面還是最后面添加，通過prepend()方法和append()方法來實現(xiàn)。外部添加指的是在目標(biāo)元素的前面或者后面添加元素，可以通過before()方法和after()方法來實現(xiàn)。④刪除元素常用刪除元素操作一般是指刪除某個元素或者某個元素的子元素，jQuery中提供了相對應(yīng)的兩種方法，如表9所示。方法功能描述empty()刪除元素下的子元素，但不刪除元素本身remove([selector])刪除元素下的子元素和本身，可選參數(shù)選擇器用于篩選元素（2）元素內(nèi)容操作jQuery中的操作元素內(nèi)容方法，主要包括html()方法、text()方法和val()方法。Html()方法用于獲取或設(shè)置元素的HTML內(nèi)容，tex()方法用于獲取或設(shè)置元素的文本內(nèi)容，val()方法用來獲取或設(shè)置表單元素的value值。具體使用說明如表10所示。方法功能描述html()獲取第1個匹配元素的HTML內(nèi)容html(htmlString)設(shè)置第1個匹配元素的HTML內(nèi)容為htmlStringtext()獲取所有匹配元素包含的文本內(nèi)容組合起來的文本text(text)設(shè)置所有匹配元素的文本內(nèi)容為textval()獲取表單元素的value值val(value)設(shè)置表單元素的value值（3）元素樣式操作jQuery提供了兩種方式用于元素樣式的操作，分別是css()方法和設(shè)置類樣式方法，前者通過css()方法直接操作元素樣式，后者通過給元素添加或刪除類名來操作的樣式。①利用css()方法操作元素樣式使用jQuery提供的css()方法可以獲取或者設(shè)置元素的樣式，具體使用說明如表11所示。方法功能描述css(propertyName)獲取第1個匹配元素的樣式css(propertyName,value)為所有匹配的元素設(shè)置樣式css(properties)將一個鍵值對形式的對象properties設(shè)置為所有匹配元素的樣式②利用樣式類操作元素樣式利用css()方法設(shè)置單個樣式時比較方便，但要同時設(shè)置多個樣式時，在css()方法中需要編寫多個鍵值對，既不美觀又不方便。而把要設(shè)置的多個樣式定義在一個樣式類當(dāng)中，通過添加或者移除類名更改元素樣式就方便很多。jQuery提供的操作元素樣式類的方法的使用如表12所示。方法功能描述addClass(className)為每個匹配的元素追加指定類名的樣式removeClass(className)從所有匹配的元素中刪除全部或者指定的類toggleClass(className)判斷指定類是否存在，存在則刪除，不存在則添加（4）元素屬性操作jQuery提供了一些屬性操作的方法，利用這些方法可以快捷地操作元素屬性，具體方法如表13所示。方法功能描述attr(name)獲取第一個匹配元素的自定義屬性值，獲取失敗返回undefinedattr(name,

value)為所有匹配的元素設(shè)置一個自定義屬性值attr(properties)將一個鍵值對形式的對象properties設(shè)置為所有匹配元素的自定義屬性removeAttr(name)從每一個匹配的元素中刪除一個屬性prop(name)獲取第一個匹配元素的屬性值，獲取失敗返回undefinedprop(name,

value)為所有匹配的元素設(shè)置一個屬性prop(properties)將一個鍵值對形式的對象properties設(shè)置為所有匹配元素的屬性data(name)獲取指定元素上存儲的數(shù)據(jù)data(name,

value)設(shè)置指定元素上存儲的數(shù)據(jù)3、jQuery事件機制事件的處理在JavaScript中是一個很重要的功能。jQuery簡化了事件的操作，用戶可以直接調(diào)用相關(guān)事件的操作方法來實現(xiàn)事件的處理。對于頁面加載事件、表單事件、鼠標(biāo)事件以及鍵盤事件等，都可以用jQuery來完成。（1）事件注冊在jQuery中，實現(xiàn)事件注冊有兩種方式，一種是通過事件方法進行注冊，另一種是通過on()方法進行注冊。①通過事件方法注冊事件在jQuery中通過事件方法實現(xiàn)事件注冊是通過調(diào)用某個事件方法，并傳入事件處理函數(shù)實現(xiàn)事件注冊。如click()、change()等。jQuery的事件方法和DOM中的事件屬性相比，省略了開頭的“on”，如jQuery中的click()對應(yīng)DOM中的onclick事件屬性。并且，jQuery的事件方法允許為一個事件綁定多個事件處理函數(shù)，只需多次調(diào)用事件方法，傳入不同的函數(shù)即可。②通過on()方法綁定事件jQuery提供的on()方法用于為元素注冊一個或多個事件處理函數(shù)，基本語法如下：//用法1：一次注冊一個事件element.on(event,fn);//用法2：一次注冊多個事件element.on({event:fn},{event:fn},…);//用法3：為不同事件注冊相同的事件處理函數(shù)element.on(events,fn);（2）事件委托事件委托指的是把原本要給子元素注冊的事件委托給父元素，也就是將子元素的事件注冊到父元素上。jQuery中事件委托通過on()方法來實現(xiàn)，具體用法如下：element.on(event,selector,fn)（3）事件觸發(fā)一般情況下，為元素注冊事件后，由用戶或瀏覽器觸發(fā)事件，若希望某個事件在程序中被觸發(fā)，就需要手動觸發(fā)這個事件。在jQuery中，事件手動觸發(fā)一般有三種方式：通過事件方法實現(xiàn)事件觸發(fā)；通過trigger()方法實現(xiàn)事件觸發(fā)；通過triggerHandler()方法實現(xiàn)事件觸發(fā)。（4）事件解除事件解除指的是移除元素所注冊的事件，jQuery提供了off()方法可以移除元素上注冊的事件。關(guān)于off()方法主要有以下三種常用的方式：element.off(); //解除元素上的所有事件element.off(event); //解除元素上指定的事件element.off(event,selector); //解除元素的事件委托4、jQuery動畫特效適當(dāng)加入動畫特效的網(wǎng)頁在視覺上更加的靈動美觀，可以大大提升用戶體驗。jQuery中內(nèi)置了一系列的動畫方法，當(dāng)此類方法不能滿足實際需求時，用戶還可以進行自定義動畫。（1）內(nèi)置動畫jQuery提供了許多的動畫效果，比如元素的顯示與隱藏、滑動效果、淡入淡出等，還提供了一些方法用于控制動畫的執(zhí)行，比如停止動畫等。常用的內(nèi)置動畫方法如表14所示。分類方法功能描述顯示隱藏show([sp