千鋒教育

jQuery開發(fā)實戰(zhàn)

教學設(shè)計

課程名稱：jQuery開發(fā)賣回教學設(shè)計

授課年級：-..

授課學期：...

教師姓名：_________________________________

2020年03月01日

計劃

課程名稱第1章jQuery入門2學時

學時

內(nèi)容分析本章主要介紹初識jQuery、使用jQuery、jQuery代碼風格

教學目標

要求學生了解jQuery發(fā)展史、了解jQuery基本使用、了解jQuery代碼

與

風格和規(guī)范

教學要求

教學重點使用jQuery、jQuery代碼風格

教學難點使用jQuery、jQuery代碼風格

教學方式課堂講解及ppt演示

第一課時

（初識jQuery）

Q了解微服務(wù)的優(yōu)勢

1.介紹本書，引出本課時的主題

jQuery是一個小巧且功能豐富的JavaScript（JS）代碼庫，被壓縮過的文

件大小只有幾十KB。它使得HTML遍歷查找、事件處理、動畫效果展示和

AJAX編程等操作變得更加簡單。本章將從認知、使用、風格、規(guī)范等多個

角度、全方位帶領(lǐng)讓讀者了解jQuery庫，使讀者能快速入門，開始jQuery

框架的學習。引出本節(jié)內(nèi)容。

2.明確學習目標

教（1）能夠了解jQuery發(fā)展史

（2）能夠掌握jQuery資源

學（3）能夠掌握jQuery的優(yōu)勢

Q知識講解

過

>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)注。于是John

Resig開始認真地思考這件事情,2006年1月14日，JohnResig正式宣布以

jQuery的名稱發(fā)布自己的代碼庫，jQuery庫就此誕生。

2006年9月，jQuery迎來了第一個穩(wěn)定版本jQueryl.0.2。2007年7月，

jQueryl.1.3版發(fā)布，這次小版本的變化包含了jQuery選擇符引擎執(zhí)行退度

的顯著提升。

2008年5月，jQuery1.2.6版發(fā)布,這版主要是將布蘭登?艾倫（Brandon

Aaron）開發(fā)的流行插件Dimensions的功能移植到了核心庫中，同時修改了

許多bug,而且有不少性能得到提升。

2009年1月，jQuery1.3版發(fā)布，它使用了全新的選擇符引擎Sizzle,

在各個瀏覽器下的查詢速度全面超越其他同類型JavaScript框架，代碼店的

性能也因此有了極大提升。

在jQuery迅速發(fā)展的同時，一些大的廠商看出了商機。2009年9月，

微軟公司和諾基亞公司正式宣布支持開源的jQuery庫，另外，微軟公司還宜

稱將把jQuery作為VisualStudio工具集的一部分，提供jQuery的智能提示、

代碼片段、示例文檔編制等功能。微軟公司和諾基亞公司將成為jQuery的長

期用戶，其他用戶還有Google,Intel,IBM,Intuit等。

2010年I月，正值jQuery的四周年生日之際，jQuery1.4版發(fā)布，為了

慶祝生日，jQuery團隊特別創(chuàng)建了站點,帶來了連續(xù)14天的

新版本專題介紹。

2011年1月31口，JohnRcsig在jQuery官方博客發(fā)表文章，宣布jQuery

1.5正式版已經(jīng)如期開發(fā)完成，可以卜載使用。2011年11月4口jQuery1.7

正式版發(fā)布。新版本包含了很多新的特征，特別提升了事件委托時的性能，

尤其是在IE7下。

2012年II月14日，jQuery1.8.3發(fā)布，修復了bug和性能衰退問

題。

2013年3月，jQuery2.0Bela2發(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（ApplicationProgramiring

Interface,應(yīng)用程序性編程接口）是相同的，所以使用jQuery1.9并不意味

著落后。2013年4月18日，jQuery2.0正式版發(fā)布。不再支持IE6/7用,

在IE9/I0中使用“兼容性視圖”模式也將會受到影響。更輕、更快的2.0的

文件與1.9.1相比小了12%o

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)站如圖所

