## 章名目錄 【上篇】 jQuery篇 第 1章　jQuery基礎(chǔ) 第 2章　HTML5、CSS3和JavaScript基礎(chǔ)知識(shí) 第3章　jQuery選擇器與管理結(jié)果集 第4章　使用jQuery控制DOM 第5章　jQuery事件 第6章　jQuery的功能函數(shù) 第7章　jQuery與AJAX 第8章　利用jQuery制作動(dòng)畫與特效 第9章　jQuery插件 第 10章　綜合實(shí)例一：網(wǎng)頁留言本 【下篇】 Bootstrap篇 第 11章　Bootstrap基礎(chǔ) 第 12章　CSS原子化與工具類 第 13章　Bootstrap的柵格布局 第 14章　Bootstrap的表單樣式 第 15章　Bootstrap的組件庫 第 16章　綜合實(shí)例二：產(chǎn)品著陸頁 第 17章　綜合實(shí)例三：網(wǎng)絡(luò)相冊(cè) ## 詳細(xì)目錄 【上篇】 jQuery篇 第 1章　jQuery基礎(chǔ) 1.1 jQuery概述　2 1.1.1 jQuery簡(jiǎn)介　2 1.1.2 下載并使用jQuery　3 1.2 jQuery的$　4 1.2.1 選擇器　4 1.2.2 功能函數(shù)的前綴　6 1.2.3 window.onload　6 1.2.4 創(chuàng)建DOM元素　7 1.2.5 擴(kuò)展jQuery　8 1.2.6 沖突問題　9 1.3 使用VSCode編寫第 一個(gè)jQuery頁面　10 1.3.1 創(chuàng)建基礎(chǔ)的HTML文檔　10 1.3.2 編寫jQuery代碼　11 本章小結(jié)　12 習(xí)題1　12 第 2章　HTML5、CSS3和JavaScript基礎(chǔ)知識(shí) 2.1 ES6的新特性　13 2.1.1 let關(guān)鍵字　14 2.1.2 const關(guān)鍵字　14 2.1.3 for…of循環(huán)　15 2.1.4 字符串模板　15 2.1.5 參數(shù)默認(rèn)值　16 2.1.6 類與繼承　16 2.1.7 箭頭函數(shù)　17 2.1.8 剩余運(yùn)算符與剩余參數(shù)　19 2.1.9 展開運(yùn)算符　19 2.1.10 數(shù)組的解構(gòu)賦值　19 2.1.11 對(duì)象的解構(gòu)賦值　20 2.1.12 模塊　20 2.2 HTML5新增的語義化標(biāo)記　21 2.3 CSS3引入的常用新特性　23 2.3.1 新增的常用樣式屬性　23 2.3.2 新增的布局方式——彈性盒子　25 2.3.3 新增的布局方式——網(wǎng)格　26 本章小結(jié)　27 習(xí)題2　27 第3章　jQuery選擇器與管理結(jié)果集 3.1 選擇器　28 3.1.1 屬性選擇器　28 3.1.2 包含選擇器　31 3.1.3 位置選擇器　32 3.1.4 過濾選擇器　35 3.1.5 反向選擇器　36 3.2 遍歷DOM　37 3.2.1 children()　37 3.2.2 parent()和parents()　39 3.2.3 siblings()　41 3.3 管理結(jié)果集　43 3.3.1 獲取選中元素的個(gè)數(shù)　43 3.3.2 提取元素　44 3.3.3 添加、刪除、過濾　46 3.3.4 查找　49 3.3.5 遍歷　50 3.4 jQuery鏈　51 本章小結(jié)　51 習(xí)題3　51 第4章　使用jQuery控制DOM 4.1 網(wǎng)頁中的DOM框架　54 4.2 DOM中的節(jié)點(diǎn)　54 4.2.1 元素節(jié)點(diǎn)　55 4.2.2 文本節(jié)點(diǎn)　55 4.2.3 屬性節(jié)點(diǎn)　55 4.3 標(biāo)記的屬性　55 4.3.1 獲取屬性的值　56 4.3.2 設(shè)置屬性的值　57 4.3.3 刪除屬性　59 4.4 元素的樣式　59 4.4.1 添加、刪除CSS類　60 4.4.2 動(dòng)態(tài)切換　60 4.4.3 直接獲取、設(shè)置樣式　61 4.5 頁面的元素　63 4.5.1 直接獲取、編輯內(nèi)容　63 4.5.2 添加元素　64 4.5.3 刪除元素　68 4.5.4 克隆元素　70 4.6 表單元素的值　71 4.6.1 獲取表單元素的值　72 4.6.2 設(shè)置表單元素的值　73 4.7 元素的尺寸　74 4.8 元素的位置　76 4.8.1 offset()方法　76 4.8.2 position()方法　77 4.8.3 scrollTop()方法　78 本章小結(jié)　79 習(xí)題4　79 第5章　jQuery事件 5.1 事件與事件流　80 5.2 事件監(jiān)聽　81 5.2.1 bind()方法　81 5.2.2 one()方法　83 5.2.3 JavaScript的事件監(jiān)聽　84 5.3 事件刪除　85 5.4 事件對(duì)象　87 5.5 事件觸發(fā)　88 5.6 事件的動(dòng)態(tài)交替　89 5.6.1 hover事件的交替　89 5.6.2 click事件的交替　90 5.7 事件委托　91 5.8 動(dòng)手練習(xí)：快餐在線　93 5.8.1 框架搭建　93 5.8.2 添加事件　94 5.8.3 樣式　97 本章小結(jié)　99 習(xí)題5　99 第6章　jQuery的功能函數(shù) 6.1 處理JavaScript對(duì)象　101 6.1.1 遍歷　101 6.1.2 數(shù)據(jù)過濾　103 6.1.3 數(shù)組的轉(zhuǎn)化　104 6.1.4 數(shù)組元素的查找　107 6.2 $.data()方法　108 6.3 $.extend()方法　109 6.4 類型判斷　110 本章小結(jié)　112 習(xí)題6　112 第7章　jQuery與AJAX 7.1 認(rèn)識(shí)AJAX　113 7.1.1 AJAX的基本概念　113 7.1.2 AJAX的組成　115 7.2 獲取異步數(shù)據(jù)　115 7.2.1 傳統(tǒng)方法　116 7.2.2 jQuery的load()方法　117 7.3 GET與POST　119 7.4 控制AJAX　121 7.4.1 設(shè)置AJAX訪問服務(wù)器的細(xì)節(jié)　121 7.4.2 全局設(shè)定AJAX　123 7.4.3 AJAX事件　124 7.4.4 實(shí)例：模擬百度的數(shù)據(jù)加載　126 7.5 實(shí)例：利用jQuery制作自動(dòng)提示的文本框　128 7.5.1 框架結(jié)構(gòu)　128 7.5.2 匹配用戶輸入　129 7.5.3 顯示/清除提示框　130 本章小結(jié)　133 習(xí)題7　133 第8章　利用jQuery制作動(dòng)畫與特效 8.1 元素的顯示和隱藏　135 8.1.1 show()和hide()　135 8.1.2 實(shí)例：多級(jí)菜單　136 8.1.3 toggle()　138 8.2 淡入淡出的特效　138 8.2.1 再探討show()、hide()和toggle()　139 8.2.2 fadeIn()和fadeOut()　140 8.2.3 自定義變化透明度　141 8.3 幻燈片特效　142 8.4 自定義動(dòng)畫　144 本章小結(jié)　145 習(xí)題8　146 第9章　jQuery插件 9.1 模擬加入購物車　147 9.1.1 鼠標(biāo)拖曳　147 9.1.2 拖入購物車　151 9.2 流行的Tab菜單　152 本章小結(jié)　155 習(xí)題9　155 第 10章　綜合實(shí)例一：網(wǎng)頁留言本 10.1 基本留言本　156 10.2 改用AJAX方式實(shí)現(xiàn)留言本　158 10.2.1 讀取留言列表　158 10.2.2 保存并返回新留言　159 10.2.3 留言本入口頁面　159 10.3 對(duì)表單數(shù)據(jù)進(jìn)行驗(yàn)證　161 本章小結(jié)　162 【下篇】 Bootstrap篇 第 11章　Bootstrap基礎(chǔ) 11.1 Bootstrap是什么　164 11.2 下載并使用Bootstrap　165 11.3 常用樣式　167 11.3.1 文本樣式　167 11.3.2 圖片樣式　171 11.3.3 表格樣式　172 11.4 圖標(biāo)庫　174 本章小結(jié)　176 習(xí)題11　176 第 12章　CSS原子化與工具類 12.1 CSS原子化理念　177 12.2 Bootstrap的工具類規(guī)則　181 12.3 顏色工具類　182 12.4 尺寸工具類　184 12.4.1 font-size　184 12.4.2 padding和margin　184 12.4.3 width和height　185 12.5 布局工具類　186 12.5.1 display　186 12.5.2 flexbox　186 12.5.3 實(shí)例：制作導(dǎo)航欄　187 12.5.4 float　190 12.6 其他工具類　191 12.7 動(dòng)手練習(xí)：創(chuàng)建嵌套的留言布局　192 12.7.1 搭建框架　193 12.7.2 用工具類布局　193 12.7.3 頭像放在右側(cè)　194 12.7.4 實(shí)現(xiàn)布局的嵌套　194 本章小結(jié)　195 習(xí)題12　195 第 13章　Bootstrap的柵格布局 13.1 柵格布局基礎(chǔ)　196 13.1.1 柵格布局的理念　196 13.1.2 實(shí)例　198 13.1.3 理解屏幕的分辨率概念　204 13.2 基本用法　206 13.2.1 響應(yīng)式斷點(diǎn)　206 13.2.2 常規(guī)用法　207 13.2.3 設(shè)置行間距與列間距　209 13.3 高級(jí)用法　212 13.3.1 柵格嵌套　212 13.3.2 流式布局　213 13.3.3 設(shè)定列寬　214 13.3.4 列的偏移與對(duì)齊　216 本章小結(jié)　219 習(xí)題13　219 第 14章　Bootstrap的表單樣式 14.1 表單控件樣式　221 14.1.1 輸入框　221 14.1.2 選擇框　224 14.1.3 單選框與復(fù)選框　225 14.1.4 滑動(dòng)條輸入　227 14.1.5 輸入組　227 14.2 表單布局　228 14.3 表單校驗(yàn)　230 14.3.1 客戶端校驗(yàn)　230 14.3.2 服務(wù)器端校驗(yàn)　232 14.4 動(dòng)手練習(xí)：創(chuàng)建一個(gè)下單結(jié)賬頁面　233 本章小結(jié)　234 習(xí)題14　235 第 15章　Bootstrap的組件庫 15.1 按鈕　236 15.2 反饋和提示類組件　238 15.2.1 警告框　238 15.2.2 加載中　238 15.2.3 輕量提示　239 15.2.4 模態(tài)框　242 15.3 導(dǎo)航欄　244 15.4 卡片　248 15.5 輪播圖　252 本章小結(jié)　253 習(xí)題15　253 第 16章　綜合實(shí)例二：產(chǎn)品著陸頁 16.1 頁面結(jié)構(gòu)分析　256 16.2 制作頁頭和頁腳　257 16.3 制作第 一屏　258 16.4 制作圖文介紹　259 16.5 制作課程特色　261 16.6 適配平板電腦端　262 16.6.1 適配頁頭　263 16.6.2 適配第 一屏　263 16.6.3 適配圖文介紹　264 16.6.4 適配課程特色　265 16.7 適配PC端　266 本章小結(jié)　268 第 17章　綜合實(shí)例三：網(wǎng)絡(luò)相冊(cè) 17.1 分析架構(gòu)　269 17.2 模塊拆分　270 17.2.1 縮略圖排列　270 17.2.2 縮略圖提示　272 17.2.3 顯示大圖　273 17.3 功能細(xì)化　273 17.3.1 單擊縮略圖顯示大圖　273 17.3.2 瀏覽大圖　274 17.3.3 單擊大圖切換為下一幅圖　276 本章小結(jié)　276