從零開始學(xué)JavaScript

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