zjso

jQueryAPI的中文文檔資源如圖所示。由于官方只提供了英文版API閱

讀文檔，英文欠佳的讀者可以參考中文文檔進行jQuery的學習。

圖所示為jQuery在Github（全球最大的程序員社交平臺）網(wǎng)站上的

organization（組織）界面。這里會展示很多跟jQuery技術(shù)相關(guān)的庫或框架,

還有很多從事jQuery的開發(fā)人員，你可以與他們進行交流學習。

圖所示為GitHub網(wǎng)站上jQuery庫的源代碼，對喜歡閱讀源代碼的讀者

有非常大的幫助。還可以在這里查看到j(luò)Query的更新情況、問答、建議等最

新消息。

圖所示的插件庫收集了非常多的jQucry插件并提供各種jQucry特效的

詳細使用說明，而且支持在線預覽。

>jQuery的優(yōu)勢

jQuery的宜方網(wǎng)站上有這樣一句話：writeless,domore(寫更少的代

碼，做更多的事情)。意思就是在展示同樣一個效果時，使用jQuery語法會

比用原生JavaScript語法寫的更少、更簡潔。例如，給列表添加單擊效果，

用原生JavaScript代碼去實現(xiàn)的話，代碼參考教材1.1.3吊。

而用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ù)的解決方

案，代碼參考教材LL3節(jié)。

jQuery改進之后，直接就可以通過$()來解決這個兼容性問題，代碼參考

教材1.1.3節(jié)。

jQuery提供了很多原生JavaScript沒有封裝過的功能，這些功能可直接

調(diào)用。舉一個實例，$.lype()工具方法(用于判斷變量的類型)，代碼參考教

材1.1.3節(jié)。

jQuery多年來不斷完善代碼與修復代碼，使得jQuery庫非常穩(wěn)定與健

壯。在項H中不會出現(xiàn)一此不可控的局面。相關(guān)的API文檔和社區(qū)問答也非

常完善與豐富。這些都可以幫助開發(fā)人員決速上手并使用jQuery進行開發(fā)。

jQuery庫是很多其他框架的基礎(chǔ)庫，學習jQuery庫后，可以快速掌握

ZeptOsBootstrap、Easyui、Swipcr等其他框架的使用方法，官方■對Bootstrap

的介紹如圖所示。

jQuery有上千萬的現(xiàn)成插件，快速開發(fā)一個項目的時候，如果遇到一些

復雜的需求，可以宜接引入jQuery插件，如cookie、表單驗證、上傳文件、

輪播圖、口歷等。

第二課時

（使用jQuery、jQuery代碼風格）

C回顧內(nèi)容

1.回顧上節(jié)內(nèi)容，引出本課時主題。

上節(jié)已經(jīng)介紹了初識jQuery,下面開始講解下使用jQuery、jQuery代碼

風格。從而引出本節(jié)的內(nèi)容。

2.明確學習目標

（1）能夠掌握下載與引入

（2）能夠掌握編輯器與提示插件

（3）能夠掌握第一個jQuery程序

（4）能夠掌握共存與混寫

（5）能夠掌握鏈式調(diào)用

（6）能夠掌握命名規(guī)范

（7）能夠掌握解決沖突

C知識講解

>下載與引入

jQuery文件可以通過jQuery官方網(wǎng)站下載，如圖所示。

圖中最新版本為jQuery33.1,這也是本書所使用的版本?？梢赃x擇

Downloadthecompressed,productionjQuery3.3.1,這是壓縮版，體積更小，

適合生產(chǎn)環(huán)境使用；也可以選擇Downloadtheuncompressed,development

jQuery33.1,這是未壓縮的版本，源碼中有大量的注釋，對于調(diào)試是非常友

好的，所以適合開發(fā)環(huán)境使用。建議讀者在學習階段選擇未壓縮的版本C

除了直接下載以外，還可以選擇利用叩m（全球最大的包管理工具）或

