一、前端概要
web前端開發者最最注的內容是三個：HTML、CSS與JavaScript，他們分別在不同方面發揮自己的作用，HTML實現頁面結構，CSS完成頁面的表現與風格，JavaScript實現一些客戶端的功能與業務。當然內容與用戶資源也是不能忽視的。盡量不要跨職責范圍使用，有點“SRP單一職責”的意思，如字體大小應該是CSS控制的，就不應該使用HTML標簽完成，如果CSS能解決的問題盡量不要用JavaScript完成。
HTML - 結構
CSS - 表現
JavaScript - 行為
二、HTML5
2.1、什么是HTML
HTML是英文Hyper Text Mark-up Language(超文本標記語言)的縮寫，它規定了自己的語法規則，用來表示比“文本”更豐富的意義，比如圖片，表格，鏈接等。瀏覽器（IE,FireFox等）軟件知道HTML語言的語法，可以用來查看HTML文檔。目前互聯網上的絕大部分網頁都是使用HTML編寫的。
2.2、HTML是什么樣的
簡單地來說，HTML的語法就是給文本加上表明文本含義的標簽(Tag)，讓用戶（人或程序）能對文本得到更好的理解。
下面是一個最簡單的HTML文檔：
<html> <head> <title>第一個Html文檔</title> </head> <body> 歡迎訪問<a href="http://best.cnblogs.com">Hello HTML5</a>! </body> </html>
所有的HTML文檔都應該有一個<html>標簽，<html>標簽可以包含兩個部分:<head>和<body>。
<head>標簽用於包含整個文檔的一般信息，比如文檔的標題（<title>標簽用於包含標題），對整個文檔的描述，文檔的關鍵字等等。文檔的具體內容就要放在<body>標簽里了。
<a>標簽用於表示鏈接，在瀏覽器（如IE,Firefox等）中查看HTML文檔時，點擊<a>標簽括起來的內容時，通常會跳轉到另一個頁面。這個要跳轉到的頁面的地址由<a>標簽的href屬性指定。上面的<a href="http://best.cnblogs.com">中，href屬性的值就是http://best.cnblogs.com。
2.3、HTML文檔可以包含的內容
通過不同的標簽，HTML文檔可以包含不同的內容，比如文本，鏈接，圖片，列表，表格，表單，框架等。
- 文本
- HTML對文本的支持是最豐富的，你可以設置不同級別的標題，分段和換行，可以指定文本的語義和外觀，可以說明文本是引用自其它的地方，等等等等。
- 鏈接
- 鏈接用來指出內容與另一個頁面或當前頁面某個地方有關。
- 圖片
- 圖片用於使頁面更加美觀，或提供更多的信息。
- 列表
- 列表用於說明一系列條目是彼此相關的。
- 表格
- 表格是按行與列將數據組織在一起的形式。也有不少人使用表格進行頁面布局。
- 表單
- 表單通常由文本輸入框，按鈕，多選框，單選框，下拉列表等組成，使HTML頁面更有交互性。
- 框架
- 框架使頁面里能包含其它的頁面。
2.4、HTML文檔格式詳細說明
前面介紹了HTML文檔的基本格式，下面再做一個詳細說明。
HTML文檔可以用任何文本編輯器（比如記事本，UltraEdit等）創建，編輯，因為它的內容在本質也只是一些文本。
在HTML文本中，用尖括號括起來的部分稱為標簽。如果想在正文里使用尖括號（或者大與號小與號，總之是同一個東西），必須使用字符轉義，也就是說轉換字符的原有意義。<應該使用<代替，>則使用>，至於&符號本身,則應該使用&替代（不得不說的是有很多HTML文檔沒有遵循這個規則，常用的瀏覽器也都能夠分析出&到底是一個轉義的開始，還是一個符號，但是這樣做是不推薦的）。
標簽本質上是對它所包含的內容的說明，可能會有屬性，來給出更多的信息。比如<img>（圖片）標簽有src屬性（用於指明圖片的地址），width和height屬性（用於說明圖片的寬度和高度）。HTML里能使用哪些標簽，這些標簽分別可以擁有哪些屬性，這些都是有規定的，知道了這里說的基本知識之后，學習HTML其實也就是學習這些標簽了。本文后面會對常用的HTML標簽做出簡短的介紹。
標簽通常有開始部分和結束部分（也被稱為開始標簽和結束標簽），它們一起限定了這個標簽所包含的內容。屬性只能在開始標簽中指定，屬性值可以用單引號或雙引號括起來。結束標簽都以/加上標簽名來表示。有時候，有些標簽並不包含其它內容（只包括自己的屬性，甚至連屬性都沒有），這種情況下，可以寫成類似這樣：<img src="logo.gif" />。注意最后的一個空格和一個反斜杠，它說明這個標簽已經結束，不需要單獨的結束標簽了。
某些標簽包含的內容中還可以有新的標簽，新的標簽名甚至可能還可以與包含它的標簽的名稱相同（哪些標簽可以包含標簽，可以包含哪些標簽也是有規定的）。比如：
<div> <div>分類目錄...</div> <div>當前分類內容列表...</div> </div>
在這種情況下，最后出現的標簽應該最先結束。
HTML文檔里所有的空白符（空格，Tab，換行，回車）會被瀏覽器忽略，唯一的例外是空格，對空格的處理方式是所有連續的空格被當成一個空格，不管有一個，還是兩個，還是100個。之所以有這樣的規則是因為忽略空白符能讓使用HTML的作者以他覺得最方便的格式來排列內容，比如可以在每個標簽開始后增加縮進，標簽結束后減少縮進。由於英語文本中空格用得很普遍（用於分隔單詞），所以對空格做了這樣的特殊處理。如果要顯示連續的空格（比如為了縮進），應該用 來代表空格。
2.5、常用標簽介紹
2.5.1、文本
最常用的標簽可能是<font>了，它用於改變字體，字號，文字顏色。被棄用，不建議使用。
<font size="6">6</font> <font size="4">4</font> <font color="red" size="5">紅色的5</font> <font face="黑體">黑體的字</font>
加粗，下划線，斜體字也是常用的文字效果，它們分別用<b>,<u>,<i>表示：
<b>Bold</b> <i>italic</i> <u>underline</u>
還有一些標簽，用來指出包含的文本有特殊的意義，比如<abbr>（表示縮寫），<em>（表示強調），<strong>（表示更強地強調）,<cite>（表示引用），<address>（表示地址）等等。這些標簽不是為了定義顯示效果而存在的，所以從瀏覽器里看它們可能沒有任何效果，也可能不同的瀏覽器對這些標簽的顯示效果完全不同。
一篇很長的文章，如果有合適的小標題的話，就可以快速地對它的內容進行大致的了解。在HTML里，用來表示標題的標簽有：<h1>,<h2>,<h3>,<h4>,<h5>,<h6>，它們分別表示一級標題，二級標題，三級標題...
<h1>HTML 30分鍾教程</h1> <h2>什么是HTML</h2> ... <h2>HTML是什么樣的</h2> ...
2.5.2、圖片
<hr>標簽用於在頁面上添加橫線。可以通過指定width和color屬性來控制橫線的長度和顏色。 <hr width="90%" color="red" /> <img>標簽用於在頁面上添加圖片，src屬性指定圖片的地址，如果無法打開src指定的圖片，瀏覽器通常會在頁面上需要顯示圖片的地方顯示alt屬性定義的文本。 <img src="http://www.w3.org/Icons/valid-xhtml10" alt="圖片簡介" />
2.5.3、鏈接
超級鏈接用<a>標簽表示，href屬性指定了鏈接到的地址。<a>標簽可以包含文本，也可以包含圖片。
<a href="http://deerchao.net">deerchao的個人網站</a> <a href="http://validator.w3.org"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="驗證HTML" /></a>
2.5.4、分段與換行
由於HTML文檔會忽略空白符，所以要想保證正常的分段換行的話，必須指出哪些文字是屬於同一段落的，這就用到了標簽<p>。
<p>這是第一段。</p> <p>這是第二段。</p>
也有人不用<p>，而用<br>。<br>只表示換行，不表示段落的開始或結束，所以通常沒有結束標簽。
這是第一段。<br> 這是第二段。<br /> 這是第三段。
有時，要把文檔看作不同的部分組合起來的，比如一個典型的頁面可能包括三個部分：頁頭，主體，頁腳。<div>標簽專門用於標明不同的部分：
<div>頁頭內容</div> <div>主體內容</div> <div>頁腳內容</div>
2.5.5、表格
HTML文檔在瀏覽器里通常是從左到右，從上到下地顯示的，到了窗口右邊就自動換行。為了實現分欄的效果，很多人使用表格（<table>）進行頁面排版（雖然HTML里提供表格的本意不是為了排版）。
<table>標簽里通常會包含幾個<tr>標簽，<tr>代表表格里的一行。<tr>標簽又會包含<td>標簽，每個<td>代表一個單元格。
<table> <tr> <td>2000</td><td>悉尼</td> </tr> <tr> <td>2004</td><td>雅典</td> </tr> <tr> <td>2008</td><td>北京</td> </tr> </table> <tr>標簽還可以被<table>里的<thead>或<tbody>或<tfoot>包含。它們分別代表表頭，表正文，表腳。在打印網頁的時候，如果表格很大，一頁打印不完，<thead>和<tfoot>將在每一頁出現。 <th>和<td>非常相似，也用在<tr>里邊，不同的是<th>代表這個單元格是它所在的行或列的標題。 <table> <thead> <tr><th>時間</th><th>地點</th></tr> </thead> <tbody> <tr><td>2000</td><td>悉尼</td></tr> <tr><td>2004</td><td>雅典</td></tr> <tr><td>2000</td><td>北京</td></tr> </tbody> </table>
2.5.6、列表
表格用於表示二維數據（行，列），一維數據則用列表表示。列表可以分為無序列表（<ul>），有序列表（<ol>）和定義列表（<dl>）。前兩種列表更常見一些，都用<li>標簽包含列表項目。
無序列表表示一系列類似的項目，它們之間沒有先后順序。
<ul> <li>蘋果</li> <li>桔子</li> <li>桃</li> </ul>
有序列表中各個項目間的順序是很重要的，瀏覽器通常會自動給它們產生編號。
<ol> <li>打開冰箱門</li> <li>把大象趕進去</li> <li>關上冰箱門</li> </ol>
2.5.7、內嵌框架
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>框架</title> </head> <body> <h3>內嵌框架</h3> <p> <a href="d1.html" target="f1">d1</a> | <a href="d2.html" target="f1">d2</a> | <a href="d3.html" target="f1">d3</a> | <a href="d4.html" target="f1">d4</a> </p> <iframe src="login.html" name="f1" width="90%" height="300" frameborder="0"></iframe> <iframe src="http://www.baidu.com" width="90%" height="300"></iframe> </body> </html>
結果：
2.5.8、行內標簽與塊標簽
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <a href="login.html" target="_top">登錄</a> <pre> Hello HTML! </pre> <h1>版權所有 © 珠海國稅</h1> <p> Tomcat是基於Java的一個開放源代碼、運行<br/>servlet和JSP Web應用的Web應用軟件容器。Tomcat是Apache軟件基金會（Apache Software Foundation）的Jakarta項目中的一個核心項目，由Apache、Sun和其他一些公司及個人共同開發而成。 </p> <div> <!--層 塊--> div1 </div> <div> <!--層 塊--> div2 </div> <p> 段落標簽p 塊 <img src="https://www.baidu.com/img/bd_logo1.png" height="50" align="absmiddle"/> <span>這是一個span，行內標簽這是一個span，行內標簽這是一個span，行內標簽這是一個span，行內標簽這是一個span，行內標簽這是一個span，行內標簽這是一個span，行內標簽這是一個span，行內標簽</span> <img src="img/cover.png" width="300" title="JavaEE" alt="請到http://www.tax.com查看該圖片"/> </p> <ul> <li>中國</li> <li>美國</li> <li>德國</li> </ul> <hr size="7" /> <ol> <li>中國</li> <li>美國</li> <li>德國</li> </ol> <a href="http://www.baidu.com">百度</a> </body> </html>
2.5.9、表格
腳本：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table border="1" width="100%"> <tr><th>姓名</th><th>語文</th><th>數學</th></tr> <tr><td rowspan="3">張三</td><td>88</td><td>75</td></tr> <tr><td>97</td><td>64</td></tr> <tr><td>25</td><td>49</td></tr> <tr><td>總分</td><td colspan="2">54675</td></tr> </table> </body> </html>
結果：
2.5.10、表單
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用戶注冊</title> </head> <body> <form method="get"> <h2>用戶注冊</h2> <fieldset> <legend>用戶信息</legend> <p> <label for="uid">帳號：</label> <input type="text" name="uid" id="uid" required="required" maxlength="2" /> </p> <p> <label for="pwd">密碼：</label> <input type="password" name="pwd" id="pwd" /> </p> <p> <label for="sexFemale">性別：</label> <input type="radio" name="sex" id="sexMale" value="男" /><label for="sexMale">男</label> <input type="radio" name="sex" id="sexFemale" value="女" /><label for="sexFemale">女</label> <input type="radio" name="sex" id="sexSecret" value="保密" /><label for="sexSecret">保密</label> </p> <p> <label for="h1">愛好：</label> <input type="checkbox" name="hobbies" id="h1" value="購物" /><label for="h1">購物</label> <input type="checkbox" name="hobbies" id="h2" value="閱讀" /><label for="h2">閱讀</label> <input type="checkbox" name="hobbies" id="h3" value="運行" /><label for="h3">運行</label> </p> <p> <label for="address">籍貫：</label> <select id="address" name="address"> <option value="廣東">廣東</option> <option value="廣西">廣西</option> <option value="江蘇">江蘇</option> </select> </p> <p> <label for="memo">簡歷：</label> <textarea id="memo" name="memo" cols="50" rows="5"></textarea> </p> <p> <input type="submit" value="提交" /> </p> </fieldset> </form> </body> </html>
結果：
三、CSS3
3.1、CSS3概要
CSS（Cascading Style Sheet）是層疊樣式表的意思，CSS3就是在CSS2.1的基礎上升級的CSS新版本，屬於HTML5的一部分。它可以有效地對頁面的布局、字體、顏色、背景、動畫和其它效果實現。CSS3是CSS技術的升級版本，CSS3語言開發是朝着模塊化發展的。以前的規范作為一個模塊實在是太龐大而且比較復雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進來。這些模塊包括： 盒子模型、列表模塊、超鏈接方式 、語言模塊 、背景和邊框 、文字特效 、多欄布局等。
3.2、盒子模型
盒子模型也有人稱為框模型，HTML中的多數元素都會在瀏覽器中生成一個矩形的區域，每個區域包含四個組成部分，從外向內依次是：外邊距（Margin）、邊框（Border）、內邊距（Padding）和內容（Content），其實盒子模型有兩種，分別是 ie 盒子模型和標准 w3c 盒子模型，加上了doctype聲明，讓所有瀏覽器都會采用標准 w3c 盒子模型去解釋你的盒子。當設置一個元素的樣式如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style type="text/css"> #box{ width: 100px; height: 100px; margin: 20px; padding: 20px; border: 10px solid blue; } </style> </head> <body> <div id="box"> Box Model </div> </body> </html>
運行結果：
寬度測試
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style type="text/css"> #box{ width: 800px; padding: 10px; border: 5px solid blue; margin: 10px; } .sbox{ display: inline-block; padding: 10px; margin: 10px; border: solid 10px coral; background: lightblue; width: ?; } </style> </head> <body> <div id="box"> <div class="sbox">Left</div><div class="sbox">Right</div> </div> </body> </html>
要達到如下效果，請問?處最大可以設置為多少像素？
340px
3.3、選擇器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3</title> <style type="text/css"> /*標簽選擇器*/ h2,p{ color:red; } /*ID選擇器，選中一個特定的元素*/ #p2{ color:blue; } /*類樣式*/ .g1{ color:green; } .bg{ background: yellow; } </style> </head> <body> <h2>CSS3</h2> <p> web前端開發者最最注的內容是三個：HTML、CSS與JavaScript，他們分別在不同方面發揮自己的作用，HTML實現頁面結構，CSS完成頁面的表現與風格，JavaScript實現一些客戶端的功能與業務。當然內容與用戶資源也是不能忽視的。盡量不要跨職責范圍使用，有點“SRP單一職責”的意思，如字體大小應該是CSS控制的，就不應該使用HTML標簽完成，如果CSS能解決的問題盡量不要用JavaScript完成。 </p> <p id="p2"> HTML是英文Hyper Text Mark-up Language(超文本標記語言)的縮寫，它規定了自己的語法規則，用來表示比“文本”更豐富的意義，比如圖片，表格，鏈接等。瀏覽器（IE,FireFox等）軟件知道HTML語言的語法，可以用來查看 </p> <div> <input type="button" value="確認" class="g1 bg"/> <input type="button" value="取消" style="color:red;background: greenyellow;"/> <input type="button" value="刪除" class="g1"/> </div> </body> </html>
效果：
3.4、盒子模型示例
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3</title> <style type="text/css"> /*類樣式*/ .g1 { color: green; } .g1:hover { background: red; color: white; } #div1 { width: 300px; /*寬度*/ height: 200px; /*高度*/ background: lightblue; /*背景色*/ border: 10px solid red; /*3個像素寬，實心，紅色的邊框*/ margin: 20px; /*外邊距20px*/ padding: 30px 10px 10px 40px; /*填充距離*/ margin: 0 auto; /*居中*/ } </style> </head> <body> <h2>CSS3</h2> <div id="div1"> Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box Box </div> <div> <input type="button" value="確認" class="g1 bg" /> <input type="button" value="取消" style="color:red;background: greenyellow;" /> <input type="button" value="刪除" class="g1" /> </div> </body> </html>
結果：
3.5、背景、字體、行高、對齊
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3</title> <style> *{ padding: 0; margin: 0; } #div1 { width: 300px; border: 2px solid #1E90FF; margin: 0 auto; /*background: lightblue url(../img/kingo.png) no-repeat center center;*/ background-color: lightcoral; /*背景顏色*/ background-image: url(../img/kingo.png) /*背景圖片*/; background-repeat: no-repeat; /*是否重復*/ background-position: right bottom; /*位置 top right bottom left*/ height: 200px; } #div1 h2{ font-size: 20px; /*字號*/ font-family: "microsoft yahei"; /*字形*/ font-weight:normal; /*粗細*/ color:blue; /*前景色*/ text-align: center; /*水平居中*/ line-height: 40px; /*行高*/ height: 40px; margin-top: 10px; } #div1 p{ text-align: center; line-height: 50px; height: 50px; } </style> </head> <body> <h2>CSS3</h2> <div id="div1"> <h2>用戶登錄</h2> <p> <label for="uid">帳號：</label> <input type="text" name="uid" id="uid" required="required" maxlength="2" /> </p> <p> <label for="pwd">密碼：</label> <input type="password" name="pwd" id="pwd" /> </p> <p> <input type="submit" value="登錄" /> </p> </div> </body> </html>
結果：
3.6、浮動布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .item { width: 200px; height: 200px; background: lightgreen; margin: 10px; float: left; } #div1 { border: 1px solid #008000; margin: 20px; overflow: hidden; } </style> </head> <body> <div id="div1"> <div class="item"> item1 </div> <div class="item"> item2 </div> <div class="item"> item3 </div> </div> </body> </html>
結果：
3.7、布局示例
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Book</title> <style type="text/css"> * { margin: 0; padding: 0; } #container { width: 1004px; margin: 0 auto; } #header { height: 200px; background: url(images/top.png) no-repeat; } #menu { background: orangered; } #menu a { width: 100px; display: inline-block; /*行內塊標簽，行內標簽設置寬度無效*/ background: orangered; height: 30px; text-align: center; line-height: 30px; text-decoration: none; /*去下划線*/ color: white; } #menu a:hover { background: mistyrose; color: orangered; } #banner img { width: 1004px; } #main { clear: both; overflow: hidden; margin-bottom: 10px; } #main #left { width: 30%; float: left; background: lightblue; height: 400px; } #main #right { width: 70%; float: left; } #main .bookitem { width: 30%; float: left; margin-right: 3%; } #footer { clear: both; text-align: center; background: lightsalmon; height: 65px; line-height: 30px; padding-top: 5px; } </style> </head> <body> <div id="container"> <div id="header"></div> <div id="menu"> <a href="#">圖書列表</a> <a href="#">用戶登錄</a> <a href="#">后台管理</a> <a href="#">圖書列表</a> <a href="#">用戶登錄</a> <a href="#">后台管理</a> </div> <div id="banner"> <img src="images/adv3.jpg" /> </div> <div id="main"> <div id="left"> 分類 </div> <div id="right"> <div class="bookitem"> <p class="picture"> <img src="images/book(1).jpg" /> </p> <p class="price"> ￥98.5 </p> <p class="title"> 零基礎學Java </p> <p class="state"> 未租出 </p> </div> <div class="bookitem"> <p class="picture"> <img src="images/book(1).jpg" /> </p> <p class="price"> ￥98.5 </p> <p class="title"> 零基礎學Java </p> <p class="state"> 未租出 </p> </div> <div class="bookitem"> <p class="picture"> <img src="images/book(1).jpg" /> </p> <p class="price"> ￥98.5 </p> <p class="title"> 零基礎學Java </p> <p class="state"> 未租出 </p> </div> <div class="bookitem"> <p class="picture"> <img src="images/book(1).jpg" /> </p> <p class="price"> ￥98.5 </p> <p class="title"> 零基礎學Java </p> <p class="state"> 未租出 </p> </div> <div class="bookitem"> <p class="picture"> <img src="images/book(1).jpg" /> </p> <p class="price"> ￥98.5 </p> <p class="title"> 零基礎學Java </p> <p class="state"> 未租出 </p> </div> <div class="bookitem"> <p class="picture"> <img src="images/book(1).jpg" /> </p> <p class="price"> ￥98.5 </p> <p class="title"> 零基礎學Java </p> <p class="state"> 未租出 </p> </div> <div class="bookitem"> <p class="picture"> <img src="images/book(1).jpg" /> </p> <p class="price"> ￥98.5 </p> <p class="title"> 零基礎學Java </p> <p class="state"> 未租出 </p> </div> </div> </div> <div id="footer"> <p> 關於我們 | 聯系我們 | 聯系客服 | 合作招商 | 商家幫助 | 營銷中心 | 手機書店 | 友情鏈接 | 銷售聯盟 </p> <p> Copyright @ 2004 - 2018 國稅JavaEE版權所有 </p> </div> </div> </body> </html>
結果：
四、JavaScript
4.1、JavaScript簡介
JavaScript是一種解釋執行的腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型，它遵循ECMAScript標准。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，主要用來給HTML增加動態功能。
幾乎所有主流的語言都可以編譯為JavaScript，進而能夠在所有平台上的瀏覽器中執行，這也體現了JavaScript的強大性和在Web開發中的重要性。如Blade：一個Visual Studio擴展，可以將C#代碼轉換為JavaScript，Ceylon：一個可編譯為JavaScript的、模塊化的、靜態類型JVM語言。
JavaScript是一種可以同時運行在前端與后台的語言，如Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境（類似Java或.NET）。 Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。
4.1.1、JavaScript組成
ECMAScript，描述了該語言的語法和基本對象，如類型、運算、流程控制、面向對象、異常等。
文檔對象模型（DOM），描述處理網頁內容的方法和接口。
瀏覽器對象模型（BOM），描述與瀏覽器進行交互的方法和接口。
JavaScript由對象組成，一切皆為對象。
4.2、Hello World
示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello JavaScript</title> </head> <body> 姓名：<input /> <input type="button" value="問好" id="btnHello"/> <script type="text/javascript"> //在頁面中找到編號為btnHello的元素，指定單擊事件要執行的函數 document.getElementById("btnHello").onclick=function () { alert("Hello JavaScript"); } </script> </body> </html>
結果
4.3、JavaScript語法
示例1：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS語法</title> </head> <body> <input type="button" id="btnShow" value="顯示100以內的偶數" onclick="fun1(100)" /> <div id="div1"></div> <script> //定義函數 function fun1(n) { for (var i=1;i<=n;i++) { if(i%2==0){ document.getElementById("div1").innerHTML+="<h2>"+i+"</h2>"; } } } //調用函數 //fun1(15); </script> </body> </html>
結果：
示例2：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello JavaScript</title> </head> <body> 數字： <input type="text" id="txtName" /> <input type="button" value="加法" id="btnHello" /> <script type="text/javascript"> //在頁面中找到編號為btnHello的元素，指定單擊事件要執行的函數 document.getElementById("btnHello").onclick = function() { alert(100 +parseInt(document.getElementById("txtName").value)); } </script> </body> </html>
結果2：
4.4、JavaScript事件
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event</title> <style type="text/css"> .error{ color:red; font-size:14px; margin-left: 10px; } </style> </head> <body> <img src="../images/book(10).jpg" id="book" /> <p> 帳號：<input id="txtUid" /><span id="spanUid" class="error"></span> </p> <p> 密碼：<input id="txtPwd" /><span id="spanPwd"></span> </p> <script type="text/javascript"> var book = document.getElementById("book"); var txtUid = document.getElementById("txtUid"); var spanUid = document.getElementById("spanUid"); //鼠標移入 book.onmouseover = function() { this.src = "../images/book(11).jpg"; } //鼠標移出 book.onmouseout = function(event) { this.src = "../images/book(10).jpg"; alert(event.clientX + "," + event.clientY); console.log(event); } //獲得焦點 txtUid.onfocus = function() { spanUid.innerHTML = "請輸入6-16位的數字、字母或下划線"; } //失去焦點 txtUid.onblur = function() { if(txtUid.value.length >= 6 && txtUid.value.length <= 16){ spanUid.innerHTML = ""; }else{ spanUid.innerHTML = "必填"; } } </script> </body> </html>
結果：
4.5、表單驗證
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .notice { font-size: 14px; margin-left: 10px; color:#999; } .error{ color: red; } </style> </head> <body> <form method="get" action="d4.html"> <h2>用戶登錄</h2> <p> 帳號：<input id="txtUid" name="uid" /><span id="spanUid" class="notice">*</span> </p> <p> 密碼：<input id="txtPwd" name="pwd" /><span id="spanPwd" class="notice"></span> </p> <p> <input type="submit" value="確定" id="btnSubmit" /> </p> <script type="text/javascript"> var txtUid = document.getElementById("txtUid"); var spanUid = document.getElementById("spanUid"); var btnSubmit = document.getElementById("btnSubmit"); btnSubmit.onclick = function() { if(txtUid.value == "") { spanUid.innerHTML = "必填"; return false; /*阻止默認事件與冒泡*/ } //定義正則表達式，[0-9]表示可輸入的范圍，5表示長度，^表示開始，$表示結束，i忽視大小寫，g全局，m表示多行 var reg=/^[0-9A-Za-z]{5,10}$/; if(!reg.test(txtUid.value)){ spanUid.innerHTML = "請輸入5-10位數字或字母"; spanUid.className+=" error"; //添加樣式 return false; /*阻止默認事件與冒泡*/ } } </script> </form> </body> </html>
結果：
4.6、延時器setTimeout
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" onclick="cleartimer()" value="清除延時器" /> <script type="text/javascript"> //5000毫秒后執行指定的函數，只延時一次 var timer1=setTimeout(function(){ alert("Hello Timeout"); },5000); //清除延時器 function cleartimer(){ clearTimeout(timer1); } </script> </body> </html>
結果：
4.7、定時器setInterval
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h2 id="txtN"></h2> <img src="../images/book(1).jpg" id="imgPic"/> <input type="button" onclick="cleartimer()" value="清除定時器" /> <script type="text/javascript"> var i=0; //每隔500毫秒執行函數，返回定時器對象 var timer1=setInterval(function(){ document.getElementById("txtN").innerHTML=i++; document.getElementById("imgPic").src="../images/book("+i+").jpg"; if(i>=33) i=0; },500); //清除定時器 function cleartimer(){ clearInterval(timer1); } </script> </body> </html>
結果：
五、jQuery
5.1、jQuery概要
jQuery是繼Prototype之后又一個優秀的JavaScript庫，是一個由John Resig創建於2006年1月的開源項目。現在的jQuery團隊主要包括核心庫、UI和插件等開發人員以及推廣和網站設計維護人員。
jQuery憑借簡介的語法和跨瀏覽器的兼容性，極大地簡化了JavaScript開發人員遍歷HTML文檔、操作DOM、處理事件、執行動畫和開發AJAX的操作。其獨特而又優雅的代碼風格改變了JavaScript程序員的設計思路和編寫程序的方式。總之，無論是網頁設計師、后台開發者、還是項目管理者，也無論是JavaScript初學者還是JavaScript高手，都有足夠多的理由去學習jQuery。
5.2、jQuery Hello World
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery Hello</title> </head> <body> 姓名：<input type="text" id="txtName"/> <input type="button" value="問好" id="btnHello"/> <script src="js/jQuery1.11.3/jquery-1.11.3.min.js"></script> <script> //找到id為btnHello的元素，綁定單擊事件 $("#btnHello").click(function () { //找到#txtName的value值，並以警告框的形式輸出 alert("你好，"+$("#txtName").val()); }); </script> </body> </html>
結果：
5.3、選擇器與級聯操作
示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery</title> </head> <body> <div> <input type="button" id="btnShow" value="執行" /> </div> <img src="../img/animals/1.jpg"/> <img src="../img/animals/2.jpg"/> <img src="../img/animals/3.jpg"/> <img src="../img/animals/4.jpg"/> <img src="../img/animals/5.jpg"/> <script src="../js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> alert($("img").size()); $("#btnShow").click(function(){ $("img").hide(500).show(500); $("img").eq(1).width(500).fadeOut(2000); //DOM對象 alert(document.getElementById("btnShow").value); //jQuery對象 alert($("#btnShow").val()); $("#btnShow").val("執行jQuery操作"); }); </script> </body> </html>
結果
5.4、DOM操作
示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery</title> </head> <body> <div> <input type="button" id="btnShow" value="執行"/> <input type="text" id="txtName" size="10"/> <input type="button" id="btnLenght" value="點擊加長" /> </div> <img src="../img/animals/1.jpg"/> <img src="../img/animals/2.jpg"/> <img src="../img/animals/3.jpg"/> <img src="../img/animals/4.jpg"/> <img src="../img/animals/5.jpg"/> <div id="div1"> div1 </div> <script src="../js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $("#btnShow").click(function(){ //$("img").first().appendTo("#div1"); $("#div1").append($("img").first().clone()); //$("img").first().prependTo("#div1"); }); $("img").dblclick(function function_name () { $(this).remove(); }); $("#btnLenght").click(function(){ //獲得元素txtName的size屬性的值 var len=$("#txtName").prop("size"); //設置屬性值 $("#txtName").prop("size",len+5); }); </script> </body> </html>
結果
5.5、DOM示例
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery</title> </head> <body> <div> 姓名：<input type="text" id="txtName" size="10" /> <input type="button" id="btnAdd" value="添加" /> <ul id="ulStu"> </ul> <script src="../js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $("#btnAdd").click(function() { //創建li元素，在li中添加txtName輸入的內容 var li=$("<li/>").html($("#txtName").val()) //創建一個按鈕元素，添加到li中 $("<input type='button' value='刪除' class='del'/>").appendTo(li); //將li添加到ulStu中 li.appendTo("#ulStu"); }); //以body為基礎在中間找到所有的.del元素，綁定click單擊事件 $("body").on("click",".del",function(){ //移除當前元素的父元素 $(this).parent().remove(); }); </script> </div> </body> </html>
結果：
5.6、全選與反選
示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery</title> <style type="text/css"> #tabBooks, #tabBooks td, #tabBooks th { border-collapse: collapse; border: 1px solid gray; } #tabBooks tr:hover{ background: lightcyan; } </style> </head> <body> <form action="" method="get"> <table border="1" width="70%" id="tabBooks"> <tr> <th style="text-align: left; width: 40px;"><input type="checkbox" id="chbAll" /></th> <th>姓名</th> <th>分數</th> </tr> <tr> <td><input type="checkbox" name="chbItem" value="1" /></td> <td>李白</td> <td>98</td> </tr> <tr> <td><input type="checkbox" name="chbItem" value="3" /></td> <td>李白</td> <td>98</td> </tr> <tr> <td><input type="checkbox" name="chbItem" value="5" /></td> <td>李白</td> <td>98</td> </tr> <tr> <td><input type="checkbox" name="chbItem" value="7" /></td> <td>李白</td> <td>98</td> </tr> <tr> <td><input type="checkbox" name="chbItem" value="9" /></td> <td>李白</td> <td>98</td> </tr> <tr> <td><input type="checkbox" name="chbItem" value="11" /></td> <td>李白</td> <td>98</td> </tr> <tr> <td><input type="checkbox" name="chbItem" value="13" /></td> <td>李白</td> <td><input type="checkbox" value="15" /></td> </tr> </table> <input type="submit" value="提交" /> </form> <script src="../js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //綁定chbAll元素的值的變化事件 $("#chbAll").change(function() { //找到tabBooks元素中所有的input元素且存在屬性name=chbItem，將它的checked屬性設置成與chbAll一致 $("#tabBooks input[name=chbItem]").prop("checked", $(this).prop("checked")); }); </script> </body> </html>
結果
5.7、jQuery校驗
示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .notice { font-size: 14px; margin-left: 10px; color: #999; } .error { color: red; } </style> </head> <body> <form method="post" action="d4.html"> <h2>用戶登錄</h2> <p> 帳號：<input id="txtUid" name="uid" /><span id="spanUid" class="notice">*</span> </p> <p> 密碼：<input id="txtPwd" name="pwd" /><span id="spanPwd" class="notice"></span> </p> <p> <input type="submit" value="確定" id="btnSubmit" /> </p> <script src="../js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //當txtUid中按鍵彈起時執行 $("#txtUid").keyup(validate); $("#btnSubmit").click(validate); function validate(){ //帳號必須填寫 if(!$("#txtUid").val()) { $("#spanUid").html("必填").addClass("error"); //添加類樣式 return false; }else{ $("#spanUid").html(""); } //定義正則表達式，[0-9]表示可輸入的范圍，5表示長度，^表示開始，$表示結束，i忽視大小寫，g全局，m表示多行 var reg = /^[0-9A-Za-z]{5,10}$/; if(!reg.test($("#txtUid").val())) { $("#spanUid").html("請輸入5-10位數字或字母").addClass("error"); return false; /*阻止默認事件與冒泡*/ }else{ $("#spanUid").html("正確").removeClass("error"); //移除類樣式 } } </script> </form> </body> </html>
結果
5.8、jQuery插件 JPicture圖片輪播
示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Book</title> <link rel="stylesheet" type="text/css" href="js/jPicture.min.css" /> <style type="text/css"> * { margin: 0; padding: 0; } #container { width: 1004px; margin: 0 auto; } #header { height: 200px; background: url(images/top.png) no-repeat; } #menu { background: orangered; } #menu a { width: 100px; display: inline-block; background: orangered; height: 30px; text-align: center; line-height: 30px; text-decoration: none; color: white; } #menu a:hover { background: mistyrose; color: orangered; } #banner img { width: 1004px; } #main { clear: both; overflow: hidden; margin-bottom: 10px; } #main #left { width: 30%; float: left; background: lightblue; height: 400px; } #main #right { width: 70%; float: left; } #main .bookitem { width: 30%; float: left; margin-right: 3%; } #footer { clear: both; text-align: center; background: lightsalmon; height: 65px; line-height: 30px; padding-top: 5px; } #left a { width: 100%; display: inline-block; /*行內塊標簽，行內標簽設置寬度無效*/ background: orangered; height: 30px; text-align: center; line-height: 30px; text-decoration: none; /*去下划線*/ color: white; } #banner{ width: 1004px; height: 300px;} </style> </head> <body> <div id="container"> <div id="header"></div> <div id="menu"> <a href="#">圖書列表</a> <a href="#">用戶登錄</a> <a href="#">后台管理</a> <a href="#">圖書列表</a> <a href="#">用戶登錄</a> <a href="#">后台管理</a> </div> <div id="banner"> <div> <div> <a href="#"> <img src="images/adv3.jpg" /> </a> </div> <div> <a href="#"> <img src="images/adv2.jpg" /> </a> </div> <div> <a href="#"> <img src="images/adv1.jpg" /> </a> </div> </div> </div> <div id="main"> <div id="left"> <a href="#">圖書列表</a> <a href="#">用戶登錄</a> <a href="#">后台管理</a> <a href="#">圖書列表</a> <a href="#">用戶登錄</a> <a href="#">后台管理</a> </div> <div id="right"> <div class="bookitem"> <p class="picture"> <img src="images/book(1).jpg" /> </p> <p class="price"> ￥98.5 </p> <p class="title"> 零基礎學Java </p> <p class="state"> 未租出 </p> </div> <div class="bookitem"> <p class="picture"> <img src="images/book(1).jpg" /> </p> <p class="price"> ￥98.5 </p> <p class="title"> 零基礎學Java </p> <p class="state"> 未租出 </p> </div> <div class="bookitem"> <p class="picture"> <img src="images/book(1).jpg" /> </p> <p class="price"> ￥98.5 </p> <p class="title"> 零基礎學Java </p> <p class="state"> 未租出 </p> </div> <div class="bookitem"> <p class="picture"> <img src="images/book(1).jpg" /> </p> <p class="price"> ￥98.5 </p> <p class="title"> 零基礎學Java </p> <p class="state"> 未租出 </p> </div> <div class="bookitem"> <p class="picture"> <img src="images/book(1).jpg" /> </p> <p class="price"> ￥98.5 </p> <p class="title"> 零基礎學Java </p> <p class="state"> 未租出 </p> </div> <div class="bookitem"> <p class="picture"> <img src="images/book(1).jpg" /> </p> <p class="price"> ￥98.5 </p> <p class="title"> 零基礎學Java </p> <p class="state"> 未租出 </p> </div> <div class="bookitem"> <p class="picture"> <img src="images/book(1).jpg" /> </p> <p class="price"> ￥98.5 </p> <p class="title"> 零基礎學Java </p> <p class="state"> 未租出 </p> </div> </div> </div> <div id="footer"> <p> 關於我們 | 聯系我們 | 聯系客服 | 合作招商 | 商家幫助 | 營銷中心 | 手機書店 | 友情鏈接 | 銷售聯盟 </p> <p> Copyright @ 2004 - 2018 國稅JavaEE版權所有 </p> </div> </div> <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jPicture.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> jPicture("#banner", { type: "slide", autoplay: 2000 }); </script> </body> </html>
結果
六、作業
6.1、WeRead圖書租賃系統前端頁面
1、使用HTML5+CSS3+JavaScript技術完成一個圖書租賃系統的前端內容，頁面要求如下：
本站首頁：頭部、搜索欄、圖書列表、頁腳與版本聲明區
詳細頁面：點擊圖書列表中的圖書詳細圖書的詳細信息
后台：
添加圖書：頭部、添加圖書的表單、頁腳，要求使用JavaScript驗證必填項與內容格式，至少包含5個字段
編輯圖書：內容與添加圖書類似
2、不需要實現功能，界面要求美觀大方，可以借助Photoshop等工具
3、要求兼容IE8+、Chrome、Firefox主流瀏覽器
首頁：
詳細：
管理員登錄頁
后台首頁
圖書列表
添加圖書
編輯圖書
6.2、jQuery作業
