從零開始學(xué)JavaScript

第1篇　基礎(chǔ)知識(shí)篇第1章　JavaScript簡(jiǎn)介 2 視頻講解：6節(jié)，50分鐘1.1 JavaScript簡(jiǎn)述 31.2 WebStorm的下載與安裝 51.3 JavaScript在HTML中的使用 81.3.1 在頁面中直接嵌入JavaScript代碼 8[實(shí)例1.1] 編寫第一個(gè)JavaScript程序 91.3.2 鏈接外部JavaScript文件 11[實(shí)例1.2] 調(diào)用外部JavaScript文件 111.3.3 作為標(biāo)簽的屬性值使用 121.4 JavaScript基本語法 13本章知識(shí)思維導(dǎo)圖 15第2章　JavaScript語言基礎(chǔ) 16 視頻講解：15節(jié)，135分鐘2.1 數(shù)據(jù)類型 172.1.1 數(shù)值型 172.1.2 字符串型 19[實(shí)例2.1] 輸出奧尼爾的中文名、英文名和別名 202.1.3 布爾型 212.1.4 特殊數(shù)據(jù)類型 222.2 變量 222.2.1 變量的命名 222.2.2 變量的聲明 232.2.3 變量的賦值 232.2.4 變量的類型 24[實(shí)例2.2] 輸出球員信息 252.3 運(yùn)算符 252.3.1 算術(shù)運(yùn)算符 25[實(shí)例2.3] 將華氏度轉(zhuǎn)換為攝氏度 262.3.2 字符串運(yùn)算符 26[實(shí)例2.4] 字符串運(yùn)算符的使用 272.3.3 比較運(yùn)算符 27[實(shí)例2.5] 比較運(yùn)算符的使用 282.3.4 賦值運(yùn)算符 28[實(shí)例2.6] 賦值運(yùn)算符的使用 292.3.5 邏輯運(yùn)算符 29[實(shí)例2.7] 邏輯運(yùn)算符的使用 302.3.6 條件運(yùn)算符 30[實(shí)例2.8] 條件運(yùn)算符的使用 302.3.7 其他運(yùn)算符 312.3.8 運(yùn)算符優(yōu)先級(jí) 32[實(shí)例2.9] 運(yùn)算符優(yōu)先級(jí)的使用 332.4 表達(dá)式 332.5 數(shù)據(jù)類型的轉(zhuǎn)換規(guī)則 34本章知識(shí)思維導(dǎo)圖 36第3章 條件判斷語句 37 視頻講解：5節(jié)，49分鐘3.1 if語句 383.1.1 簡(jiǎn)單if語句 38[實(shí)例3.1] 獲取3個(gè)數(shù)中的最大值 393.1.2 if…else語句 39[實(shí)例3.2] 判斷2022年2月份的天數(shù) 403.1.3 if…else if語句 40[實(shí)例3.3] 輸出考試成績(jī)對(duì)應(yīng)的等級(jí) 413.1.4 if語句的嵌套 42[實(shí)例3.4] 判斷女職工是否已經(jīng)退休 423.2 switch語句 43[實(shí)例3.5] 輸出獎(jiǎng)項(xiàng)級(jí)別及獎(jiǎng)品 44本章知識(shí)思維導(dǎo)圖 45第4章 循環(huán)控制語句 46 視頻講解：6節(jié)，56分鐘4.1 循環(huán)語句 474.1.1 while語句 47[實(shí)例4.1] 計(jì)算1500米比賽的完整圈數(shù) 484.1.2 do…while語句 48[實(shí)例4.2] 計(jì)算1+2+…+100的和 494.1.3 for語句 49[實(shí)例4.3] 計(jì)算100以內(nèi)所有偶數(shù)的和 514.1.4 循環(huán)語句的嵌套 51[實(shí)例4.4] 輸出乘法口訣表 514.2 跳轉(zhuǎn)語句 524.2.1 continue語句 52[實(shí)例4.5] 輸出影廳座位圖 524.2.2 break語句 53本章知識(shí)思維導(dǎo)圖 54第5章 函數(shù) 55 視頻講解：13節(jié)，80分鐘5.1 函數(shù)的定義和調(diào)用 565.1.1 函數(shù)的定義 565.1.2 函數(shù)的調(diào)用 575.2 函數(shù)的參數(shù) 58[實(shí)例5.1] 輸出圖書名稱和圖書作者 595.3 函數(shù)的返回值 59[實(shí)例5.2] 計(jì)算購物車中商品總價(jià) 605.4 嵌套函數(shù) 605.4.1 函數(shù)的嵌套定義 605.4.2 函數(shù)的嵌套調(diào)用 61[實(shí)例5.3] 獲得選手的平均分 615.5 遞歸函數(shù) 625.6 變量的作用域 625.6.1 全局變量和局部變量 625.6.2 變量的優(yōu)先級(jí) 635.7 內(nèi)置函數(shù) 635.7.1 數(shù)值處理函數(shù) 645.7.2 字符串處理函數(shù) 665.8 定義匿名函數(shù) 675.8.1 在表達(dá)式中定義函數(shù) 67[實(shí)例5.4] 輸出星號(hào)金字塔形圖案 685.8.2 使用Function()構(gòu)造函數(shù) 68本章知識(shí)思維導(dǎo)圖 69第6章 自定義對(duì)象 70 視頻講解：8節(jié)，71分鐘6.1 對(duì)象簡(jiǎn)介 716.1.1 什么是對(duì)象 716.1.2 對(duì)象的屬性和方法 716.1.3 JavaScript對(duì)象的種類 726.2 自定義對(duì)象的創(chuàng)建 726.2.1 直接創(chuàng)建自定義對(duì)象 726.2.2 通過自定義構(gòu)造函數(shù)創(chuàng)建對(duì)象 73[實(shí)例6.1] 創(chuàng)建一個(gè)球員對(duì)象 74[實(shí)例6.2] 輸出演員個(gè)人簡(jiǎn)介 75[實(shí)例6.3] 創(chuàng)建一個(gè)圓的對(duì)象 766.2.3 通過Object對(duì)象創(chuàng)建自定義對(duì)象 76[實(shí)例6.4] 創(chuàng)建一個(gè)圖書對(duì)象 786.3 對(duì)象訪問語句 786.3.1 for…in語句 786.3.2 with語句 79本章知識(shí)思維導(dǎo)圖 80第7章 Math對(duì)象和Date對(duì)象 81 視頻講解：2節(jié)，58分鐘7.1 Math對(duì)象 827.1.1 Math對(duì)象的屬性 827.1.2 Math對(duì)象的方法 82[實(shí)例7.1] 生成指定位數(shù)的隨機(jī)數(shù) 837.2 Date對(duì)象 847.2.1 創(chuàng)建Date對(duì)象 847.2.2 Date對(duì)象的屬性 857.2.3 Date對(duì)象的方法 86[實(shí)例7.2] 輸出當(dāng)前的日期和時(shí)間 87[實(shí)例7.3] 獲取當(dāng)前日期距離明年元旦的天數(shù) 89本章知識(shí)思維導(dǎo)圖 90第8章 數(shù)組 91 視頻講解：14節(jié)，111分鐘8.1 數(shù)組介紹 928.2 定義數(shù)組 928.2.1 定義空數(shù)組 928.2.2 指定數(shù)組長(zhǎng)度 938.2.3 指定數(shù)組元素 938.2.4 直接定義數(shù)組 948.3 操作數(shù)組元素 948.3.1 數(shù)組元素的輸入和輸出 94[實(shí)例8.1] 輸出3個(gè)學(xué)霸姓名 968.3.2 數(shù)組元素的添加 968.3.3 數(shù)組元素的刪除 978.4 數(shù)組的屬性 978.4.1 length屬性 97[實(shí)例8.2] 輸出省份、省會(huì)以及旅游景點(diǎn) 988.4.2 prototype屬性 99[實(shí)例8.3] 應(yīng)用自定義方法輸出數(shù)組 998.5 數(shù)組的方法 998.5.1 數(shù)組的添加和刪除 1008.5.2 設(shè)置數(shù)組的排列順序 103[實(shí)例8.4] 輸出2020年電影票房排行榜前五名 1058.5.3 獲取某段數(shù)組元素 105[實(shí)例8.5] 計(jì)算選手的最終得分 1068.5.4 數(shù)組轉(zhuǎn)換成字符串 107本章知識(shí)思維導(dǎo)圖 108第9章 String對(duì)象 109 視頻講解：9節(jié)，65分鐘9.1 String對(duì)象的創(chuàng)建 1109.2 String對(duì)象的屬性 1109.2.1 length屬性 110[實(shí)例9.1] 為金庸小說人物名稱按字?jǐn)?shù)分類 1119.2.2 constructor屬性 1119.2.3 prototype屬性 1129.3 String對(duì)象的方法 1129.3.1 查找字符串 113[實(shí)例9.2] 獲取字符“葡萄”在繞口令中的出現(xiàn)次數(shù) 1149.3.2 截取字符串 115[實(shí)例9.3] 截取網(wǎng)站公告標(biāo)題 1169.3.3 大小寫轉(zhuǎn)換 1179.3.4 連接和拆分 118[實(shí)例9.4] 輸出梁山好漢人物信息 1199.3.5 格式化字符串 120本章知識(shí)思維導(dǎo)圖 122第2篇　核心技術(shù)篇第10章 JavaScript事件處理 124 視頻講解：13節(jié)，45分鐘10.1 事件與事件處理概述 12510.1.1 什么是事件 12510.1.2 JavaScript的常用事件 12510.1.3 事件的調(diào)用 12610.1.4 Event對(duì)象 12710.2 表單相關(guān)事件 12710.2.1 獲得焦點(diǎn)與失去焦點(diǎn)事件 128[實(shí)例10.1] 改變文本框的背景顏色 12810.2.2 失去焦點(diǎn)內(nèi)容改變事件 129[實(shí)例10.2] 改變文本框的字體顏色 12910.2.3 表單提交與重置事件 129[實(shí)例10.3] 驗(yàn)證提交表單中是否有空值 13010.3 鼠標(biāo)鍵盤事件 13010.3.1 鼠標(biāo)單擊事件 131[實(shí)例10.4] 動(dòng)態(tài)改變頁面的背景顏色 13110.3.2 鼠標(biāo)按下和松開事件 131[實(shí)例10.5] 用事件模擬超鏈接標(biāo)記的功能 13210.3.3 鼠標(biāo)移入移出事件 132[實(shí)例10.6] 動(dòng)態(tài)改變圖片的焦點(diǎn) 13210.3.4 鼠標(biāo)移動(dòng)事件 13310.3.5 鍵盤事件 133[實(shí)例10.7] 實(shí)現(xiàn)單擊“A”鍵刷新的功能 13510.4 頁面事件 13510.4.1 頁面加載事件 136[實(shí)例10.8] 動(dòng)態(tài)改變圖片大小 13610.4.2 頁面大小事件 136本章知識(shí)思維導(dǎo)圖 137第11章 文檔對(duì)象 138 視頻講解：7節(jié)，39分鐘11.1 文檔對(duì)象概述 13911.2 文檔對(duì)象的應(yīng)用 14011.2.1 設(shè)置文檔前景色和背景色 140[實(shí)例11.1] 動(dòng)態(tài)改變文檔的前景色和背景色 14011.2.2 設(shè)置動(dòng)態(tài)標(biāo)題欄 141[實(shí)例11.2] 實(shí)現(xiàn)動(dòng)態(tài)標(biāo)題欄 14111.2.3 獲取URL 142[實(shí)例11.3] 顯示當(dāng)前頁面的URL 14211.2.4 在文檔中輸出數(shù)據(jù) 14211.2.5 動(dòng)態(tài)添加一個(gè)HTML標(biāo)記 143[實(shí)例11.4] 動(dòng)態(tài)添加文本框 14311.2.6 獲取文本框并修改其內(nèi)容 144本章知識(shí)思維導(dǎo)圖 145第12章 表單對(duì)象 146 視頻講解：7節(jié)，46分鐘12.1 訪問表單與表單元素 14712.1.1 JavaScript訪問表單 14712.1.2 JavaScript訪問表單元素 14712.2 表單對(duì)象的屬性、方法與事件 14812.3 表單元素 14812.3.1 文本框 149[實(shí)例12.1] 驗(yàn)證表單內(nèi)容是否為空 14912.3.2 按鈕 150[實(shí)例12.2] 獲取表單元素的值 15112.3.3 單選按鈕和復(fù)選框 152[實(shí)例12.3] 獲取人物信息 15312.3.4 下拉菜單 153[實(shí)例12.4] 制作簡(jiǎn)單的選擇職位的程序 155本章知識(shí)思維導(dǎo)圖 157第13章 圖像對(duì)象 158 視頻講解：9節(jié)，55分鐘13.1 圖像對(duì)象概述 15913.1.1 圖像對(duì)象介紹 15913.1.2 圖像對(duì)象的屬性 159[實(shí)例13.1] 輸出圖片的基本信息 16013.1.3 圖像對(duì)象的事件 160[實(shí)例13.2] 當(dāng)鼠標(biāo)指向圖片時(shí)實(shí)現(xiàn)圖片置換 16013.2 圖像對(duì)象的應(yīng)用 16113.2.1 圖片的隨機(jī)顯示 161[實(shí)例13.3] 實(shí)現(xiàn)網(wǎng)頁背景的隨機(jī)變化 16113.2.2 圖片置頂 162[實(shí)例13.4] 實(shí)現(xiàn)圖片總置于頂端的功能 16313.2.3 圖片驗(yàn)證碼 163[實(shí)例13.5] 隨機(jī)生成圖片驗(yàn)證碼 16313.2.4 圖像的預(yù)裝載 164[實(shí)例13.6] 使用預(yù)裝載圖像制作幻燈效果 16513.2.5 圖片漸變效果 166[實(shí)例13.7] 圖片漸變效果 16613.2.6 進(jìn)度條的顯示 167[實(shí)例13.8] 進(jìn)度條的顯示 167本章知識(shí)思維導(dǎo)圖 168第14章 文檔對(duì)象模型（DOM） 169 視頻講解：11節(jié)，41分鐘14.1 DOM概述 17014.2 DOM對(duì)象節(jié)點(diǎn)屬性 17114.3 節(jié)點(diǎn)的操作 17114.3.1 創(chuàng)建節(jié)點(diǎn) 172[實(shí)例14.1] 補(bǔ)全古詩 17214.3.2 插入節(jié)點(diǎn) 173[實(shí)例14.2] 向頁面中插入文本 17314.3.3 復(fù)制節(jié)點(diǎn) 174[實(shí)例14.3] 復(fù)制下拉菜單 17414.3.4 刪除節(jié)點(diǎn) 175[實(shí)例14.4] 動(dòng)態(tài)刪除選中的文本 17514.3.5 替換節(jié)點(diǎn) 176[實(shí)例14.5] 替換標(biāo)記和文本 17614.4 獲取文檔中的指定元素 17614.4.1 通過元素的id屬性獲取元素 177[實(shí)例14.6] 在頁面的指定位置顯示當(dāng)前日期 17714.4.2 通過元素的name屬性獲取元素 177[實(shí)例14.7] 實(shí)現(xiàn)電影圖片的輪換效果 17814.5 與DHTML相對(duì)應(yīng)的DOM 17814.5.1 innerHTML和innerText屬性 179[實(shí)例14.8] 顯示時(shí)間和問候語 17914.5.2 outerHTML和outerText屬性 180本章知識(shí)思維導(dǎo)圖 181第15章 Window對(duì)象 182 視頻講解：14節(jié)，54分鐘15.1 Window對(duì)象概述 18315.1.1 Window對(duì)象的屬性 18315.1.2 Window對(duì)象的方法 18315.1.3 Window對(duì)象的使用 18415.2 對(duì)話框 18415.2.1 警告對(duì)話框 185[實(shí)例15.1] 彈出警告對(duì)話框 18515.2.2 確認(rèn)對(duì)話框 185[實(shí)例15.2] 彈出確認(rèn)對(duì)話框 18615.2.3 提示對(duì)話框 18615.3 打開與關(guān)閉窗口 18715.3.1 打開窗口 187[實(shí)例15.3] 彈出指定大小和位置的新窗口 18815.3.2 關(guān)閉窗口 188[實(shí)例15.4] 關(guān)閉子窗口時(shí)自動(dòng)刷新父窗口 18915.4 控制窗口 19015.4.1 移動(dòng)窗口 190[實(shí)例15.5] 控制彈出窗口的居中顯示 19115.4.2 窗口滾動(dòng) 19215.4.3 改變窗口大小 193[實(shí)例15.6] 動(dòng)態(tài)改變窗口的大小 19315.4.4 訪問窗口歷史 19415.4.5 設(shè)置超時(shí) 195[實(shí)例15.7] 動(dòng)態(tài)顯示日期和時(shí)間 19515.5 通用窗口事件 196本章知識(shí)思維導(dǎo)圖 197第16章 Style對(duì)象 198 視頻講解：2節(jié)，29分鐘16.1 Style對(duì)象簡(jiǎn)介 19916.2 Style對(duì)象的樣式標(biāo)簽屬性和樣式屬性 19916.2.1 樣式標(biāo)簽屬性和樣式屬性 19916.2.2 顏色和背景屬性 202[實(shí)例16.1] 選中的行背景變色 202[實(shí)例16.2] 背景固定居中 20416.2.3 邊框?qū)傩? 205[實(shí)例16.3] 單元格邊框變色 205[實(shí)例16.4] 立體窗口 20716.2.4 定位屬性 207[實(shí)例16.5] 百葉窗 208[實(shí)例16.6] 煙花效果 209[實(shí)例16.7] 跟隨鼠標(biāo)指針移動(dòng)的圖片 21116.2.5 字體屬性 212[實(shí)例16.8] 改變超鏈接字體樣式 21416.2.6 表格布局屬性 215[實(shí)例16.9] 限制表格的寬度 216本章知識(shí)思維導(dǎo)圖 217第3篇　高級(jí)應(yīng)用篇第17章 JavaScript中使用XML 220 視頻講解：8節(jié)，40分鐘17.1 XML簡(jiǎn)介 22117.1.1 創(chuàng)建XML 221[實(shí)例17.1] XML文檔的創(chuàng)建 22117.1.2 DOM與XML 22217.2 解析XML文本 22317.2.1 在IE瀏覽器中解析XML文本 22317.2.2 在非IE瀏覽器中解析XML文本 224[實(shí)例17.2] 獲取XML文本中的數(shù)據(jù) 22517.3 讀取XML數(shù)據(jù) 22617.3.1 獲取XML元素的屬性值 226[實(shí)例17.3] 獲取XML元素的屬性值 22617.3.2 通過DOM元素的方法讀取XML數(shù)據(jù) 227[實(shí)例17.4] 應(yīng)用名稱訪問XML數(shù)據(jù) 22717.3.3 在表格中讀取XML數(shù)據(jù) 229[實(shí)例17.5] 在表格中讀取XML數(shù)據(jù) 22917.3.4 通過JavaScript操作XML實(shí)現(xiàn)分頁 231[實(shí)例17.6] 對(duì)讀取的XML數(shù)據(jù)進(jìn)行分頁操作 231本章知識(shí)思維導(dǎo)圖 233第18章 Ajax技術(shù) 234 視頻講解：11節(jié)，31分鐘18.1 Ajax概述 23518.1.1 Ajax應(yīng)用案例 23518.1.2 Ajax的開發(fā)模式 23518.1.3 Ajax的優(yōu)點(diǎn) 23618.2 Ajax的技術(shù)組成 23718.2.1 XMLHttpRequest對(duì)象 23718.2.2 XML語言 23718.2.3 JavaScript腳本語言 23918.2.4 DOM 23918.2.5 CSS 23918.3 XMLHttpRequest對(duì)象 23918.3.1 XMLHttpRequest對(duì)象的初始化 23918.3.2 XMLHttpRequest對(duì)象的常用屬性 24018.3.3 XMLHttpRequest對(duì)象的常用方法 242[實(shí)例18.1] 讀取HTML文件 244本章知識(shí)思維導(dǎo)圖 246第19章 jQuery基礎(chǔ) 247 視頻講解：8節(jié)，61分鐘19.1 jQuery概述 24819.2 jQuery下載與配置 24819.2.1 下載jQuery 24819.2.2 配置jQuery 24919.3 jQuery選擇器 24919.3.1 jQuery的工廠函數(shù) 25019.3.2 基本選擇器 250[實(shí)例19.1] 獲取文本框中輸入的值 250[實(shí)例19.2] 修改div元素的內(nèi)容 252[實(shí)例19.3] 獲取元素并設(shè)置CSS樣式 253[實(shí)例19.4] 篩選元素并添加新的樣式 25519.3.3 層級(jí)選擇器 256[實(shí)例19.5] 為版權(quán)列表設(shè)置樣式 257[實(shí)例19.6] 為表單元素?fù)Q膚 258[實(shí)例19.7] 改變匹配元素的背景顏色 260[實(shí)例19.8] 篩選div元素的同輩元素 26119.3.4 過濾選擇器 262[實(shí)例19.9] 實(shí)現(xiàn)一個(gè)帶表頭的雙色表格 263[實(shí)例19.10] 應(yīng)用內(nèi)容過濾器匹配不同的單元格 265[實(shí)例19.11] 利用表單對(duì)象的屬性過濾器匹配元素 26719.3.5 屬性選擇器 26819.3.6 表單選擇器 269[實(shí)例19.12] 利用表單選擇器匹配元素 269本章知識(shí)思維導(dǎo)圖 271第20章 jQuery控制頁面 272 視頻講解：4節(jié)，34分鐘20.1 對(duì)元素內(nèi)容和值進(jìn)行操作 27320.1.1 對(duì)元素內(nèi)容操作 273[實(shí)例20.1] 對(duì)元素內(nèi)容進(jìn)行設(shè)置 27420.1.2 對(duì)元素值操作 275[實(shí)例20.2] 為多行列表框設(shè)置并獲取值 27520.2 對(duì)DOM節(jié)點(diǎn)進(jìn)行操作 27620.2.1 創(chuàng)建節(jié)點(diǎn) 27620.2.2 插入節(jié)點(diǎn) 27620.2.3 刪除、復(fù)制與替換節(jié)點(diǎn) 278[實(shí)例20.3] 我的開心小農(nóng)場(chǎng) 27920.3 對(duì)元素屬性進(jìn)行操作 281[實(shí)例20.4] 改變圖片大小 28220.4 對(duì)元素的CSS樣式進(jìn)行操作 28220.4.1 通過修改CSS類實(shí)現(xiàn) 283[實(shí)例20.5] 改變文本樣式 28320.4.2 通過修改CSS屬性實(shí)現(xiàn) 284[實(shí)例20.6] 為圖片添加和去除邊框 285本章知識(shí)思維導(dǎo)圖 286第21章 jQuery的事件處理 287 視頻講解：4節(jié)，14分鐘21.1 頁面加載響應(yīng)事件 28821.2 jQuery中的事件 288[實(shí)例21.1] 橫向?qū)Ш讲藛? 29021.3 事件綁定 29221.3.1 為元素綁定事件 292[實(shí)例21.2] 表格的動(dòng)態(tài)換膚 29221.3.2 移除綁定 29321.3.3 綁定一次性事件處理 29321.4 模擬用戶操作 29421.4.1 模擬用戶的操作觸發(fā)事件 294[實(shí)例21.3] 模擬用戶單擊事件 29421.4.2 模仿懸停事件 294[實(shí)例21.4] 切換表情圖片 295本章知識(shí)思維導(dǎo)圖 296第22章 jQuery的動(dòng)畫效果 297 視頻講解：4節(jié)，26分鐘22.1 基本的動(dòng)畫效果 29822.1.1 隱藏匹配元素 29822.1.2 顯示匹配元素 298[實(shí)例22.1] 實(shí)現(xiàn)自動(dòng)隱藏式菜單 29922.2 淡入、淡出的動(dòng)畫效果 30022.3 滑動(dòng)效果 30122.3.1 滑動(dòng)顯示匹配的元素 30222.3.2 滑動(dòng)隱藏匹配的元素 30222.3.3 通過高度的變化動(dòng)態(tài)切換元素的可見性 302[實(shí)例22.2] 實(shí)現(xiàn)伸縮式導(dǎo)航菜單 30322.4 自定義的動(dòng)畫效果 30522.4.1 使用animate()方法創(chuàng)建自定義動(dòng)畫 305[實(shí)例22.3] 實(shí)現(xiàn)幕簾的效果 30622.4.2 使用stop()方法停止動(dòng)畫 308本章知識(shí)思維導(dǎo)圖 308第23章 Vue.js基礎(chǔ) 309 視頻講解：11節(jié)，86分鐘23.1 什么是Vue.js 31023.2 Vue.js的安裝 31123.2.1 直接下載并使用