Yarn（facebook公司開發(fā)的包管理工具）來下載jQuery庫，下載命令如下所

ZJ'?O

1npminstalljquery

2yarnaddjquery

把下載好的jQuery庫通過〈script,標笠的方式引入至頁面中，代碼如下

所示。

1<head>

2<metacharset="UTF-8">

3<title>Document</title>

4<scriptsrc=Mjquery-3.3.1.js"></script>

b</head>

注意sre引入地址的路徑，其實跟引入一個普通JS文件并沒有多大的區(qū)

別。如果不想下載文件，可以通過CDN（ContentDeliveryNetwork,內(nèi)容分

發(fā)網(wǎng)絡(luò)）的方式進行引入，代碼參考教材1.2.1節(jié)。

如果當前正在使用前端模塊化方式進行項目的開發(fā)，也可以采用前端模

塊化形式進行引入，代碼如下所示。

1import$from'jqueryz;

建議初學者直接通過官方網(wǎng)站下載jQuery文件，并通過〈script〉方式引

入。

>編輯器與提示插件

網(wǎng)頁編輯器是書寫HTML、CSS、JavaScript等代碼的工具軟件。常用的

網(wǎng)頁編輯器有Dreamweaver、SublimeText,WebSlorm、Hbulider等，本書采

用SublimeText網(wǎng)頁編輯器。SublimeText是一款簡單、易上手的網(wǎng)頁編輯

器，適合初學者使用。上述編輯器的圖標如圖所示。

接下來講解如何使用SublimeText網(wǎng)頁編輯器進行jQuery提示插件的

安裝,打開編輯器，按下組合鍵Ctrl+Shift+p,輸入“installpackage"，女」圖

所示。

[installPackage!I

PackageControlInstallPackage

PackageControl:AdvancedInstallPackage

回車后稍等片刻，會出現(xiàn)一個新的輸入框，在輸入框中輸入“jQuery”,

回車進行插件的安裝，如圖所示。

安裝好后，在編輯頁面中輸入jQuery代碼中的前幾個單詞，就會出現(xiàn)智

能提示信息。

>第一個jQuery程序

為了使讀者快速理解jQuery與原生JavaScript寫法上的區(qū)別，下面的兩

個小案例會分別采用兩種方式去實現(xiàn)。

案例一：給所有的列表項添加紅色背景，代碼參考教材123。

jQuery代碼非常簡潔，$()方法為jQuery中的選擇器，可以查找到指定

的DOM(DocumentObjectModel,文檔對象模型)元素，案例中的$('1J)

表示查找到頁面中的所有列表項。css()方法可設(shè)置DOM元素的樣式，案例

中的css('backgroundred')表示給所有獲取的列表項添加紅色背景。

案例二：讓列表實現(xiàn)隔行換色的效果，奇數(shù)行顯示紅色背景，而偶數(shù)行

不顯示任何顏色，代碼參考教材123。

可以直接在$0選擇器中通過偽類:eve「找到所有的奇數(shù)行，再去添加篩

選后的列表項背景顏色。使用jQueiy也可以在一定程度上簡化if()判斷的操

作。

>共存與混寫

在使用jQuery編寫代碼的時候，通常采用jQuery來完成所有的操作。

但有時也需要寫一些原生的JavaScript代碼。jQuery和JavaScript在一個頁

面中是可以共存的，但是一定不能混寫。

下面是一個實例，給單擊的按鈕添加樣式，代碼如下所示。

1$('button').click(function(){

2this.style.background='red';

3});

在第2行中，this為原生JS,style也為原生JS,所以第2行采用的是純

JS的寫法，這個是正確的寫法。

當然也可以采用純jQuery的寫法去實現(xiàn)，代碼如下所示。

1$(*button').click(function(){

2$(this).css('background','red*);

3})；

在第2行中，$(this)為JQuery方法，css()也為JQuery方法，所以第2行

采用的是純JQuery的寫法，這也是正確的。

但是接下來的兩種寫法都是錯誤的，代碼如下所示。

1//錯誤寫法一

2$(1button').click(function(){

3this.css('background',*red,);

4})；

5//錯誤寫法二

6$('button').click(function(){

7${this).style.background=*red';

8})；

在第3行中，this為原生JS,css()為JQuery方法，前后混寫了，這是不

允許的；在第7行中,$(this)為JQuery方法,style為原生JS,前后也是混寫

的，也是不允許的。總結(jié)一下就是，在jQuery代碼中是可以共存JavaScripi

的，但是一定不能混寫。

jQuery提供了一個gei()方法，可以把jQuery獲取的元素轉(zhuǎn)成原生的JS

元素。get。方法會把jQuery獲取的元素轉(zhuǎn)成一個DOM集合，所以需要以添

加下標的方式來找到集合中的某個元素，假如集合中只有一個元素，則只需

要在get。方法的參數(shù)中添加一個0,代碼如下所示。

1$('button1).click(function(){

2$(this).get(O).style.background=*red';

3));

