jQuery教學設(shè)計(完整版1-13章)

jQuery開發(fā)實戰(zhàn)教學設(shè)計課程名稱：jQuery開發(fā)實戰(zhàn)教學設(shè)計______授課年級：________________________授課學期：_______________________教師姓名：_______________________2020年03月01日課程名稱第1章jQuery入門計劃學時2學時內(nèi)容分析本章主要介紹初識jQuery、使用jQuery、jQuery代碼風格教學目標與教學要求要求學生了解jQuery發(fā)展史、了解jQuery基本使用、了解jQuery代碼風格和規(guī)范教學重點使用jQuery、jQuery代碼風格教學難點使用jQuery、jQuery代碼風格教學方式課堂講解及ppt演示教學過程第一課時（初識jQuery）了解微服務(wù)的優(yōu)勢1.介紹本書，引出本課時的主題jQuery是一個小巧且功能豐富的JavaScript（JS）代碼庫，被壓縮過的文件大小只有幾十KB。它使得HTML遍歷查找、事件處理、動畫效果展示和AJAX編程等操作變得更加簡單。本章將從認知、使用、風格、規(guī)范等多個角度、全方位帶領(lǐng)讓讀者了解jQuery庫，使讀者能快速入門，開始jQuery框架的學習。引出本節(jié)內(nèi)容。2.明確學習目標能夠了解jQuery發(fā)展史能夠掌握jQuery資源能夠掌握jQuery的優(yōu)勢知識講解jQuery發(fā)展史1995年時，Netscape公司的布蘭登?艾奇（BrendanEich）僅僅花費了10天左右的時間，就把JavaScript語言的雛形設(shè)計了出來。由于設(shè)計時間太短，語言的一些細節(jié)考慮得不夠嚴謹，導致后來很長一段時間，用JavaScript寫出來的程序都混亂不堪。隨著互聯(lián)網(wǎng)的高速發(fā)展，Web網(wǎng)站對JavaScript的要求越來越高。為了解決原生JavaScript的操作和兼容性問題。出現(xiàn)了很多優(yōu)秀的JavaScript代碼庫。jQuery是其中的佼佼者，下面列舉jQuery庫的一些重要歷史時刻。2005年8月，jQuery庫的作者約翰?萊西格（JohnResig）在他的blog（博客）上發(fā)表了三段重要代碼，這些代碼是對JavaScript使用改進方面的一些想法。令他沒有想到的是，這篇文章一經(jīng)發(fā)布就引起了業(yè)界的關(guān)注。于是JohnResig開始認真地思考這件事情，2006年1月14日，JohnResig正式宣布以jQuery的名稱發(fā)布自己的代碼庫，jQuery庫就此誕生。2006年9月，jQuery迎來了第一個穩(wěn)定版本jQuery1.0.2。2007年7月，jQuery1.1.3版發(fā)布，這次小版本的變化包含了jQuery選擇符引擎執(zhí)行速度的顯著提升。2008年5月，jQuery1.2.6版發(fā)布，這版主要是將布蘭登?艾倫（BrandonAaron）開發(fā)的流行插件Dimensions的功能移植到了核心庫中，同時修改了許多bug，而且有不少性能得到提升。2009年1月，jQuery1.3版發(fā)布，它使用了全新的選擇符引擎Sizzle，在各個瀏覽器下的查詢速度全面超越其他同類型JavaScript框架，代碼庫的性能也因此有了極大提升。在jQuery迅速發(fā)展的同時，一些大的廠商看出了商機。2009年9月，微軟公司和諾基亞公司正式宣布支持開源的jQuery庫，另外，微軟公司還宣稱將把jQuery作為VisualStudio工具集的一部分，提供jQuery的智能提示、代碼片段、示例文檔編制等功能。微軟公司和諾基亞公司將成為jQuery的長期用戶，其他用戶還有Google，Intel，IBM，Intuit等。2010年1月，正值jQuery的四周年生日之際，jQuery1.4版發(fā)布，為了慶祝生日，jQuery團隊特別創(chuàng)建了站點，帶來了連續(xù)14天的新版本專題介紹。2011年1月31日，JohnResig在jQuery官方博客發(fā)表文章，宣布jQuery1.5正式版已經(jīng)如期開發(fā)完成，可以下載使用。2011年11月4日jQuery1.7正式版發(fā)布。新版本包含了很多新的特征，特別提升了事件委托時的性能，尤其是在IE7下。2012年11月14日，jQuery1.8.3發(fā)布，修復了bug和性能衰退問題。2013年3月，jQuery2.0Beta2發(fā)布。jQuery團隊在官方博客中再次提醒用戶，jQuery2.0不再支持IE6/7/8，但jQuery1.9會繼續(xù)支持。因為舊版IE瀏覽器在整個互聯(lián)網(wǎng)中還占有很大一部分市場，所以他們希望大部分網(wǎng)站能繼續(xù)使用jQuery1.x一段時間。jQuery團隊也將同時支持jQuery1.x和2.x。jQuery1.9和jQuery2.0版的API（ApplicationProgrammingInterface，應(yīng)用程序性編程接口）是相同的，所以使用jQuery1.9并不意味著落后。2013年4月18日，jQuery2.0正式版發(fā)布。不再支持IE6/7/8，在IE9/10中使用“兼容性視圖”模式也將會受到影響。更輕、更快的2.0的文件與1.9.1相比小了12%。2014年10月，jQuery團隊開始研發(fā)新的版本，即jQuery3.0。2016年6月，他們迎來了這一個最終版。通過jQuery3.0的版本更新說明，看到了一個保持著向后兼容的更輕便，更快速的jQuery。jQuery提供了一些新的特性，如新的動畫API，支持SVG，防止XSS攻擊等，并且借鑒了很多ES6（JavaScript的最新版本，即ECMAScript6）的語法和編程思想。近年來，不斷地涌現(xiàn)出一些優(yōu)秀的JavaScript代碼庫與jQuery競爭，而jQuery依然那么受歡迎。也許隨著互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，終將有一天jQuery不再流行，但是它的功績與貢獻將永遠鍥刻在互聯(lián)網(wǎng)的歷史舞臺上。jQuery資源下面列舉一些學習jQuery的網(wǎng)絡(luò)資源。jQuery的官方網(wǎng)站上面有jQuery使用的API文檔、文件下載、官方博客、插件集合、瀏覽器支持情況等信息，以及jQueryUI組件、jQuery移動端、jQuery測試等豐富的生態(tài)圈（相關(guān)技術(shù)）內(nèi)容，jQuery官方網(wǎng)站如圖所示。jQueryAPI的中文文檔資源如圖所示。由于官方只提供了英文版API閱讀文檔，英文欠佳的讀者可以參考中文文檔進行jQuery的學習。圖所示為jQuery在Github（全球最大的程序員社交平臺）網(wǎng)站上的organization（組織）界面。這里會展示很多跟jQuery技術(shù)相關(guān)的庫或框架，還有很多從事jQuery的開發(fā)人員，你可以與他們進行交流學習。圖所示為GitHub網(wǎng)站上jQuery庫的源代碼，對喜歡閱讀源代碼的讀者有非常大的幫助。還可以在這里查看到j(luò)Query的更新情況、問答、建議等最新消息。圖所示的插件庫收集了非常多的jQuery插件并提供各種jQuery特效的詳細使用說明，而且支持在線預(yù)覽。jQuery的優(yōu)勢jQuery的官方網(wǎng)站上有這樣一句話：writeless,domore（寫更少的代碼，做更多的事情）。意思就是在展示同樣一個效果時，使用jQuery語法會比用原生JavaScript語法寫的更少、更簡潔。例如，給列表添加單擊效果，用原生JavaScript代碼去實現(xiàn)的話，代碼參考教材1.1.3節(jié)。而用jQuery去實現(xiàn)同樣的效果，代碼參考教材1.1.3節(jié)。與原生JavaScript相比，jQuery在使用上的第二個優(yōu)勢是解決了原生JavaScript的兼容性問題。前面提到，JavaScript從誕生起就有諸多不足，再加上瀏覽器廠商之間的競爭，導致代碼在不同的瀏覽器下產(chǎn)生了很多兼容性問題，開發(fā)人員不得不通過各種黑客手段來解決這些兼容性問題，這使程序的開發(fā)變得困難重重，嚴重地影響了項目的開發(fā)效率。jQuery庫對開發(fā)中常見的兼容性問題實現(xiàn)了封裝，使得開發(fā)人員在開發(fā)項目的時候，不用再考慮兼容性問題，大大提高了開發(fā)的效率和準確度，這也是數(shù)百萬開發(fā)人員選擇jQuery庫的重要原因之一。下面是一個實例，由于原生JavaScript中的getElementsByClassName()方法在IE8以下的瀏覽器中不受支持，所以需要一個兼容性函數(shù)的解決方案，代碼參考教材1.1.3節(jié)。jQuery改進之后，直接就可以通過$()來解決這個兼容性問題，代碼參考教材1.1.3節(jié)。jQuery提供了很多原生JavaScript沒有封裝過的功能，這些功能可直接調(diào)用。舉一個實例，$.type()工具方法（用于判斷變量的類型），代碼參考教材1.1.3節(jié)。jQuery多年來不斷完善代碼與修復代碼，使得jQuery庫非常穩(wěn)定與健壯。在項目中不會出現(xiàn)一些不可控的局面。相關(guān)的API文檔和社區(qū)問答也非常完善與豐富。這些都可以幫助開發(fā)人員快速上手并使用jQuery進行開發(fā)。jQuery庫是很多其他框架的基礎(chǔ)庫，學習jQuery庫后，可以快速掌握Zepto、Bootstrap、Easyui、Swiper等其他框架的使用方法，官方對BootStrap的介紹如圖所示。jQuery有上千萬的現(xiàn)成插件，快速開發(fā)一個項目的時候，如果遇到一些復雜的需求，可以直接引入jQuery插件，如cookie、表單驗證、上傳文件、輪播圖、日歷等。第二課時（使用jQuery、jQuery代碼風格）回顧內(nèi)容回顧上節(jié)內(nèi)容，引出本課時主題。上節(jié)已經(jīng)介紹了初識jQuery，下面開始講解下使用jQuery、jQuery代碼風格。從而引出本節(jié)的內(nèi)容。2.明確學習目標能夠掌握下載與引入能夠掌握編輯器與提示插件能夠掌握第一個jQuery程序能夠掌握共存與混寫能夠掌握鏈式調(diào)用能夠掌握命名規(guī)范能夠掌握解決沖突知識講解下載與引入jQuery文件可以通過jQuery官方網(wǎng)站下載，如圖所示。圖中最新版本為jQuery.3.3.1，這也是本書所使用的版本?？梢赃x擇Downloadthecompressed,productionjQuery3.3.1，這是壓縮版，體積更小，適合生產(chǎn)環(huán)境使用；也可以選擇Downloadtheuncompressed,developmentjQuery3.3.1，這是未壓縮的版本，源碼中有大量的注釋，對于調(diào)試是非常友好的，所以適合開發(fā)環(huán)境使用。建議讀者在學習階段選擇未壓縮的版本。除了直接下載以外，還可以選擇利用npm（全球最大的包管理工具）或Yarn（facebook公司開發(fā)的包管理工具）來下載jQuery庫，下載命令如下所示。npminstalljqueryyarnaddjquery把下載好的jQuery庫通過<script>標簽的方式引入至頁面中，代碼如下所示。<head> <metacharset="UTF-8"> <title>Document</title> <scriptsrc="jquery-3.3.1.js"></script></head>注意src引入地址的路徑，其實跟引入一個普通JS文件并沒有多大的區(qū)別。如果不想下載文件，可以通過CDN（ContentDeliveryNetwork，內(nèi)容分發(fā)網(wǎng)絡(luò)）的方式進行引入，代碼參考教材1.2.1節(jié)。如果當前正在使用前端模塊化方式進行項目的開發(fā)，也可以采用前端模塊化形式進行引入，代碼如下所示。import$from‘jquery’;建議初學者直接通過官方網(wǎng)站下載jQuery文件，并通過<script>方式引入。編輯器與提示插件網(wǎng)頁編輯器是書寫HTML、CSS、JavaScript等代碼的工具軟件。常用的網(wǎng)頁編輯器有Dreamweaver、SublimeText、WebStorm、Hbulider等，本書采用SublimeText網(wǎng)頁編輯器。SublimeText是一款簡單、易上手的網(wǎng)頁編輯器，適合初學者使用。上述編輯器的圖標如圖所示。接下來講解如何使用SublimeText網(wǎng)頁編輯器進行jQuery提示插件的安裝，打開編輯器，按下組合鍵Ctrl+Shift+p，輸入“installpackage”，如圖所示。回車后稍等片刻，會出現(xiàn)一個新的輸入框，在輸入框中輸入“jQuery”，回車進行插件的安裝，如圖所示。安裝好后，在編輯頁面中輸入jQuery代碼中的前幾個單詞，就會出現(xiàn)智能提示信息。第一個jQuery程序為了使讀者快速理解jQuery與原生JavaScript寫法上的區(qū)別，下面的兩個小案例會分別采用兩種方式去實現(xiàn)。案例一：給所有的列表項添加紅色背景，代碼參考教材1.2.3。jQuery代碼非常簡潔，$()方法為jQuery中的選擇器，可以查找到指定的DOM（DocumentObjectModel，文檔對象模型）元素，案例中的$(‘li’)表示查找到頁面中的所有列表項。css()方法可設(shè)置DOM元素的樣式，案例中的css(‘background’,’red’)表示給所有獲取的列表項添加紅色背景。案例二：讓列表實現(xiàn)隔行換色的效果，奇數(shù)行顯示紅色背景，而偶數(shù)行不顯示任何顏色，代碼參考教材1.2.3?？梢灾苯釉?()選擇器中通過偽類:even找到所有的奇數(shù)行，再去添加篩選后的列表項背景顏色。使用jQuery也可以在一定程度上簡化if()判斷的操作。共存與混寫在使用jQuery編寫代碼的時候，通常采用jQuery來完成所有的操作。但有時也需要寫一些原生的JavaScript代碼。jQuery和JavaScript在一個頁面中是可以共存的，但是一定不能混寫。下面是一個實例，給單擊的按鈕添加樣式，代碼如下所示。$('button').click(function(){ this.style.background='red'; });在第2行中，this為原生JS，style也為原生JS，所以第2行采用的是純JS的寫法，這個是正確的寫法。當然也可以采用純jQuery的寫法去實現(xiàn)，代碼如下所示。$('button').click(function(){ $(this).css('background','red'); });在第2行中，$(this)為JQuery方法，css()也為JQuery方法，所以第2行采用的是純JQuery的寫法，這也是正確的。但是接下來的兩種寫法都是錯誤的，代碼如下所示。//錯誤寫法一$('button').click(function(){ this.css('background','red'); }); //錯誤寫法二 $('button').click(function(){ $(this).style.background='red'; });在第3行中，this為原生JS，css()為JQuery方法，前后混寫了，這是不允許的；在第7行中，$(this)為JQuery方法，style為原生JS，前后也是混寫的，也是不允許的?？偨Y(jié)一下就是，在jQuery代碼中是可以共存JavaScript的，但是一定不能混寫。jQuery提供了一個get()方法，可以把jQuery獲取的元素轉(zhuǎn)成原生的JS元素。get()方法會把jQuery獲取的元素轉(zhuǎn)成一個DOM集合，所以需要以添加下標的方式來找到集合中的某個元素，假如集合中只有一個元素，則只需要在get()方法的參數(shù)中添加一個0，代碼如下所示。$('button').click(function(){ $(this).get(0).style.background='red'; });以上為正確的方式，一般情況下不建議這樣書寫jQuery代碼，除非jQuery實現(xiàn)不了，必須通過轉(zhuǎn)換成原生JS元素去實現(xiàn)。鏈式調(diào)用jQuery庫之所以那么受歡迎，很大程度上歸功于它的鏈式調(diào)用。鏈式調(diào)用就是可以連續(xù)調(diào)用方法來實現(xiàn)復雜的需求。下面是一個實例，用原生JavaScript給一個按鈕設(shè)置文本內(nèi)容和樣式，再添加一個單擊操作，代碼參考教材1.3.2節(jié)。用jQuery改寫后的代碼參考教材1.3.2節(jié)。命名規(guī)范有時候，也需要對$()獲取的元素進行賦值操作。這個時候在定義名字時，最好按照規(guī)范在名字的前面添加一個$符號，表示這是一個jQuery元素，這樣可以很好地跟原生JavaScript或其他框架元素進行區(qū)分，對后期代碼的維護有非常大的幫助，如下所示。var$btn=$('button'); var$li=$('li');解決沖突在JavaScript代碼中看到$符號時，第一時間想到的肯定是jQuery庫，但是$并不是一個專屬于jQuery的符號。其他庫也是可以使用的，所以一旦遇到其他庫也使用了$符號，就很有可能產(chǎn)生沖突，那么該如何解決呢？在jQuery中可以使用jQuery()方法去獲取元素，這里的jQuery是$的別名，目的就是解決$符號沖突的問題，代碼如下所示。var$btn=jQuery('button'); var$li=jQuery('li');當然，使用jQuery()方法，會顯得名字比較長，寫起來沒有$那么簡短。可以利用JavaScript函數(shù)作用域的特點，通過匿名函數(shù)的執(zhí)行來添加局部參數(shù)，以引入$符號，從而解決沖突問題并保持$符號的簡短性，代碼如下所示。$(function($){ var$btn=$('button'); var$li=$('li'); })(jQuery);還有一種解決沖突的方式，是利用$.noConflict()工具方法，該方法可以返回$的控制權(quán)，如果參數(shù)設(shè)置為true，可以把jQuery的控制權(quán)也一并收回，代碼如下所示。varjq=$.noConflict(true); jq('li').css('background','red'); console.log($);//undefined console.log(jQuery);//undefined習題教材第1章習題教學后記課程名稱第2章jQuery選擇器詳解計劃學時4學時內(nèi)容分析本章主要介紹選擇器分類、選擇器方法、選擇器技巧教學目標與教學要求要求學生了解jQuery選擇器的種類、了解jQuery選擇器相關(guān)的方法、掌握jQuery選擇器的使用技巧教學重點選擇器分類、選擇器方法、選擇器技巧教學難點選擇器方法、選擇器技巧教學方式課堂講解及ppt演示教學過程第一課時（選擇器分類）內(nèi)容回顧回顧上節(jié)內(nèi)容，引出本課時主題。上節(jié)已經(jīng)介紹了jQuery入門，原生JavaScript語言中只有少許幾種方法能夠用來選擇HTML中指定的元素。常見的只有g(shù)etElementById()、getElementsByTagName()、getElementsByClassName()等。不僅方法少，而且有的方法還存在兼容性問題，例如，上一章中提到的getElementsByClassName()方法，就是IE8以下的瀏覽器所不支持的。jQuery選擇器不僅提供了大量實用方法，還很好地解決了兼容性問題，幫助開發(fā)者快速地進行HTML元素的獲取。從而引出本節(jié)的內(nèi)容。明確學習目標能夠掌握基本選擇器能夠掌握層次選擇器能夠掌握屬性選擇器能夠掌握偽類選擇器知識講解基本選擇器所謂基本選擇器，就是jQuery中使用最為頻繁的選擇器，jQuery中基本選擇器如表所示。選擇器說明ID通過id屬性選擇元素CLASS通過class屬性選擇元素TAG通過標簽方式選擇元素群組通過逗號方式選擇多個元素通配通過星號方式選擇多個元素1.ID選擇器在HTML頁面中創(chuàng)建一組列表標簽，并對其中一行設(shè)置id屬性，如<liid="elem">，這時可通過#elem來獲取相關(guān)的元素。代碼參考教材2.1.1節(jié)。2.CLASS選擇器在HTML頁面中創(chuàng)建一組列表標簽，并對其中兩行設(shè)置class屬性值box。這時可通過jQuery的CLASS選擇器來獲取相關(guān)的元素，需要在class屬性值前面添加一個“.”，代碼參考教材2.1.1節(jié)。3.TAG選擇器在HTML頁面中創(chuàng)建一組列表標簽，如何通過直接獲取標簽的方式來獲取元素?這時可通過jQuery的TAG選擇器。代碼參考教材2.1.1節(jié)。4.群組選擇器在HTML頁面中創(chuàng)建一些不同類型的標簽或設(shè)置不同類型的選擇器時，可通過群組選擇器進行統(tǒng)一獲取，從而進行后續(xù)操作，代碼參考教材2.1.1節(jié)。5.通配選擇器通配選擇器可獲取網(wǎng)頁中的所有元素標簽，需要使用“*”表示通配性，代碼參考教材2.1.1節(jié)。這里要注意，通過$()方法獲取元素時，一定要保證該元素已經(jīng)加載完畢。為了能找到元素，一般把獲取jQuery代碼放到頁面的底部，如上面示例中的代碼。也可以通過$(function(){})的回調(diào)方式來確保DOM元素已經(jīng)加載完畢，代碼參考教材2.1.1節(jié)?？梢钥吹剑?(function(){})可以保證HTML加載完畢后再進行觸發(fā)，類似于原生JavaScript中的window.onload=function(){};。層次選擇器層次選擇器，就是通過元素之間的層次關(guān)系來獲取元素。層次選擇器在實際開發(fā)中也是相當重要的。常見的層次關(guān)系包括后代、父子、兄弟、相鄰，對應(yīng)的選擇器如表所示。選擇器說明后代選擇器M<N，通過M元素選擇所有后代N元素父子選擇器M>N，通過M元素選擇所有子代N元素兄弟選擇器M~N，通過M元素選擇所有后面兄弟為N的元素相鄰選擇器M+N，通過M元素選擇相鄰兄弟為N的元素1.后代選擇器在HTML頁面中創(chuàng)建一組嵌套的列表標簽，然后通過后代選擇器的方式選擇出所有的列表項，代碼參考教材2.1.2節(jié)。2.父子選擇器在HTML頁面中創(chuàng)建一組嵌套的列表標簽，然后通過父子選擇器選出所有子列表項，代碼參考教材2.1.2節(jié)。3.兄弟選擇器在HTML頁面中創(chuàng)建一組列表標簽，然后通過兄弟選擇器選出所有后面的兄弟列表項，代碼參考教材2.1.2節(jié)。4.相鄰選擇器在HTML頁面中創(chuàng)建一組列表標簽，然后通過相鄰選擇器選出所有的相鄰的兄弟列表項，代碼參考教材2.1.2節(jié)。屬性選擇器HTML標簽通常會包含很多標簽屬性，這些標簽屬性可以讓HTML頁面產(chǎn)生不同的結(jié)構(gòu)或效果。在jQuery中，除了可以直接使用ID選擇器和CLASS選擇器以外，還可以利用各種屬性進行選擇，屬性選擇器的相關(guān)說明如表所示。選擇器說明$('M[attr]')M元素選擇指定為attr屬性的集合$