以上為正確的方式，一般情況下不建議這樣書寫jQuery代碼，陵非

jQuery實現(xiàn)不了，必須通過轉(zhuǎn)換成原生JS元素去實現(xiàn)。

>鏈式調(diào)用

jQuery庫之所以那么受歡迎，很大程度上歸功于它的鏈式調(diào)用。鏈式調(diào)

用就是可以連續(xù)調(diào)用方法來實現(xiàn)復雜的需求。

下面是一個實例，用原生JavaScripl給一個按鈕設(shè)置文本內(nèi)容和樣式，

再添加一個單擊操作，代碼參考教材132節(jié)。

用jQuery改寫后的代碼參考教材132節(jié)。

>命名規(guī)范

有時候，也需要對$()獲取的元素進行賦值操作。這個時候在定義名字忖，

最好按照規(guī)范在名字的前面添加一個$符號，表示這是一個jQuery元素，這

樣可以很好地跟原生JavaScript或其他框架元素進行區(qū)分，對后期代碼的維

護有非常大的幫助，如下所示。

1var$btn=$(*button1);

2var$li=$('11*);

>解決沖突

在JavaScript代碼中看到$符號時，第一時間想到的肯定是jQucry庫，

但是$并不是一個專屬于jQuery的符號。其他庫也是可以使用的，所以一旦

遇到其他庫也使用了$符號，就很有可能產(chǎn)生沖突，那么該如何解決呢？

在jQuery中可以使用jQueryO方法去獲取元素，這里的jQuery是$的別

名，目的就是解決$符號沖突的問題，代碼如下所示。

1var$btn=jQuery(button*);

2var$li=jQuery;

當然，使用jQuery。方法，會顯得名字比較長，寫起來沒有$那么簡短。

可以利用JavaScript函數(shù)作用域的特點，通過匿名函數(shù)的執(zhí)行來添加局部參

數(shù)，以引入$符號，從而解決沖突問題并保持$符號的簡短性，代碼如下所示。

1$(function($){

2var$btn=$(*button');

3var$li=$('li');

4})(jQuery);

還有一種解決沖突的方式，是利用$.noConflici()工具方法，該方法可以

返回$的控制權(quán)，如果參數(shù)設(shè)置為Uuc,可以把jQuciy的控制權(quán)也并收回，

代碼如下所示。

1varjq=$.noConflict(true);

2jq('li*).css('background','red*);

3console.log($);//undefined

4console.log(jQuery);//undefined

習題教材第1章習題

教

學

后

記

千鋒教育

jQuery開發(fā)實戰(zhàn)

教學設(shè)計

課程名稱：jQuery開發(fā)C成______________

授課年級：__________________________________

授課學期：__________________________________

教師如名：__________________________________

2020年03月01日

第2章jQuery選擇器詳解t'?4學時

課程名稱

學時

內(nèi)容分析本章主要介紹選擇器分類、選擇器方法、選擇器技巧

教學目標

要求學生了解jQuery選擇器的種類、了解jQuery選擇器相關(guān)的方法、

與

掌握jQuery選擇器的使用技巧

教學要求

教學重點選擇器分類、選擇器方法、選擇器技巧

教學難點選擇器方法、選擇器技巧

教學方式課堂講解及ppt演示

第一課時

（選擇器分類）

C內(nèi)容回顧

1.回顧上節(jié)內(nèi)容，引出本課時主題。

上節(jié)已經(jīng)介紹了jQuery入門，原生JavaScript語言中只有少許幾種方法

能夠用來選擇HTML中指定的元素。常見的只有g(shù)etElementByldO.

getElementsByTagNameO＞getElemenlsByClassName。等。不僅方法少，而且

有的方法還存在兼容性問題，例如，上一章中提到的

getElementsByClassName。方法，就是IE8以下的瀏覽器所不支持的。jQuery

選擇器不僅提供了大量實用方法，還很好地解決了兼容性問題，幫助開發(fā)者

快速地進行HTML元素的獲取。從而引出本節(jié)的內(nèi)容。

教2.明確學習目標

（4）能夠掌握基本選擇器

學（5）能夠掌握層次選擇器

（6）能夠掌握屬性選擇器

過（7）能夠掌握偽類選擇器

Q知識講解

程

＞基本選擇器

所謂基本選擇器，就是jQuery中使用最為頻繁的選擇器，jQuery中基本

選擇器如表所示。

選擇器說明

1D通過id屬性選擇元素

CLASS通過class屬性選杼元素

TAG通過標簽方式選擇元素

群組通過逗號方式選擇多個元素

通配通過星號方式選擇多個元素

1.ID選擇器

在HTML頁面中創(chuàng)建一組列表標簽，并對其中一行設(shè)置id屬性，如＜li

id="elem">,這時可通過#elem來獲取相關(guān)的元素。代碼參考教材2.1.1節(jié)。

2.CLASS選擇器

在HTML頁面中創(chuàng)建一組列表標簽，并對其中兩行設(shè)置class屬性值

box.,這時可通過jQuery的CLASS選擇器來獲取相關(guān)的元素，需要在class

屬性值前面添加一個代碼參考教材2.11節(jié)。

3.TAG選擇器

在HTML頁面中創(chuàng)建一組列表標簽，如何通過直接獲取標簽的方式來

獲取元素?這時可通過jQuery的TAG選擇器。代碼參考教材2.1.1節(jié)。

4.群組選擇器

在HTML頁面中創(chuàng)建一些不同類型的標簽或設(shè)置不同類型的選擇器忖，

可通過群組選擇器進行統(tǒng)一獲取，從而進行后續(xù)操作，代碼參考教材2.1.1

TJ。

5.通配選擇器

通配選擇器可獲取網(wǎng)頁中的所有元素標簽，需要使用“*”表示通配性，

代碼參考教材2.U節(jié)。

這里要注意，通過$()方法獲取元素時,一定要保證該元素已經(jīng)加載完畢。

為了能找到元素，一般把獲取jQuery代碼放到頁面的底部，如上面示例中的

代碼。也可以通過$(fuucliun(){})的回調(diào)方式來確保DOM元素已經(jīng)加載完

畢,代碼參考教材2.1.1節(jié)。

可以看到，$(funclion(){})可以保證HTML加載完畢后再進行觸發(fā)，類

似于原生JavaScript中的window.onload=function。1};。

>層次選擇器

層次選擇器，就是通過元素之間的層次關(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元素選擇指定為aitr屬性的集合

$('M[a(lr=value]')M元素選擇指定為attr屬性和value值的集合

$('M[attr!=value|')M元素選擇指定為alir屬性值不為value的集合

$('M[ttiu*-valuer)M元券選擇指定為aiir屬性并包含值為value的集合

$('M[attrA=valueJ')M元素選擇指定為aitr屬性并且起始值為value的集合

$('M[at(r$=value]')M元素選擇指定為attr屬性并且結(jié)束值為value的集合

$('M[attrl][attr2]')M元素選擇滿足多個屬性的集合

1.指定屬性

在HTML頁面中創(chuàng)建一組列表標簽，然后給要選擇的列表項添加title

屬性，通過指定title屬性的方式來選取集合，代碼參考教材2.1.3節(jié)。

2.指定屬性和值

在HTML頁面中創(chuàng)建一組列表標答，通過指定title屬性和值的方式來

選取集合，代碼參考教材2.1.3節(jié)。

注意，當指定的值包含空格時，需要添加引號。例如，指定值為oiherone

時，需寫[title="otherone"]。

3.指定屬性和排除掉的值

在HTML頁面中創(chuàng)建一組列表標簽，通過指定title屬性和排除掉的值

來選取集合，代碼參考教材2.1.3節(jié)。

注意，CSS中并沒有這種寫法，可選擇:nol選擇器進行替代。例如：

li:not([titlc=onc]){background:rcd;}o

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é)束值。

選擇器中的*、3$等符號都借鑒了正則表達式中的符號用法。

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:Iast: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)偽類選擇器的用法。

:nlh-of4ype()/:n(h-child()

首先來看:nth-of-type。的使用，其中括號內(nèi)的參數(shù)表示集合中的第幾項，

這個下標是從1開始的，而不是0,所以集合的第一項表示為：nth-of-type(l),

其他項以此類推。代碼參考教材2.1.4節(jié)。

:nth-child()跟nth-of-typc()的用法基本相同，上面的示例代碼中，也可以

用:nth-child])來實現(xiàn)同樣的效果。那么區(qū)別在哪里呢？在于選擇的集合不

同。:nth-of-type()表示指定類型的集合項，而:nth-child()表示子元素的集合項。

代碼參考教材2.1.4節(jié)。

:only-of-typc/: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(tcxt)

:contains(text)選擇包含給定文木內(nèi)容的元素,代碼參考教材2.1.4節(jié)c

:has（selector）

:has（selector）選擇含有選擇器所匹配元素的元素，代碼參考教材2.1.4

節(jié)。

:empty:parent

：cmpty選擇所有不包含子元素或者不包含文本的元素，而:parent

跟:empty正好相反，選擇含有子元素或者文本的元素，代碼參考教材2.1.4

節(jié)。

5.表單偽類選擇器

表單偽類選擇器根據(jù)表單元素的類型選取元素，表參考教材2.1.4節(jié)。

6.狀態(tài)偽類選擇器

狀態(tài)偽類選擇器根據(jù)表單元素的狀態(tài)優(yōu)取元素，如表所示。

選擇枝說明

:checked選擇所有被選中的表單元素，一般用于radio和checkbox

option:selected選擇所有被選中的option元素

:enabled選擇所有可用元素,一般用于input、select和textarea

:disabled選擇所有不可用元素,一般用于input、select和textarea

:rcad-only選擇所有只讀元素，一般用于input和lexlarea