'M[attr=value]')M元素選擇指定為attr屬性和value值的集合$('M[attr!=value]')M元素選擇指定為attr屬性值不為value的集合$('M[attr*=value]')M元素選擇指定為attr屬性并且包含值為value的集合$('M[attr^=value]')M元素選擇指定為attr屬性并且起始值為value的集合$('M[attr$=value]')M元素選擇指定為attr屬性并且結(jié)束值為value的集合$('M[attr1][attr2]')M元素選擇滿足多個屬性的集合1.指定屬性在HTML頁面中創(chuàng)建一組列表標簽，然后給要選擇的列表項添加title屬性，通過指定title屬性的方式來選取集合，代碼參考教材2.1.3節(jié)。2.指定屬性和值在HTML頁面中創(chuàng)建一組列表標簽，通過指定title屬性和值的方式來選取集合，代碼參考教材2.1.3節(jié)。注意，當指定的值包含空格時，需要添加引號。例如，指定值為otherone時，需寫[title="otherone"]。3.指定屬性和排除掉的值在HTML頁面中創(chuàng)建一組列表標簽，通過指定title屬性和排除掉的值來選取集合，代碼參考教材2.1.3節(jié)。注意，CSS中并沒有這種寫法，可選擇:not選擇器進行替代。例如：li:not([title=one]){background:red;}。4.指定屬性和包含值在HTML頁面中創(chuàng)建一組列表標簽，通過指定title屬性和包含值來選取集合，代碼參考教材2.1.3節(jié)。5.指定屬性和起始值在HTML頁面中創(chuàng)建一組列表標簽，通過指定title屬性和起始值來選取集合，代碼參考教材2.1.3節(jié)。6.指定屬性和結(jié)束值在HTML頁面中創(chuàng)建一組列表標簽，通過指定title屬性和結(jié)束值來選取集合，代碼參考教材2.1.3節(jié)。注意，當指定一個確切的值進行選擇時，該值既是起始值又是結(jié)束值。選擇器中的*、^、$等符號都借鑒了正則表達式中的符號用法。7.指定多個屬性或值在HTML頁面中創(chuàng)建一組列表標簽，通過指定選擇出同時具備title屬性和class屬性的集合，代碼參考教材2.1.3節(jié)。偽類選擇器偽類選擇器都是以英文冒號“:”開頭的，用于向某些標簽添加特殊的效果。jQuery提供了大量的偽類選擇器，使可以快速地選擇想要獲取的元素。偽類選擇器按照功能不同，大致可劃分為六大類，如表所示。選擇器說明簡單偽類選擇器對于單一功能的控制結(jié)構(gòu)偽類選擇器對于集合遍歷的控制可見性偽類選擇器對于顯示隱藏的控制內(nèi)容偽類選擇器對于文本內(nèi)容的控制表單偽類選擇器對于表單元素的控制狀態(tài)偽類選擇器對于標簽狀態(tài)的控制1.簡單偽類選擇器簡單偽類選擇器功能單一。下面介紹一些常見的簡單偽類選擇器的用法。:not(selector)not表示排除掉的意思，所以這個簡單偽類選擇器表示獲取相反的其他元素。代碼參考教材2.1.4節(jié)。:first:last:odd:even選擇集合中的第一項、最后一項、偶數(shù)行項、奇數(shù)行項。代碼參考教材2.1.4節(jié)。:eq:lt:gt選擇集合中的某一項，選擇集合中所有小于指定的項、選擇集合中所有大于指定項的項。代碼參考教材2.1.4節(jié)。2.結(jié)構(gòu)偽類選擇器結(jié)構(gòu)偽類選擇器對集合中的項進行分開控制或?qū)现械哪骋豁椷M行單獨控制。下面介紹一些常見的結(jié)構(gòu)偽類選擇器的用法。:nth-of-type()/:nth-child()首先來看：nth-of-type()的使用，其中括號內(nèi)的參數(shù)表示集合中的第幾項，這個下標是從1開始的，而不是0，所以集合的第一項表示為：nth-of-type(1)，其他項以此類推。代碼參考教材2.1.4節(jié)。:nth-child()跟nth-of-type()的用法基本相同，上面的示例代碼中，也可以用:nth-child()來實現(xiàn)同樣的效果。那么區(qū)別在哪里呢？在于選擇的集合不同。:nth-of-type()表示指定類型的集合項，而:nth-child()表示子元素的集合項。代碼參考教材2.1.4節(jié)。:only-of-type/:only-child:only-of-type表示該類型的元素在集合中只有一項，而:only-child表示子元素在集合中只有一項。代碼參考教材2.1.4節(jié)。3.可見性偽類選擇器可見性偽類選擇器根據(jù)元素的“可見”與“不可見”這兩種狀態(tài)來選取元素。下面介紹可見性偽類選擇器的用法。:hidden:visible:hidden選取所有不可見元素，:visible選取所有可見元素，與:hidden正好相反。4.內(nèi)容偽類選擇器內(nèi)容偽類選擇器根據(jù)元素文本內(nèi)容選取元素。下面介紹一些常見的內(nèi)容偽類選擇器的用法。:contains(text):contains(text)選擇包含給定文本內(nèi)容的元素，代碼參考教材2.1.4節(jié)。:has(selector):has(selector)選擇含有選擇器所匹配元素的元素，代碼參考教材2.1.4節(jié)。:empty:parent:empty選擇所有不包含子元素或者不包含文本的元素，而:parent跟:empty正好相反，選擇含有子元素或者文本的元素，代碼參考教材2.1.4節(jié)。5.表單偽類選擇器表單偽類選擇器根據(jù)表單元素的類型選取元素，表參考教材2.1.4節(jié)。6.狀態(tài)偽類選擇器狀態(tài)偽類選擇器根據(jù)表單元素的狀態(tài)選取元素，如表所示。選擇器說明:checked選擇所有被選中的表單元素，一般用于radio和checkboxoption:selected選擇所有被選中的option元素:enabled選擇所有可用元素，一般用于input、select和textarea:disabled選擇所有不可用元素，一般用于input、select和textarea:read-only選擇所有只讀元素，一般用于input和textarea:focus選擇獲得焦點的元素，常用于input和textarea第二課時（選擇器方法、選擇器技巧）內(nèi)容回顧回顧上節(jié)內(nèi)容，引出本課時主題。上節(jié)已經(jīng)介紹了選擇器分類，下面將介紹選擇器方法和選擇器技巧，引出本課時的內(nèi)容。明確學習目標能夠掌握eq()方法能夠掌握find()方法能夠掌握add()方法能夠掌握篩選方法能夠掌握length屬性能夠掌握取值與賦值能夠掌握index()方法能夠掌握each()方法知識講解eq()方法選擇列表中的某一項并添加樣式，非常適合使用eq()方法，該方法可查找一個集合的中指定項。eq()方法的參數(shù)為指定項的下標，下標從0開始計數(shù)。例如，選擇列表項中的第二項，那么下標就為1，即eq(1)，代碼參考教材2.2.1節(jié)。eq(0)表示集合的第一項，而jQuery專門提供了一個獲取集合第一項的方法，即first()，所以eq(0)跟first()這兩種寫法是等價的，在jQuery源碼內(nèi)部，first()方法的實現(xiàn)就是調(diào)用了eq(0)。既然有first()方法，那么就會有l(wèi)ast()方法，last()方法獲取一個集合中的最后一項，該方法也是由eq()方法演化得來的。代碼參考教材2.2.1節(jié)。find()方法選擇指定集合內(nèi)部的元素的時候，可以使用后代選擇器，jQuery也提供了一個專門進行后代查找的方法，即find()方法。add()方法選擇多個元素的時候，可以使用群組選擇器，而jQuery也提供了一個專門進行群組操作的方法，即add()方法。篩選方法偽類選擇器能實現(xiàn)篩選操作，而jQuery也提供了專門的篩選方法。filter()filter()過濾想要的元素，例如，選擇所有帶class屬性，且屬性值為box的列表項，代碼參考教材2.2.4節(jié)。not()not()排除指定的元素，例如，選擇所有class屬性值不為box的列表項，代碼參考教材2.2.4節(jié)。has()has()選擇是否包含某個元素，例如，選擇后代元素帶class屬性，且屬性值為box的列表項，代碼參考教材2.2.4節(jié)。這里需要注意的是跟filter()方法的區(qū)別，has()篩選包含的元素，而filter()篩選當前的元素，篩選條件是不同的，但在本案例中操作對象是一樣的。length屬性jQuery選擇器獲取到的是一個元素集合，哪怕集合中只有一個元素。是集合就必然會有長度，即長度值。在jQuery中，通過length屬性來獲取集合的長度值，代碼參考教材2.3.1節(jié)。取值與賦值本節(jié)來了解下jQuery的特性：取值與賦值。jQuery庫中有很多方法即可以獲取值也可以設(shè)置值，如css()、html()等方法，代碼參考教材2.3.2節(jié)。那么取值和賦值除了參數(shù)的區(qū)別以外，還有哪些區(qū)別呢？前面介紹了jQuery選擇器獲取到的是一個元素集合，針對多個元素的時候，取值的對象是整個集合中的第一項，而賦值的對象是整個集合的所有項。代碼參考教材2.3.2節(jié)。jQuery中的方法基本上都具備以上特性，除了text()方法。text()方法跟html()方法類似，區(qū)別在于text()方法只獲取文本，不獲取元素，先通過一個示例看一下二者之間的差別，再看text()方法在取值與賦值中的特性。代碼參考教材2.3.2節(jié)。text()方法在對一個集合進行取值的時候，會獲取集合所有項的值，代碼參考教材2.3.2節(jié)。text()方法對一個元素或一個集合賦值時，會把要添加的內(nèi)容當作一段字符串進行處理，代碼參考教材2.3.2節(jié)。index()方法集合中還有一個很重要的概念就是索引，索引來自于數(shù)據(jù)庫，是對數(shù)據(jù)庫表中的一列或多列的值進行排序的一種結(jié)構(gòu)，使用索引可快速訪問數(shù)據(jù)庫表中的特定信息。索引值都是唯一的，以便確定集合中的特定身份，一般在計算機中索引值都是從0開始計數(shù)的。jQuery中用index()方法表示集合的索引值，默認情況下為兄弟之間的索引關(guān)系。each()方法前面介紹過，如果對一個集合賦值，就會對所有集合項進行統(tǒng)一操作。這樣就不能對每一項進行特殊的設(shè)置。each()方法就是來解決每一項單獨控制問題的，each()方法的參數(shù)為一個回調(diào)函數(shù)，函數(shù)接收兩個參數(shù)，分別為索引值和集合中的。第三課時上機練習（總結(jié)、練習題）總結(jié)本章內(nèi)容。通過題庫發(fā)送相關(guān)測試題，檢查學生掌握情況。上機練習主要針對本章中需要重點掌握的知識點，以及在程序中容易出錯的內(nèi)容進行練習，通過上機練習可以考察同學對知識點的掌握情況，對代碼的熟練程度。第四課時上機練習（總結(jié)、練習題）總結(jié)本章內(nèi)容通過題庫發(fā)送相關(guān)測試題，檢查學生掌握情況。上機練習主要針對本章中需要重點掌握的知識點，以及在程序中容易出錯的內(nèi)容進行練習，通過上機練習可以考察同學對知識點的掌握情況，對代碼的熟練程度。習題教材第2章習題教學后記課程名稱第3章jQuery操作DOM計劃學時4學時內(nèi)容分析本章主要介紹查找DOM元素、操作DOM元素、DOM高級方法教學目標與教學要求要求學生了解jQuery中的高級用法、掌握jQuery查找DOM節(jié)點的方法、掌握jQuery操作DOM節(jié)點的方法教學重點查找DOM元素、操作DOM元素、DOM高級方法教學難點DOM高級方法教學方式課堂講解及ppt演示教學過程第一課時（DOM元素、操作DOM元素）內(nèi)容回顧回顧上節(jié)內(nèi)容，引出本課時主題。上一章中講到的jQuery選擇器其實也可以算作是查找DOM元素的一種方式，除此之外，還有很多查找DOM元素的方法。在學習查找DOM元素之前，先要搞清楚什么是子節(jié)點、父節(jié)點以及兄弟節(jié)點。在<html>元素中內(nèi)嵌了<head>與<body>元素，所以<head>和<body>元素為<html>元素的子節(jié)點，<html>元素為<head>和<body>元素的父節(jié)點，因為<head>與<body>元素擁有共同的父元素節(jié)點，所以它們互為兄弟節(jié)點。從而引出本節(jié)的內(nèi)容。明確學習目標能夠掌握子節(jié)點查找能夠掌握父節(jié)點查找能夠掌握兄弟節(jié)點查找能夠掌握創(chuàng)建節(jié)點能夠掌握添加節(jié)點能夠掌握替換節(jié)點知識講解子節(jié)點查找children(selector)在jQuery中，children()方法返回被選元素的所有直接子節(jié)點。selector作為可選參數(shù)，值為字符串，表示包含匹配元素的選擇器表達式。子節(jié)點查找的示例代碼參考教材3.1.1節(jié)。父節(jié)點查找parent(selector)在jQuery中，parent()方法獲得當前匹配元素集合中每個元素的父元素，selector作為可選參數(shù)，值為字符串，表示包含匹配元素的選擇器表達式。父節(jié)點查找的示例代碼參考教材3.1.2節(jié)。parents(selector)在jQuery中，parents()方法獲得當前匹配元素集合中每個元素的祖先元素，selector作為可選參數(shù)，值為字符串，表示包含匹配元素的選擇器表達式。祖先節(jié)點查找的示例代碼參考教材3.1.2節(jié)。offsetParent()在jQuery中，offsetParent()方法獲得有定位的最近祖先元素。有定位祖先節(jié)點查找的示例代碼參考教材3.1.2節(jié)。offsetparent()方法跟CSS中的absolute絕對定位用法類似，如果所有的祖先節(jié)點都沒有定位方式，那么offsetparent()就會選中html標簽。兄弟節(jié)點查找next(selector)、prev(selector)在jQuery中，next()方法獲得匹配元素集合中某個元素緊鄰的兄弟元素。如果提供選擇器，則取回匹配該選擇器的下一個兄弟元素。prev()方法獲得匹配元素集合中某個元素緊鄰的前一個兄弟元素。如果提供選擇器，則取回匹配該選擇器的前一個兄弟元素。兄弟節(jié)點查找的示例代碼參考教材3.1.3節(jié)。nextAll(selector)、prevAll(selector)在jQuery中，nextAll()方法獲得匹配元素集合中某個元素后面的所有兄弟元素。如果提供選擇器，則取回匹配該選擇器的后面的所有兄弟元素。prevAll()方法獲得匹配元素集合中某個元素前面的所有兄弟元素。如果提供選擇器，則取回匹配該選擇器的前面的所有兄弟元素。兄弟節(jié)點查找的示例代碼參考教材3.1.3節(jié)。siblings(selector)在jQuery中，siblings()方法獲得匹配集合中某個元素的所有兄弟元素。如果提供選擇器，則取回匹配該選擇器的所有兄弟元素。兄弟節(jié)點查找的示例代碼參考教材3.1.3節(jié)。創(chuàng)建節(jié)點在原生JavaScript中創(chuàng)建一個節(jié)點是比較麻煩的，需要通過document.createElement()方法來實現(xiàn)。而在jQuery中創(chuàng)建一個節(jié)點是非常方便的，采用$()方法實現(xiàn)，代碼如下所示。<script> $('<li>')//創(chuàng)建li標簽 $('<div>')//創(chuàng)建div標簽</script>這里要注意，$()中添加li的時候需要帶上左右尖括號，這表示創(chuàng)建li節(jié)點，若不帶左右類括號則表示選擇li節(jié)點。jQuery中除了可以快速創(chuàng)建一個標簽外，還可以快速創(chuàng)建標簽里的內(nèi)容，演示代碼如下所示。<script> varli=$('<li>列表項</li>'); vardiv=$('<div>塊容器</div>');<script>可以創(chuàng)建標簽以及標簽內(nèi)容都是非常靈活的，注意，創(chuàng)建出來的新元素為jQuery對象，并不是原生的DOM對象。添加節(jié)點創(chuàng)建的節(jié)點暫時存儲在JavaScript內(nèi)存中，如果想把創(chuàng)建的節(jié)點添加到頁面中，需要通過添加節(jié)點的方法來實現(xiàn)。在jQuery中添加節(jié)點的操作模式較多，下面一一進行講解。append()和appendTo()這兩個方法都是把新節(jié)點添加到指定節(jié)點內(nèi)部的末尾位置，語法分別為：指定節(jié)點.append(新節(jié)點)新節(jié)點.appendTo(指定節(jié)點)在代碼中的具體應(yīng)用代碼參考教材3.2.2節(jié)。兩種方法都可以實現(xiàn)添加操作，并且顯示的效果相同，那么它們之間的區(qū)別是什么呢？就是后續(xù)操作所針對的節(jié)點是不同的，演示代碼參考教材3.2.2節(jié)。prepend()和prependTo()這兩個方法都是把新節(jié)點添加到指定節(jié)點內(nèi)部的起始位置，語法分別為：指定節(jié)點.prepend(新節(jié)點)新節(jié)點.prependTo(指定節(jié)點)在代碼中的具體應(yīng)用代碼參考教材3.2.2節(jié)。before()和insertBefore()這兩個方法都是把新節(jié)點添加到指定節(jié)點的前面，語法分別為：指定節(jié)點.insert(新節(jié)點)新節(jié)點.insertBefore(指定節(jié)點)在代碼中的具體應(yīng)用代碼參考教材3.2.2節(jié)。這兩個方法也是針對后續(xù)操作有區(qū)別，其他使用沒有太大差異。after()和insertAfter()這兩個方法都是把新節(jié)點添加到指定節(jié)點的后面，語法分別為：指定節(jié)點.after(新節(jié)點)新節(jié)點.insertAfter(指定節(jié)點)在代碼中的具體應(yīng)用參考教材3.2.2節(jié)。添加節(jié)點的方法，除了用于創(chuàng)建節(jié)點，也可以用于操作頁面中已有的節(jié)點，對已有節(jié)點進行剪切操作，代碼參考教材3.2.2節(jié)。替換節(jié)點有時候需要對節(jié)點進行替換操作，jQuery提供了兩種替換節(jié)點的方法。replaceWith()和replaceAll()這兩個方法都是用新節(jié)點或已有節(jié)點替換掉指定節(jié)點，語法分別為：指定節(jié)點.replaceWith（新節(jié)點）新節(jié)點.replaceAll（指定節(jié)點）在代碼中的具體應(yīng)用代碼參考教材3.2.3節(jié)。第二課時（操作DOM元素、DOM高級方法）內(nèi)容回顧回顧上節(jié)內(nèi)容，引出本課時主題。上節(jié)已經(jīng)介紹了查找DOM元素、創(chuàng)建節(jié)點、添加節(jié)點、替換節(jié)點，下面將介紹刪除節(jié)點、克隆節(jié)點和DOM高級方法，引出本課時的內(nèi)容。明確學習目標能夠掌握刪除節(jié)點能夠掌握克隆節(jié)點能夠掌握closest()方法能夠掌握包裹方法能夠掌握截取范圍方法知識講解刪除節(jié)點有時候需要對節(jié)點進行刪除操作，jQuery中提供了兩種刪除節(jié)點的方法。remove()、detach()這兩個方法都是對指定節(jié)點進行刪除操作的，語法分別為：指定節(jié)點.remove()指定節(jié)點.detach()在代碼中的具體應(yīng)用代碼參考教材3.2.4節(jié)。remove()方法和detach()方法的都是刪除節(jié)點的操作，區(qū)別在于將已刪除節(jié)點再次添加到頁面后，detach()方法會保留節(jié)點刪除前的事件行為，而remove()方法不會保留節(jié)點刪除前的事件行為，將刪掉的節(jié)點重新添加，代碼參考教材3.2.4節(jié)。jQuery中還提供了一個清除指定節(jié)點內(nèi)所有內(nèi)容的方法，即empty()方法。代碼參考教材3.2.4節(jié)。克隆節(jié)點對已有節(jié)點進行添加的時候，使用的是剪切操作。如果想對已有節(jié)點進行克隆，就需要用到clone()方法。clone()這個方法用于克隆節(jié)點的，語法為：指定節(jié)點.clone()在代碼中的具體應(yīng)用代碼參考教材3.2.5節(jié)。clone()方法接收一個參數(shù)，類型為布爾值。參數(shù)為true，表示同時克隆節(jié)點的事件行為，參數(shù)為false的，表示不克隆節(jié)點的事件行為，默認碼數(shù)為false，現(xiàn)將clone()的參數(shù)設(shè)置為true，應(yīng)用代碼參考教材3.2.5節(jié)。closest()方法在jQuery中，closest()方法從當前元素開始沿DOM樹向上查找，獲得匹配選擇器的第一個祖先元素，語法為：指定節(jié)點.closest(滿足條件的祖先節(jié)點)。具體代碼代碼參考教材3.3.1節(jié)。closest()方法在特定的情況下，要比parent()方法靈活的多，下面是一個具體案例，找到按鈕所對應(yīng)的列表項，并對其進行樣式操作，先看parent()的代碼參考教材3.3.1節(jié)。接下來演示closest()方法的代碼參考教材3.3.1節(jié)。可以看到，closest()方法處理問題更加的簡潔與靈活，不用一層層進行查找，只需要指定最近的滿足條件的節(jié)點即可。包裹方法有時候需要對指定的節(jié)點進行包裹操作，即在標簽的外面添加一個父標簽。wrap()wrap()方法將所選元素用某個標簽包裹起來，語法為：指定節(jié)點.wrap(包裹節(jié)點)具體代碼參考教材3.3.2節(jié)。wrapAll()wrapAll()方法會將所有匹配的元素用某個元素包裹起來，語法為：指定節(jié)點.wrapAll(包裹節(jié)點)具體代碼參考教材3.3.2節(jié)。wrapInner()wrapInner()方法將所選元素的所有內(nèi)部元素用某個標簽包裹起來，語法為：指定節(jié)點.wrapInner(包裹節(jié)點)具體代碼參考教材3.3.2節(jié)。unwrap()unwrap()方法刪除包裹節(jié)點，即刪除父節(jié)點，但是刪除的包裹節(jié)點不包含body元素，語法為：指定節(jié)點.unwrap()具體代碼參考教材3.3.2節(jié)。截取范圍方法有時候需要對指定的節(jié)點進行截取操作，即取得整個節(jié)點集合中的某一部分節(jié)點。slice()slice()方法把匹配元素集合縮減為指定范圍的子集，語法為：指定節(jié)點.slice(起始節(jié)點，結(jié)束位置)具體代碼參考教材3.3.3節(jié)。nextUntil()nextUntil()方法獲得某個元素后面的所有兄弟元素，當有第一個參數(shù)時，遇到該參數(shù)所匹配的元素時會停止搜索。當有第二個參數(shù)時，則篩選由該參數(shù)指定的節(jié)點，語法：指定節(jié)點.nextUntil(截止元素，篩選條件)具體代碼參考教材3.3.3節(jié)。prevUntil()prevUntil()方法獲得某個元素前面的所有兄弟元素，使用方式跟nextUntil()類似，只是截取的方向不同，語法：指定節(jié)點.prevUntil(截止元素，篩選條件)具體代碼參考教材3.3.3節(jié)。parentsUntil()parentsUntil()方法獲得某個元素所有祖先元素，跟parents()的區(qū)別在于截取到指定的位置，語法：指定節(jié)點.parentsUntil(截止元素。篩選條件)具體代碼參考教材3.3.3節(jié)。第三課時上機練習（總結(jié)、練習題）總結(jié)本章內(nèi)容。通過題庫發(fā)送相關(guān)測試題，檢查學生掌握情況。上機練習主要針對本章中需要重點掌握的知識點，以及在程序中容易出錯的內(nèi)容進行練習，通過上機練習可以考察同學對知識點的掌握情況，對代碼的熟練程度。第四課時上機練習（總結(jié)、練習題）總結(jié)本章內(nèi)容通過題庫發(fā)送相關(guān)測試題，檢查學生掌握情況。上機練習主要針對本章中需要重點掌握的知識點，以及在程序中容易出錯的內(nèi)容進行練習，通過上機練習可以考察同學對知識點的掌握情況，對代碼的熟練程度。習題教材第3章習題教學后記課程名稱第4章jQuery常用方法計劃學時4學時內(nèi)容分析本章主要介紹class屬性操作、HTML屬性操作、元素尺寸大小、其他常用方法教學目標與教學要求要求學生了解jQuery中常用方法的使用、掌握jQuery中對HTML屬性的操作方法、掌握jQuery中對元素尺寸的操作方法教學重點class屬性操作、HTML屬性操作、元素尺寸大小、其他常用方法教學難點HTML屬性操作、元素尺寸大小教學方式課堂講解及ppt演示教學過程第一課時（class屬性操作、HTML屬性操作）內(nèi)容回顧回顧上節(jié)內(nèi)容，引出本課時主題。上一章中講解jQuery操作DOM，接下來這一章講解jQuery常用方法。在網(wǎng)頁開發(fā)過程中，需要改變某些元素的class屬性，獲取某些元素的文本內(nèi)容，或是計算元素在網(wǎng)頁中所占據(jù)的空間大小等。利用jQuery庫去實現(xiàn)這些操作時，更加簡便快捷。雖然方法簡單，但是使用頻繁，所以需要大家重點掌握，本章將帶領(lǐng)大家學習使用jQuery的常用方法和高級技巧。從而引出本節(jié)的內(nèi)容。明確學習目標能夠掌握addClass()方法能夠掌握removeClass()方法能夠掌握toggleClass()方法能夠掌握hasClass()方法能夠掌握attr()方法能夠掌握prop()方法能夠掌握data()方法知識講解addClass()方法addClass()方法向被選元素添加一個或多個類名。當需要添加多個類名時，從空格隔開即可，語法為：指定節(jié)點.addClass(‘類名’)指定節(jié)點.addClass(‘類名1類名2類名3’)具體代碼參考教材4.1.1節(jié)。當元素已經(jīng)擁有相應(yīng)的class類名時，添加的時候就會跳過已存在的類名，這樣可以避免重復添加。具體代碼參考教材4.1.1節(jié)。addClass()方法的參數(shù)除了可以設(shè)置字符串類型外，還可以添加回調(diào)函數(shù)的形式，這樣可以實現(xiàn)更加特殊的需求。回調(diào)函數(shù)的第一個參數(shù)為索引值，第二個參數(shù)為已有class類名，語法為：指定節(jié)點.addClass(function(索引，已有類名){ return新添加的類名；});具體代碼參考教材4.1.1節(jié)。removeClass()方法removeClass()方法刪除被選元素一個或多個類名。當需要刪除多個類名時，以空格隔開即可，語法為：指定節(jié)點.removeClass(‘類名’)指定節(jié)點.removeClass(‘類名1類名2類名3’)具體代碼參考教材4.1.2節(jié)。當要刪除的類名在指定的元素上不存在時，元素不會有任何變化，這樣可以避免出錯，代碼參考教材4.1.2節(jié)。同理，removeClass()方法也可以添加回調(diào)函數(shù)，參數(shù)也是相同的，語法為：指定節(jié)點.removeClass(function(索引，已有類名){ return刪除類名;});具體代碼參考教材4.1.2節(jié)。toggleClass()方法toggleClass()方法被選元素進行添加類名和刪除類名的切換操作。有時候需要切換一個元素的狀態(tài)，這時非常適合利用toggleClass()方法，語法為：指定節(jié)點.toggleClass(‘類名’)具體代碼參考教材4.1.3節(jié)。同理，toggleClass()方法也可以添加回調(diào)函數(shù)，參數(shù)也是相同的，語法為：指定節(jié)點.toggleClass(function(索引，已有類名){ return切換的類名；});具體代碼參考教材4.1.3節(jié)。toggleClass()方法還可以設(shè)置一個可選參數(shù)，當參數(shù)為true時，只進行添加類名操作，當參數(shù)為false時表示，只進行刪除類名操作，語法為：指定節(jié)點.toggleClass(‘類名’,布爾值)具體代碼參考教材4.1.3節(jié)。hasClass()方法hasClass()方法檢查被選元素是否包含指定的類名。如果被選元素包含指定的類名，該方法返回true，如果不包含指定的類名，則該方法返回false，語法為：指定節(jié)點.hasClass(‘類名’)具體代碼參考教材4.1.4節(jié)。attr()方法attr()方法用于返回或設(shè)置被選元素的屬性值。通過參數(shù)個數(shù)來實現(xiàn)取值與賦值的操作。語法為：指定節(jié)點.attr(屬性,[屬性值])先來看看取值操作，具體代碼參考教材4.2.1節(jié)。再來看attr()方法的賦值操作，具體代碼參考教材4.2.1節(jié)。上面的寫法可以簡化成鏈式的寫法，即$('div').attr('title','一個新的標題').attr('id','element');。當然還有一種更加簡單的寫法，即參數(shù)為對象的形式，具體代碼參考教材4.2.1節(jié)。prop()方法prop()方法用于返回或設(shè)置被選元素的屬性值。通過參數(shù)個數(shù)來實現(xiàn)取值與賦值的操作。語法為：指定節(jié)點.prop(屬性，[屬性值])取值操作代碼參考教材4.2.2節(jié)。接下來演示下attr()方法的賦值操作，具體代碼參考教材4.2.2節(jié)。attr()方法是通過原生JavaScript的attribute()方法實現(xiàn)的，而prop()方法是通過連接符即點號來實現(xiàn)的。在原生JavaScript中，它們對HTML元素自帶的屬性的操作效果都是相同的，但是操作自定義屬性就有區(qū)別了。attr()方法可以設(shè)置和獲取自定義屬性，而prop()方法只能在JavaScript內(nèi)存中設(shè)置和獲取。具體代碼參考教材4.2.2節(jié)。接下來舉個例子，對復選框切換狀態(tài)，具體代碼參考教材4.2.2節(jié)。data()方法data()方法其實跟屬性沒有太大關(guān)系。它是向被選元素附加數(shù)據(jù)，或者從被選元素獲取數(shù)據(jù)。這里把data()方法跟attr()和prop()方法放到一起講，只是因為它們都可以做類似的操作。data()方法同樣不能操作自定義屬性，這一點跟prop()方法類似，語法：指定節(jié)點.data(數(shù)據(jù)屬性,[數(shù)據(jù)值])具體代碼參考教材4.2.3節(jié)。。這兩個方法之間的區(qū)別在于，prop()方法是把屬性掛載到了元素上，而data()方法是把屬性掛載到了一個JavaScript緩存對象上，data()方法更適合掛載大量的數(shù)據(jù)，不會存在內(nèi)存泄露的問題。第二課時（元素尺寸大小、其他常用方法）內(nèi)容回顧回顧上節(jié)內(nèi)容，引出本課時主題。上節(jié)已經(jīng)介紹了class()屬性操作、HTML屬性操作，下面將介紹元素尺寸大小、其他常用方法，引出本課時的內(nèi)容。明確學習目標能夠掌握width()方法能夠掌握innerWidth()方法能夠掌握outerWidth()方法能夠掌握css()方法能夠掌握html()方法能夠掌握val()方法能夠掌握offset()方法能夠掌握position()方法能夠掌握scrollTop()方法能夠掌握text()方法知識講解width()方法width()方法返回或設(shè)置匹配元素的寬度，它表示CSS盒子模型content部分。演示代碼參考教材4.3.1。以上為獲取寬度操作，接下來演示設(shè)置寬度的操作，代碼參考教材4.3.1節(jié)。innerWidth()方法innerWidth()方法返回或設(shè)置匹配元素的寬度。它表示CSS盒子模型content部分+padding部分，演示代碼參考教材4.3.2節(jié)。以上為獲取寬度操作，接下來演示設(shè)置寬度的操作，代碼參考教材4.3.2節(jié)。outerWidth()方法outerWidth()方法返回或設(shè)置匹配元素的寬度。它表示CSS盒子模型content部分+padding部分+border部分，演示代碼參考教材4.3.3節(jié)。以上為獲取寬度操作，下面演示設(shè)置寬度的操作，代碼參考教材4.3.3節(jié)。outerWidth()方法還可以設(shè)置一個可選參數(shù)，類型為布爾值，當參數(shù)值為true時，即outerWidth()，會獲取元素的margin部分，演示代碼參考教材4.3.3節(jié)。css()方法有時候需要對指定的節(jié)點進行包裹操作，即在標簽的外面添加一個父標簽。css()方法返回或設(shè)置被選元素的一個或多個樣式屬性。根據(jù)參數(shù)的個數(shù)來決定取值還是賦值，語法為：指定節(jié)點.css(樣式屬性,[樣式值])具體代碼參考教材4.4.1節(jié)。如需設(shè)置多個CSS屬性，參數(shù)可以設(shè)置為對象類型，語法為：指定節(jié)點.({屬性1：值1，屬性2：值2})具體代碼參考教材4.4.1節(jié)。html()方法html()方法返回或設(shè)置被選元素的內(nèi)容，即操作元素的innerHTML，語法為：指定節(jié)點.html([內(nèi)容值])具體代碼參考教材4.4.2節(jié)。html()方法還可以添加回調(diào)函數(shù)作為函數(shù)。函數(shù)的第一個參數(shù)為索引值，第二個參數(shù)是當前內(nèi)容。函數(shù)的返回值為設(shè)置的新的內(nèi)容，語法為：指定節(jié)點.html(function(索引，當前內(nèi)容){ return新的內(nèi)容；});具體代碼參考教材4.4.2節(jié)。val()方法val()方法返回或設(shè)置被選元素的值，即表單元素的value屬性值，語法為：指定節(jié)點.val([內(nèi)容值])具體代碼參考教材4.4.3節(jié)。val()方法還可以添加回調(diào)函數(shù)作為函數(shù)。函數(shù)的第一個參數(shù)為索引值，第二個參數(shù)是當前內(nèi)容。函數(shù)的返回值為設(shè)置的新的內(nèi)容，語法為：指定節(jié)點.val(function(索引，當前內(nèi)容){ return新的內(nèi)容；})；具體代碼參考教材4.4.3節(jié)。offset()方法offset()方法返回或設(shè)置匹配元素相對于文檔的偏移，即元素相對于瀏覽器左上角的位置。offset()方法返回元素的坐標，坐標有l(wèi)eft和top兩個屬性，屬性值以像素為單位，語法為：指定節(jié)點.offset().left指定節(jié)點.offset().top具體代碼參考教材4.4.4節(jié)。offset()方法除了可以獲取坐標外，還可以設(shè)置元素的坐標，語法為：指定節(jié)點.offset({left:值，top:值});具體代碼參考教材4.4.4節(jié)。position()方法position()方法返回匹配元素相對于祖先元素的位置，這里的祖先元素指的是有定位的祖先元素，如果祖先元素沒有定位，那么position()方法返回的坐標跟offset()相同，其語法為：指定節(jié)點.position().left指定節(jié)點.position().top具體代碼參考教材4.4.5節(jié)。position()方法除了可以獲取坐標外，還可以設(shè)置元素的坐標，用法同offset()方法，這里不再贅述。scrollTop()方法scrollTop()方法返回或設(shè)置匹配元素的滾動條的垂直位置。語法為：指定節(jié)點.scrollTop([位置值])scrollTop()和scrollLeft()是一對方法，由于scrollLeft()方法使用較少，這里不再進行演示。scrollTop()方法的具體代碼參考教材4.4.6節(jié)。text()方法text()方法返回或設(shè)置被選元素的文本內(nèi)容。該方法用于返回內(nèi)容時，返回所有匹配元素的文本內(nèi)容（會刪除HTML標記）；該方法用于設(shè)置內(nèi)容時，重寫所有匹配元素的內(nèi)容。其語法為：$(selector).text():返回文本內(nèi)容$(selector).text():設(shè)置文本內(nèi)容text()方法的演示代碼參考教材4.4.7節(jié)。注意：與text()方法功能類似的還有val()方法和html()方法。html()方法返回或設(shè)置被選元素的內(nèi)容（innerHTML），包括標簽。如果該方法未設(shè)置參數(shù)，則返回被選元素的當前內(nèi)容。val()方法返回或設(shè)置被選元素的值，該元素的值是通過value屬性設(shè)置的，此方法主要用于獲取表單元素的值。第三課時上機練習（總結(jié)、練習題）總結(jié)本章內(nèi)容。通過題庫發(fā)送相關(guān)測試題，檢查學生掌握情況。上機練習主要針對本章中需要重點掌握的知識點，以及在程序中容易出錯的內(nèi)容進行練習，通過上機練習可以考察同學對知識點的掌握情況，對代碼的熟練程度。第四課時上機練習（總結(jié)、練習題）總結(jié)本章內(nèi)容通過題庫發(fā)送相關(guān)測試題，檢查學生掌握情況。上機練習主要針對本章中需要重點掌握的知識點，以及在程序中容易出錯的內(nèi)容進行練習，通過上機練習可以考察同學對知識點的掌握情況，對代碼的熟練程度。習題教材第4章習題教學后記課程名稱第5章jQuery事件操作計劃學時4學時內(nèi)容分析本章主要介紹事件基礎(chǔ)、Event對象詳解、事件高級用法、事件擴展用法教學目標與教學要求要求學生掌握常見的jQuery事件種類、了解Event對象及其屬性和方法、學會事件高級使用技巧教學重點Event對象詳解、事件高級用法、事件擴展用法教學難點事件高級用法、事件擴展用法教學方式課堂講解及ppt演示教學過程第一課時（事件基礎(chǔ)、Event對象詳解）內(nèi)容回顧回顧上節(jié)內(nèi)容，引出本課時主題。上一章中講解jQuery常用方法，接下來這一章講解jQuery事件操作。在瀏覽網(wǎng)頁的時候，用戶經(jīng)常會對頁面進行一些操作，頁面對這些訪問者的響應(yīng)叫作事件。事件處理程序指的是當HTML頁面當中發(fā)生某些事件時候所調(diào)用的方法。jQuery中的事件跟原生JavaScript事件并沒有太大區(qū)別，只不過在jQuery中，對事件進行了二次封裝，統(tǒng)一了調(diào)用的API和解決了事件的兼容性問題。使用jQuery事件，可以快速、高效地滿足一系列復雜的需求。從而引出本節(jié)的內(nèi)容。明確學習目標能夠掌握頁面載入事件能夠掌握鼠標事件能夠掌握鍵盤事件能夠掌握表單事件能夠掌握滾動事件能夠掌握鼠標指針坐標能夠掌握鍵盤鍵值能夠掌握阻止冒泡知識講解頁面載入事件頁面載入事件是當前頁面加載完畢后觸發(fā)的事件行為。在jQuery中是利用ready事件實現(xiàn)的，語法為：指定節(jié)點.hover(移入回調(diào)函數(shù)，移開回調(diào)函數(shù));具體演示代碼參考教材5.1.1節(jié)。在jQuery中，$(document).ready(function(){})跟$(function(){})是等價關(guān)系，后者是前者的簡寫方式，代碼參考教材5.1.1節(jié)。jQuery中的頁面載入事件是DOM加載完就觸發(fā)的，跟原生JavaScript中的window.onload事件有區(qū)別，window.onload事件是等整個頁面加載完畢后再觸發(fā)回調(diào)的，所以jQuery的ready事件觸發(fā)時間點比window.onload事件要早，具體演示代碼參考教材5.1.1節(jié)。鼠標事件鼠標事件是常見的事件交互行為，表列舉了常見的鼠標事件。鼠標事件說明click鼠標單擊事件dbclick鼠標雙擊事件mouseover鼠標移入事件mouseout鼠標移出事件mousemove鼠標移動事件mousedown鼠標按下事件mouseup鼠標抬起事件鼠標事件的語法為：指定節(jié)點.事件(回調(diào)函數(shù))下面以鼠標移入移出事件為例做簡單的演示，具體代碼參考教材5.1.2節(jié)。其他鼠標事件操作方式與此類似，這里不再贅述。注意，mousemove事件為連續(xù)觸發(fā)事件。鍵盤事件鍵盤事件也是常見的事件交互行為，表列舉了常見的鍵盤事件。鍵盤事件說明keydown鍵盤按下事件keypress鍵盤按下事件（只包含數(shù)字鍵）keyup鍵盤抬起事件一般情況下，jQuery是使用keydown、keypress、keyup來捕獲鍵盤事件的。這3個事件有一定的先后順序：keydown→keypress→keyup。演示代碼參考教材5.1.3節(jié)。keydown事件與keypress事件都是鍵盤按下的一瞬間觸發(fā)的，但是keypress事件只能由數(shù)字鍵和字母鍵觸發(fā)，不包括功能鍵，如【F2】鍵、【Ctrl】鍵等。上面的代碼，如果按下一個功能鍵，那么只會觸發(fā)'執(zhí)行1'和'執(zhí)行3'。表單事件表單事件在表單操作中非常重要，表列舉了常見的表單事件。表單事件說明focus光標移入事件blur光標移開事件change改變狀態(tài)事件select選中內(nèi)容事件首先演示foucs和blur這兩個事件，代碼參考教材5.1.4節(jié)。接下來對change事件做簡單的使用演示，代碼參考教材5.1.4節(jié)。當復選框被選中或取消選中時，都會觸發(fā)change事件。最后對select事件做簡單的使用演示，代碼參考教材5.1.4節(jié)。滾動事件滾動事件是當滾動條發(fā)生改變時觸發(fā)的事件，是連續(xù)觸發(fā)事件，接下來就滾動事件做簡單的演示，代碼參考教材5.1.5節(jié)。當拖曳頁面中的滾動條時，觸發(fā)scroll事件，而且會連續(xù)觸發(fā)。類似的事件還有改變?yōu)g覽器窗口大小的resize事件，演示代碼參考教材5.1.5節(jié)。當改變?yōu)g覽器大小時觸發(fā)此事件，注意，事件要加給window對象而不是document對象。鼠標指針坐標在鼠標事件中，經(jīng)常要獲取鼠標指針當前的坐標，來實現(xiàn)一些跟鼠標相關(guān)的特效。下面列舉鼠標指針坐標的兩組操作屬性。clientX、clientYclientX屬性返回鼠標指針位置相對于瀏覽器窗口左上角的水平坐標，單位為像素，與頁面是否橫向滾動無關(guān)。clientY屬性返回鼠標指針位置相對于瀏覽器窗口左上角的垂直坐標，單位為像素，與頁面是否縱向滾動無關(guān)。clientX、clientY其實就是鼠標指針到瀏覽器可視區(qū)左上角的距離。演示代碼參考教材5.2.1節(jié)。pageX、pageYpageX屬性返回鼠標指針位置相對于當前頁面左上角的水平坐標，單位為像素，包括了橫向滾動的位移。pageY屬性返回鼠標指針位置相對于當前頁面左上角的垂直坐標，單位為像素，包括了縱向滾動的位移。pageX、pageY其實就是鼠標指針到文檔左上角的距離，演示代碼參考教材5.2.1節(jié)。當頁面出現(xiàn)縱向滾動條時，得到的clientY與pageY值可能不同，因為clientY表示的是鼠標指針在瀏覽器頁面中的相對位置，而pageY表示的是鼠標指針在瀏覽器頁面中的絕對位置。演示代碼參考教材5.2.1節(jié)。鍵盤鍵值在鍵盤事件中，經(jīng)常要獲取鍵盤按鍵的鍵值，來實現(xiàn)一些跟鍵盤相關(guān)的特效，在Event對象下，通過which屬性來獲取鍵盤鍵值。which屬性對DOM原生的event.keyCode和event.charCode進行了標準化，兼容了各個瀏覽器，演示代碼參考教材5.2.2節(jié)。在jQuery中，which屬性兼容鍵盤的鍵值和鼠標的鍵值，單擊鼠標的左鍵、中鍵（鼠標滾輪）、右鍵都有對應(yīng)的鍵值，分別為1、2、3，演示代碼參考教材5.2.2節(jié)。阻止冒泡一個事件發(fā)生以后，它會在不同的DOM節(jié)點之間傳播，這種傳播分成三個階段。第一階段：從window對象傳導到目標節(jié)點，稱為“捕獲階段”。第二階段：在目標節(jié)點上觸發(fā)，稱為“目標階段”。第三階段：從目標節(jié)點傳導回window對象，稱為“冒泡階段”。這種三階段的傳播模型，會使一個事件在多個節(jié)點上觸發(fā)，如圖所示。首先來看冒泡的行為，如果給html、body、div等元素都添加了事件，只單擊div元素時，會觸發(fā)多次事件，這種現(xiàn)象就是冒泡產(chǎn)生的，演示代碼參考教材5.2.3節(jié)。如果不想觸發(fā)這個冒泡的行為，可以在觸發(fā)元素上添加阻止冒泡，這樣事件流就不會向上繼續(xù)傳播，而這個阻止冒泡的行為是通過Event對象下的stopPropagation()方法來實現(xiàn)的。演示代碼參考教材5.2.3節(jié)。第二課時（Event對象詳解、事件高級用法、事件擴展用法）內(nèi)容回顧回顧上節(jié)內(nèi)容，引出本課時主題。上節(jié)已經(jīng)介紹了事件基礎(chǔ)和鼠標指針坐標、鍵盤鍵值、阻止冒泡，下面將介紹默認事件、事件源、事件高級用法和事件擴展用法，引出本課時的內(nèi)容。明確學習目標能夠掌握默認事件能夠掌握事件源能夠掌握on()、off()方法能夠掌握事件委托能夠掌握事件主動觸發(fā)能夠掌握命名空間能夠掌握hover()方法能夠掌握focusin()、focusout()方法能夠掌握one()方法知識講解默認事件一般情況下事件都具備默認事件行為，這些默認的事件行為往往并不是開發(fā)中所需要的，反而會影響到整個項目的開發(fā)，所以需要阻止默認事件的行為操作。在jQuery中，阻止默認事件是在Event對象下調(diào)用preventDefault()方法來實現(xiàn)的。例如，在地圖應(yīng)用中，想阻止掉瀏覽器默認的右鍵菜單，而生成一個自定義右鍵菜單，這個時候，第一步要做的就是阻止菜單的默認事件，演示代碼參考教材5.2.4節(jié)。contextmenu為右鍵事件，當鼠標在頁面中單擊右鍵時，會阻止掉瀏覽器默認菜單的彈出。在實際開發(fā)過程中，經(jīng)常需要同時阻止冒泡和阻止默認事件，這個時候jQuery提供給開發(fā)者一種簡易寫法：在事件函數(shù)中