:focus選擇獲得焦點的元素，常用于input和（cxtarca

第二課時

（選擇器方法、選擇器技巧）

G內(nèi)容回顧

1.回顧上節(jié)內(nèi)容，引出本課時主題。

上節(jié)已經(jīng)介紹了選擇器分類，下面將介紹選擇指方法和選擇器技巧，引

出本課時的內(nèi)容。

2.明確學習目標

（1）能夠掌握eq（）方法

（2）能夠掌握find（）方法

（3）能夠掌握add。方法

（4）能夠掌握篩選方法

（5）能夠掌握length屬性

（6）能夠掌握取值與賦值

（7）能夠掌握index。方法

（8）能夠掌握each。方法

Q知識講解

>eq（）方法

選擇列表中的某一項并添加樣式，非常適合使用eq（）方法，該方法可查

找一個集合的中指定項。

eq。方法的參數(shù)為指定項的下標，下標從0開始計數(shù)。例如，選擇列表

項中的第二項，那么下標就為1,即eq(l),代碼參考教材2.2.1節(jié)。

eq(0)表示集合的第一項，而jQuery專門提供了一個獲取集合第一項的

方法，即first。，所以eq(0)跟行rst()這兩種寫法是等價的,在jQuery源碼內(nèi)

部，first。方法的實現(xiàn)就是調(diào)用了cq(0)。

既然有first。方法，那么就會有l(wèi)ast。方法，lasl()方法獲取一個集合中的

最后一項，該方法也是rlleqO方法演化得來的。代碼參考教材2.2』節(jié)。

>find。方法

選擇指定集合內(nèi)部的元素的時候，可以使用后代選擇器，jQuery也提供

了一個專門進行后代查找的方法，即find()方法。

>add()方法

選擇多個元素的時候，可以使用群組選擇器，而jQuery也提供了一個專

門進行群組操作的方法，即add()方法。

>篩選方法

偽類選擇器能實現(xiàn)篩選操作，而jQuery也提供了專門的篩選方法。

filtcrO

filler。過濾想要的元素?，例如，選擇所有帶class屬性，且屬性值為box

的列表項，代碼參考教材2.2.4節(jié)。

not()

nol()排除指定的元素，例如，選擇所有class屬性值不為box的列表項,

代碼參考教材224節(jié)。

has()

has()選擇是否包含某個元素，例如，選擇后代元素帶class屬性，且屬

性值為box的列表項，代碼參考教材224節(jié)。

這里需要注意的是跟filter。方法的區(qū)別，has。篩選包含的元素，而filter。

篩選當前的元素，篩選條件是不同的，但在本案例中操作對象是一樣的C

>length屬性

jQuery選擇器獲取到的是一個元素集合，哪怕集合中只有一個元素。是

集合就必然會有長度，即長度值。

在jQuery中，通過length屬性來獲取集合的長度值，代碼參考教材2.3.1

節(jié)。

>取值與賦值

木節(jié)來了解下jQuery的特性：取值與賦值。jQuery庫中有很多方法即可

以獲取值也可以設(shè)置值,如css()、html()等方法,代碼參考教材232節(jié)。

那么取值和賦值除了參數(shù)的區(qū)別以外，還有哪些區(qū)別呢？前面介紹了

jQuery選擇器獲取到的是一個元素集合，針對多個元素的時候，取值的對象

是整個集合中的第一項，而賦值的對象是整個集合的所有項。代碼參考教材

2.3.2節(jié)。

jQuery中的方法基本上都具備以上特性，除了iext()方法。lexl()方法跟

html()方法類似，區(qū)別在于text。方法只獲取文本，不獲取元素，先通過一個

示例看一下二者之間的差別，再看iexi()方法在取值與賦值中的特性。代碼

參考教材2.3.2節(jié)。

iexi()方法在對一個集合進行取值的時候，會獲取集合所有項的值，代碼

參考教材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é)、練習題)

1.總結(jié)本章內(nèi)容。

2.通過題庫發(fā)送相關(guān)測試題，檢查學生掌握情況。

上機練習主要針對本章中需要重點掌握的知識點，以及在程序中容易出

錯的內(nèi)容進行練習，通過上機練習可以考察同學對知識點的掌握情況，對代

碼的熟練程度。

第四課時

上機練習(總結(jié)、練習題)

1.總結(jié)本章內(nèi)容

2.通過題庫發(fā)送相關(guān)測試題，檢查學生掌握情況。

上機練習主要針對本章中需要重點掌握的知識點，以及在程序中容易出

錯的內(nèi)容進行練習，通過上機練習可以考察同學對知識點的掌握情況，對代

碼的熟練程度。

習題教材第2章習題

教

學

后

記

千鋒教育

jQuery開發(fā)實戰(zhàn)

教學設(shè)計

課程名稱：jQuery開發(fā)C成______________

授課年級：__________________________________

授課學期：__________________________________

教師如名：__________________________________

2020年03月01日

計劃

課程名稱笫3章jQuery操作DOM4學時

學時

內(nèi)容分析本章主要介紹查找DOM元素、操作DOM元素、DOM高級方法

教學目標

要求學生了解jQuery中的高級用法、掌握jQuery查找DOM節(jié)點的方

與

法、掌握jQuery操作DOM節(jié)點的方法

教學要求

教學重點查找DOM元素、操作DOM元素、DOM高級方法

教學難點DOM高級方法

教學方式課堂講解及ppt演示

第一課時

（DOM元素、操作DOM元素）

C內(nèi)容回顧

3.回顧上節(jié)內(nèi)容，引出本課時主題。

上一章中講到的jQuery選擇器其實也可以算作是查找DOM元素的一

種方式，除此之外，還有很多查找DOM元素的方法。

在學習查找DOM元素之前，先要搞清楚什么是子節(jié)點、父節(jié)點以及兄

弟節(jié)點。在元素中內(nèi)嵌了vhead＞與＜body＞元素，所以vhead＞和vbody＞

元索為＜htn】l＞元素的子節(jié)點，元素為＜1^€1＞和＜匕0（步＞元素的父節(jié)點，

因為vhead＞與vbody＞元素擁有共同的父元素節(jié)點，所以它們互為兄弟節(jié)點。

從而引出本節(jié)的內(nèi)容。

教4.明確學習目標

（8）能夠掌握子節(jié)點查找

學（9）能夠掌握父節(jié)點查找

（10）能夠掌握兄弟節(jié)點查找

過（11）能夠掌握創(chuàng)建節(jié)點

（12）能夠掌握添加節(jié)點

程（13）能夠掌握替換節(jié)點

小知識講解

＞子節(jié)點查找

children（selector）

在jQuery中，children。方法返回被選元素的所有直接子節(jié)點。selector

作為可選參數(shù)，值為字符串，表示包含匹配元素的選擇器表達式。子節(jié)點查

找的示例代碼參考教材3.1.1節(jié)。

＞父節(jié)點查找

parenl（selector）

在jQuery中，parent。方法獲得當前匹配元素集合中每個元素的父元素，

selector作為可選參數(shù)，值為字符串，表示包含匹配元素的選擇器表達式.父

節(jié)點查找的示例代碼參考教材3.1.2節(jié)。

parentsiselector)

在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中，nexi()方法獲得匹配元素集合中某個元素緊鄰的兄弟元索。

如果提供選擇器，則取回匹配該選擇器的下一個兄弟元素。prev。方法獲得

匹配元素集合中某個元素緊鄰的前一個兄弟元素。如果提供選擇器，則取回

匹配該選擇器的前一個兄弟元素。兄弟節(jié)點查找的示例代碼參考教材3.1.3

"P。

nexiAll(seleclor)>prevAll(selector)

在jQuery中，nextAll()方法獲得匹配元素集合中某個元素后面的所有

兄弟元素<>如果提供選擇器，則取回匹配該選擇器的后面的所有兄弟元素。

prevAHO方法獲得匹配元素集合中某個元素前面的所有兄弟元素。如果提供

選擇器，則取回匹配該選擇器的前面的所有兄弟元素。兄弟節(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)，代碼如下所示。

1<script>

2〃創(chuàng)建li標簽

3$(?<div>')//創(chuàng)建div標簽

4</script>

這里要注意，$()中添加li的時候需要帶上左右尖括號，這表示創(chuàng)建li節(jié)

點，若不帶左右類括號則表示選擇li節(jié)點，

jQuery中除了可以快速創(chuàng)建一個標簽外，還可以快速創(chuàng)建標簽里的內(nèi)

容，演示代碼如下所示。

1<script>

2varli■$(列表項</li>，)；

3vardiv=$(Ydiv>塊容器</div>');

4<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)用代碼參考教材322節(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。和insertBcforc（）

這兩個方法都是把新節(jié)點添加到指定節(jié)點的前面，語法分別為：

指定節(jié)點.insert（新節(jié)點）

新