前端——基礎

HTML

html概述和基本結構

html概述

HTML是 HyperText Mark-up Language 的首字母簡寫
意思是超文字標記語言，
超文字指的是超連結，
標記指的是標籤
html註釋

<!-- 這是一段註釋  -->
html標題標籤

<h1>這是一級標題</h1>
<h2>這是二級標題</h2>
<h3>這是三級標題</h3>
html段落標籤、換行標籤與字元實體

html段落標籤

<p>一個html檔案就是一個網頁，html檔案用編輯器開啟顯示的是文字，可以用文字的方
    式編輯它，如果用瀏覽器開啟，瀏覽器會按照標籤描述內容將檔案渲染成網頁，顯示的網
    頁可以從一個網頁連結跳轉到另外一個網頁。</p>
html換行標籤

插入<br />來強制換行
html字元實體

空格的字元實體：
 
“<”和“>”的字元實體：
< 和 >
html塊標籤、含樣式的標籤

html塊標籤

1、<div> 標籤 塊元素，表示一塊內容，沒有具體的語義。
2、<span> 標籤 行內元素，表示一行中的一小段內容，沒有具體的語義。
含樣式和語義的標籤

1、<em> 標籤 行內元素，表示語氣中的強調詞
2、<i> 標籤 行內元素，表示專業詞彙
3、<b> 標籤 行內元素，表示文件中的關鍵字或者產品名
4、<strong> 標籤 行內元素，表示非常重要的內容 
語義化的標籤

語義化的標籤，就是在佈局的時候多使用有語義的標籤，搜尋引擎在爬網的時候能認識這些標籤，理解文件的結構，方便網站的收錄。比如：h1標籤是表示標題，p標籤是表示段落，ul、li標籤是表示列表，a標籤表示連結，dl、dt、dd表示定義列表等，語義化的標籤不多。
html影像標籤、絕對路徑和相對路徑

html影像標籤

<img>標籤可以在網頁上插入一張圖片，它是獨立使用的標籤，它的常用屬性有：
•src屬性 定義圖片的引用地址
•alt屬性 定義圖片載入失敗時顯示的文字，搜尋引擎會使用這個文字收錄圖片、盲人讀屏軟體會讀取這個文字讓盲人識別圖片，所以此屬性非常重要
<img src="images/pic.jpg" alt="產品圖片" />
絕對路徑和相對路徑

絕對地址：相對於磁碟的位置去定位檔案的地址
相對地址：相對於引用檔案本身去定位被引用的檔案地址
絕對地址在整體檔案遷移時會因為磁碟和頂層目錄的改變而找不到檔案，
相對路徑就沒有這個問題。
html連結標籤

•href屬性 定義跳轉的地址
•title屬性 定義滑鼠懸停時彈出的提示文字框
•target屬性 定義連結視窗開啟的位置
    ◦target="_self" 預設值，新頁面替換原來的頁面，在原來位置開啟
    ◦target="_blank" 新頁面會在新開的一個瀏覽器視窗開啟
html列表標籤

有序列表

<ol>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ol>
無序列表

<ul>
    <li><a href="#">新聞標題一</a></li>
    <li><a href="#">新聞標題二</a></li>
    <li><a href="#">新聞標題三</a></li>
</ul>
定義列表

<h3>前端三大塊</h3>
<dl>
    <dt>html</dt>
    <dd>負責頁面的結構</dd>

    <dt>css</dt>
    <dd>負責頁面的表現</dd>

    <dt>javascript</dt>
    <dd>負責頁面的行為</dd>

</dl>
html表單

<form>標籤 定義整體的表單區域 
    •action屬性 定義表單資料提交地址 
    •method屬性 定義表單提交的方式，一般有“get”方式和“post”方式 
<label>標籤 為表單元素定義文字標註
<input>標籤 定義通用的表單元素
•type屬性◦type="text" 定義單行文字輸入框
    ◦type="password" 定義密碼輸入框
    ◦type="radio" 定義單選框
    ◦type="checkbox" 定義核取方塊
    ◦type="file" 定義上傳檔案
    ◦type="submit" 定義提交按鈕
    ◦type="reset" 定義重置按鈕
    ◦type="button" 定義一個普通按鈕
    ◦type="image" 定義圖片作為提交按鈕，用src屬性定義圖片地址
    ◦type="hidden" 定義一個隱藏的表單域，用來儲存值

•value屬性 定義表單元素的值
•name屬性 定義表單元素的名稱，此名稱是提交資料時的鍵名 
<textarea>標籤 定義多行文字輸入框
<select>標籤 定義下拉表單元素 
<option>標籤 與<select>標籤配合，定義下拉表單元素中的選項 
登錄檔單例項

<form action="http://www..." method="get">
<p>
<label>姓名：</label><input type="text" name="username" />
</p>
<p>
<label>密碼：</label><input type="password" name="password" />
</p>
<p>
<label>性別：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<p>
<label>愛好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>
<p>
<label>個人描述：</label>
<textarea name="about"></textarea>
</p>
<p>
<label>籍貫：</label>
<select name="site">
    <option value="0">北京</option>
    <option value="1">上海</option>
    <option value="2">廣州</option>
    <option value="3">深圳</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交">
<!-- input型別為submit定義提交按鈕  
     還可以用圖片控制元件代替submit按鈕提交，一般會導致提交兩次，不建議使用。如：
     <input type="image" src="xxx.gif">
-->
<input type="reset" name="" value="重置">
</p>
</form>

html表格

1、<table>標籤：宣告一個表格，它的常用屬性如下：
•border屬性 定義表格的邊框，設定值是數值
•cellpadding屬性 定義單元格內容與邊框的距離，設定值是數值
•cellspacing屬性 定義單元格與單元格之間的距離，設定值是數值
•align屬性 設定整體表格相對於瀏覽器視窗的水平對齊方式,設定值有：left | center | right 

2、<tr>標籤：定義表格中的一行 

3、<td>和<th>標籤：定義一行中的一個單元格，td代表普通單元格，th表示表頭單元格，它們的常用屬性如下：
•align 設定單元格中內容的水平對齊方式,設定值有：left | center | right 
•valign 設定單元格中內容的垂直對齊方式 top | middle | bottom 
•colspan 設定單元格水平合併，設定值是數值 
•rowspan 設定單元格垂直合併，設定值是數值
頁面佈局概述

佈局也可以叫做排版，它指的是把文字和圖片等元素按照我們的意願有機地排列在頁面上，佈局的方式分為兩種：

1、table佈局：通過table元素將頁面空間劃分成若干個單元格，將文字或圖片等元素放入單元格中，隱藏表格的邊框，從而實現佈局。這種佈局方式也叫傳統佈局，目前主要使用在EDM(廣告郵件中的頁面)中，主流的佈局方式不用這種。 

2、HTML+CSS佈局(DIV+CSS)：主要通過CSS樣式設定來佈局文字或圖片等元素，需要用到CSS盒子模型、盒子型別、CSS浮動、CSS定位、CSS背景圖定位等知識來佈局，它比傳統佈局要複雜，目前是主流的佈局方式。
CSS

css基本語法及頁面引用

css基本語法

選擇器 { 屬性:值; 屬性:值; 屬性:值;}
/*
    css註釋 ctrl+shift+"/"
*/


div{ 
    width:100px; 
    height:100px; 
    color:red 
}

css頁面引入方法

外聯式：通過link標籤，連結到外部樣式表到頁面中
<link rel="stylesheet" type="text/css" href="css/main.css">
嵌入式：通過style標籤，在網頁上建立嵌入的樣式表
<style type="text/css">
    div{ width:100px; height:100px; color:red }
    ......
</style>
內聯式：通過標籤的style屬性，在標籤上直接寫樣式
<div style="width:100px; height:100px; color:red ">......</div>
css文字設定

常用的應用文字的css樣式：
•color 設定文字的顏色，如： color:red;
•font-size 設定文字的大小，如：font-size:12px;
•font-family 設定文字的字型，如：font-family:`微軟雅黑`;
•font-style 設定字型是否傾斜，如：font-style:`normal`; 設定不傾斜，font-style:`italic`;設定文字傾斜
•font-weight 設定文字是否加粗，如：font-weight:bold; 設定加粗 font-weight:normal 設定不加粗
•line-height 設定文字的行高，設定行高相當於在每行文字的上下同時加間距， 如：line-height:24px; 行高示例圖片 
•font 同時設定文字的幾個屬性，寫的順序有相容問題，建議按照如下順序寫： font：是否加粗 字號/行高 字型；如： font:normal 12px/36px `微軟雅黑`;
•text-decoration 設定文字的下劃線，如：text-decoration:none; 將文字下劃線去掉
•text-indent 設定文字首行縮排，如：text-indent:24px; 設定文字首行縮排24px 行高示例圖片 
•text-align 設定文字水平對齊方式，如text-align:center 設定文字水平居中
css顏色表示法

css顏色值主要有三種表示方法：

1、顏色名錶示，比如：red 紅色，gold 金色

2、rgb表示，比如：rgb(255,0,0)表示紅色

3、16進位制數值表示，比如：#ff0000 表示紅色，這種可以簡寫成 #f00
css選擇器

標籤選擇器

此種選擇器影響範圍大，建議儘量應用在層級選擇器中
*{margin:0;padding:0}
div{color:red}   


<div>....</div>   <!-- 對應以上兩條樣式 -->
<div class="box">....</div>   <!-- 對應以上兩條樣式 -->

id選擇器

通過id名來選擇元素，元素的id名稱不能重複，所以一個樣式設定項只能對應於頁面上一個元素，不能複用，id名一般給程式使用，所以不推薦使用id作為選擇器
#box{color:red} 

<div id="box">....</div>   <!-- 對應以上一條樣式，其它元素不允許應用此樣式 -->

類選擇器

通過類名來選擇元素，一個類可應用於多個元素，一個元素上也可以使用多個類，應用靈活，可複用，是css中應用最多的一種選擇器
.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px} 

<div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>
層級選擇器

主要應用在選擇父元素下的子元素，或者子元素下面的子元素，可與標籤元素結合使用，減少命名，同時也可以通過層級，防止命名衝突
.box span{color:red}
.box .red{color:pink}
.red{color:red}

<div class="box">
    <span>....</span>
    <a href="#" class="red">....</a>
</div>

<h3 class="red">....</h3>

組選擇器

多個選擇器，如果有同樣的樣式設定，可以使用組選擇器
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}

<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

偽類及偽元素選擇器

.box1:hover{color:red}
.box2:before{content:`行首文字`;}
.box3:after{content:`行尾文字`;}


<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
CSS盒子模型

把元素叫做盒子，設定對應的樣式分別為：盒子的寬度(width)、盒子的高度(height)、盒子的邊框(border)、盒子內的內容和邊框之間的間距(padding)、盒子與盒子之間的間距(margin)。

 設定寬高  
width:200px;  /* 設定盒子的寬度，此寬度是指盒子內容的寬度，不是盒子整體寬度(難點) */ 
height:200px; /* 設定盒子的高度，此高度是指盒子內容的高度，不是盒子整體高度(難點) */


設定邊框 
設定一邊的邊框，比如頂部邊框，可以按如下設定： 
border-top-color:red;    /* 設定頂部邊框顏色為紅色 */  
border-top-width:10px;   /* 設定頂部邊框粗細為10px */   
border-top-style:solid;  /* 設定頂部邊框的線性為實線，常用的有：solid(實線)  
  dashed(虛線)  dotted(點線); */


上面三句可以簡寫成一句： 
border-top:10px solid red;


設定其它三個邊的方法和上面一樣，把上面的`top`換成`left`就是設定左邊，換成`right`就是設定右邊，換成`bottom`就是設定底邊。

四個邊如果設定一樣，可以將四個邊的設定合併成一句： 
border:10px solid red;


設定內間距padding  

設定盒子四邊的內間距，可設定如下： 
padding-top：20px;     /* 設定頂部內間距20px */ 
padding-left:30px;     /* 設定左邊內間距30px */ 
padding-right:40px;    /* 設定右邊內間距40px */ 
padding-bottom:50px;   /* 設定底部內間距50px */


上面的設定可以簡寫如下： 
padding：20px 40px 50px 30px; /* 四個值按照順時針方向，分別設定的是 上 右 下 左  
四個方向的內邊距值。 */


padding後面還可以跟3個值，2個值和1個值，它們分別設定的專案如下：
padding：20px 40px 50px; /* 設定頂部內邊距為20px，左右內邊距為40px，底部內邊距為50px */ 
padding：20px 40px; /* 設定上下內邊距為20px，左右內邊距為40px*/ 
padding：20px; /* 設定四邊內邊距為20px */


設定外間距margin  

外邊距的設定方法和padding的設定方法相同，將上面設定項中的`padding`換成`margin`就是外邊距設定方法。

盒模型的實際尺寸

盒子的width和height設定的是盒子內容的寬和高，不是盒子本身的寬和高
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子的真實尺寸</title>
    <style type="text/css">
        .box01{width:50px;height:50px;background-color:gold;}
        .box02{width:50px;height:50px;background-color:gold;border:50px
         solid #000}
        .box03{width:50px;height:50px;background-color:gold;border:50px
         solid #000;padding: 50px;}
    </style>
</head>
<body>
    <div class="box01">1</div>
    <br />
    <div class="box02">2</div>
    <br />
    <div class="box03">3</div>
</body>
</html>
盒模型使用技巧及相關問題

margin相關技巧

1、設定元素水平居中： margin:x auto;

2、margin負值讓元素位移及邊框合併

外邊距合併

外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者
解決方法如下： 

1、使用這種特性
2、設定一邊的外邊距，一般設定margin-top
3、將元素浮動或者定位 
margin-top 塌陷

在兩個盒子巢狀時候，內部的盒子設定的margin-top會加到外邊的盒子上，導致內部的盒子margin-top設定失敗
解決方法如下：

1、外部盒子設定一個邊框
2、外部盒子設定 overflow:hidden
3、使用偽元素類： 
.clearfix:before{
    content: ``;
    display:table;
}
css元素溢位

當子元素的尺寸超過父元素的尺寸時，需要設定父元素顯示溢位的子元素的方式，設定的方法是通過overflow屬性來設定
overflow的設定項： 
1、visible 預設值。內容不會被修剪，會呈現在元素框之外。
2、hidden 內容會被修剪，並且其餘內容是不可見的，此屬性還有清除浮動、清除margin-top塌陷的功能。
3、scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容。
4、auto 如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容。
5、inherit 規定應該從父元素繼承 overflow 屬性的值。
塊元素、內聯元素、內聯塊元素

元素就是標籤，佈局中常用的有三種標籤，塊元素、內聯元素、內聯塊元素，瞭解這三種元素的特性，才能熟練的進行頁面佈局。

 塊元素 
塊元素，也可以稱為行元素，佈局中常用的標籤如：div、p、ul、li、h1~h6、dl、dt、dd等等都是塊元素，它在佈局中的行為：
•支援全部的樣式
•如果沒有設定寬度，預設的寬度為父級寬度100%
•盒子佔據一行、即使設定了寬度

內聯元素
內聯元素，也可以稱為行內元素，佈局中常用的標籤如：a、span、em、b、strong、i等等都是內聯元素，它們在佈局中的行為：
•支援部分樣式（不支援寬、高、margin上下、padding上下）
•寬高由內容決定
•盒子並在一行
•程式碼換行，盒子之間會產生間距
•子元素是內聯元素，父元素可以用text-align屬性設定子元素水平對齊方式

 解決內聯元素間隙的方法 
1、去掉內聯元素之間的換行
2、將內聯元素的父級設定font-size為0，內聯元素自身再設定font-size

內聯塊元素
內聯塊元素，也叫行內塊元素，是新增的元素型別，現有元素沒有歸於此類別的，img和input元素的行為類似這種元素，但是也歸類於內聯元素，我們可以用display屬性將塊元素或者內聯元素轉化成這種元素。它們在佈局中表現的行為：
•支援全部樣式
•如果沒有設定寬高，寬高由內容決定
•盒子並在一行
•程式碼換行，盒子會產生間距
•子元素是內聯塊元素，父元素可以用text-align屬性設定子元素水平對齊方式。

這三種元素，可以通過display屬性來相互轉化，不過實際開發中，塊元素用得比較多，所以我們經常把內聯元素轉化為塊元素，少量轉化為內聯塊，而要使用內聯元素時，直接使用內聯元素，而不用塊元素轉化了。

display屬性
display屬性是用來設定元素的型別及隱藏的，常用的屬性有：
1、none 元素隱藏且不佔位置
2、block 元素以塊元素顯示
3、inline 元素以內聯元素顯示
4、inline-block 元素以內聯塊元素顯示 
浮動

浮動特性

1、浮動元素有左浮動(float:left)和右浮動(float:right)兩種 

2、浮動的元素會向左或向右浮動，碰到父元素邊界、其他元素才停下來 

3、相鄰浮動的塊元素可以並在一行，超出父級寬度就換行 

4、浮動讓行內元素或塊元素自動轉化為行內塊元素(此時不會有行內塊元素間隙問題) 

5、浮動元素後面沒有浮動的元素會佔據浮動元素的位置，沒有浮動的元素內的文字會避開浮動的元素，形成文字饒圖的效果 

6、父元素如果沒有設定尺寸(一般是高度不設定)，父元素內整體浮動的元素無法撐開父元素，父元素需要清除浮動 

7、浮動元素之間沒有垂直margin的合併 

清除浮動

父級上增加屬性overflow：hidden
在最後一個子元素的後面加一個空的div，給它樣式屬性 clear:both（不推薦）
使用成熟的清浮動樣式類，clearfix
.clearfix:after,.clearfix:before{ content: "";display: table;}
.clearfix:after{ clear:both;}
.clearfix{zoom:1;}
清除浮動的使用方法

.con2{... overflow:hidden}
或者
<div class="con2 clearfix">
定位

文件流

文件流，是指盒子按照html標籤編寫的順序依次從上到下，從左到右排列，塊元素佔一行，行內元素在一行之內從左到右排列，先寫的先排列，後寫的排在後面，每個盒子都佔據自己的位置
關於定位

使用css的position屬性來設定元素的定位型別，postion的設定項如下： 
•relative 生成相對定位元素，元素所佔據的文件流的位置保留，元素本身相對自身原位置進行偏移。 
•absolute 生成絕對定位元素，元素脫離文件流，不佔據文件流的位置，可以理解為漂浮在文件流的上方，相對於上一個設定了定位的父級元素來進行定位，如果找不到，則相對於body元素進行定位。 
•fixed 生成固定定位元素，元素脫離文件流，不佔據文件流的位置，可以理解為漂浮在文件流的上方，相對於瀏覽器視窗進行定位。 
•static 預設值，沒有定位，元素出現在正常的文件流中，相當於取消定位屬性或者不設定定位屬性。 
•inherit 從父元素繼承 position 屬性的值。
定位元素的偏移

定位的元素還需要用left、right、top或者bottom來設定相對於參照元素的偏移值
定位元素層級

定位元素是浮動的正常的文件流之上的，可以用z-index屬性來設定元素的層級
.box01{
    ......
    position:absolute;  /* 設定了絕對定位 */
    left:200px;            /* 相對於參照元素左邊向右偏移200px */
    top:100px;          /* 相對於參照元素頂部向下偏移100px */
    z-index:10          /* 將元素層級設定為10 */
}
定位元素特性

絕對定位和固定定位的塊元素和行內元素會自動轉化為行內塊元素
前端女俠-部落格園
background屬性

屬性解釋

background屬性是css中應用比較多，且比較重要的一個屬性，它是負責給盒子設定背景圖片和背景顏色的，background是一個複合屬性，它可以分解成如下幾個設定項： 
•background-color 設定背景顏色
•background-image 設定背景圖片地址
•background-repeat 設定背景圖片如何重複平鋪
•background-position 設定背景圖片的位置
•background-attachment 設定背景圖片是固定還是隨著頁面滾動條滾動

實際應用中，我們可以用background屬性將上面所有的設定項放在一起，而且也建議這麼做，這樣做效能更高，而且相容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，這裡面的“#00ff00”是設定background-color；“url(bgimage.gif)”是設定background-image；“no-repeat”是設定background-repeat；“left center”是設定background-position；“fixed”是設定background-attachment，各個設定項用空格隔開，有的設定項不寫也是可以的，它會使用預設值。
HTML5與CSS3

CSS權重

CSS權重

CSS權重指的是樣式的優先順序，有兩條或多條樣式作用於一個元素，權重高的那條樣式對元素起作用,權重相同的，後寫的樣式會覆蓋前面寫的樣式
權重的等級

可以把樣式的應用方式分為幾個等級，按照等級來計算權重

1、!important，加在樣式屬性值後，權重值為 10000
2、內聯樣式，如：style=””，權重值為1000
3、ID選擇器，如：#content，權重值為100
4、類，偽類和屬性選擇器，如： content、:hover 權重值為10
5、標籤選擇器和偽元素選擇器，如：div、p、:before 權重值為1
6、通用選擇器（*）、子選擇器（>）、相鄰選擇器（+）、同胞選擇器（~）、權重值為0 
權重的計算例項

例項一：

<style type="text/css">
    div{
        color:red !important;
    }        
</style>
......
<div style="color:blue">這是一個div元素</div>
<!-- 
兩條樣式同時作用一個div，上面的樣式權重值為10000+1，下面的行間樣式的權重值為1000，
所以文字的最終顏色為red 
-->
例項二：

<style type="text/css">
    #content div.main_content h2{
        color:red;    
    }
    #content .main_content h2{
        color:blue;
    }
</style>
......
<div id="content">
    <div class="main_content">
        <h2>這是一個h2標題</h2>
    </div>
</div>
<!-- 
第一條樣式的權重計算： 100+1+10+1，結果為112；
第二條樣式的權重計算： 100+10+1，結果為111；
h2標題的最終顏色為red
-->
CSS3新增選擇器

元素選擇器

E:nth-child(n)：匹配元素型別為E且是父元素的第n個子元素
E:first-child：匹配元素型別為E且是父元素的第一個子元素
E:last-child：匹配元素型別為E且是父元素的最後一個子元素
E > F E元素下面第一層子集
E ~ F E元素後面的兄弟元素
E + F 緊挨著的後面的兄弟元素
<style type="text/css">            
    .list div:nth-child(2){
        background-color:red;
    }
</style>
......
<div class="list">
    <h2>1</h2>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

<!-- 第2個子元素div匹配 -->
屬性選擇器

E[attr] 含有attr屬性的元素
E[attr=`ok`] 含有attr屬性的元素且它的值為“ok”
E[attr^=`ok`] 含有attr屬性的元素且它的值的開頭含有“ok”
E[attr$=`ok`] 含有attr屬性的元素且它的值的結尾含有“ok”
E[attr*=`ok`] 含有attr屬性的元素且它的值中含有“ok”
<style type="text/css">
    div[data-attr=`ok`]{
        color:red;
    }
</style>
......
<div data-attr="ok">這是一個div元素</div>
CSS3圓角、rgba

CSS3圓角

設定某一個角的圓角，比如設定左上角的圓角：
border-top-left-radius:30px 60px;

同時分別設定四個角： border-radius:30px 60px 120px 150px;

設定四個圓角相同：
border-radius:50%;
rgba（新的顏色值表示法）

盒子透明度表示法
rgba(0,0,0,0.1) 前三個數值表示顏色，第四個數值表示顏色的透明度
.box
    {
        opacity:0.1;
        /* 相容IE */
        filter:alpha(opacity=10); 
    }
CSS3 transition動畫

1、transition-property 設定過渡的屬性，比如：width height background-color
2、transition-duration 設定過渡的時間，比如：1s 500ms
3、transition-timing-function 設定過渡的運動方式，常用有 linear(勻速)|ease(緩衝運動)
4、transition-delay 設定動畫的延遲
5、transition: property duration timing-function delay 同時設定四個屬性
CSS3 transform變換

1、translate(x,y) 設定盒子位移
2、scale(x,y) 設定盒子縮放
3、rotate(deg) 設定盒子旋轉
4、skew(x-angle,y-angle) 設定盒子斜切
5、perspective 設定透視距離
6、transform-style flat | preserve-3d 設定盒子是否按3d空間顯示
7、translateX、translateY、translateZ 設定三維移動
8、rotateX、rotateY、rotateZ 設定三維旋轉
9、scaleX、scaleY、scaleZ 設定三維縮放
10、tranform-origin 設定變形的中心點
11、backface-visibility 設定盒子背面是否可見
CSS3 animation動畫

1、@keyframes 定義關鍵幀動畫
2、animation-name 動畫名稱
3、animation-duration 動畫時間
4、animation-timing-function 動畫曲線 linear(勻速)|ease(緩衝)|steps(步數)
5、animation-delay 動畫延遲
6、animation-iteration-count 動畫播放次數 n|infinite
7、animation-direction 動畫結束後是否反向還原 normal|alternate
8、animation-play-state 動畫狀態 paused(停止)|running(運動)
9、animation-fill-mode 動畫前後的狀態 none(預設)|forwards(結束時停留在最後一幀)|backwards(開始時停留在定義的開始幀)|both(前後都應用)
10、animation:name duration timing-function delay iteration-count direction;同時設定多個屬性
CSS3 瀏覽器字首

瀏覽器樣式字首

為了讓CSS3樣式相容，需要將某些樣式加上瀏覽器字首
-ms- 相容IE瀏覽器
-moz- 相容firefox
-o- 相容opera
-webkit- 相容chrome 和 safari
div
{    
    -ms-transform: rotate(30deg);        
    -webkit-transform: rotate(30deg);    
    -o-transform: rotate(30deg);        
    -moz-transform: rotate(30deg);    
    transform: rotate(30deg);
}
自動新增瀏覽器字首

目前的狀況是，有些CSS3屬性需要加字首，有些不需要加，有些只需要加一部分，這些加字首的工作可以交給外掛來完成，比如安裝： autoprefixer
可以在Sublime text中通過package control 安裝 autoprefixer
Autoprefixer在Sublime text中的設定

preferences/key Bindings-User
{ "keys": ["ctrl+alt+x"], "command": "autoprefixer" }
Preferences>package setting>AutoPrefixer>Setting-User
{
    "browsers": ["last 7 versions"],
    "cascade": true,
    "remove": true
}
last 7 versions：最新的瀏覽器的7個版本
cascade：縮排美化屬性值
remove：是否去掉不必要的字首
HTML5新增標籤

新增語義標籤

1、<header> 頁面頭部、頁首
2、<nav> 頁面導航
3、<article> 一篇文章
4、<section> 文章中的章節
5、<aside> 側邊欄
6、<footer> 頁面底部、頁尾
音訊視訊

1、<audio>
2、<video>

PC端相容h5的新標籤的方法，在頁面中引入以下js檔案:
<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script>
HTML5 新增表單控制元件

新增型別：網址 郵箱 日期 時間 星期 數量 範圍 電話 顏色 搜尋
<label>網址:</label><input type="url" name="" required><br><br> 
<label>郵箱:</label><input type="email" name="" required><br><br> 
<label>日期:</label><input type="date" name=""><br><br> 
<label>時間:</label><input type="time" name=""><br><br> 
<label>星期:</label><input type="week" name=""><br><br> 
<label>數量:</label><input type="number" name=""> <br><br>
<label>範圍:</label><input type="range" name=""><br><br> 
<label>電話:</label><input type="tel" name=""><br><br> 
<label>顏色:</label><input type="color" name=""><br><br> 
<label>搜尋:</label><input type="search" name=""><br><br>
新增常用表單控制元件屬性：
1、placeholder 設定文字框預設提示文字
2、autofocus 自動獲得焦點
3、autocomplete 聯想關鍵詞 
常用css列表


    color 設定文字的顏色，如： color:red;

    font-size 設定文字的大小，如：font-size:12px;

    font-family 設定文字的字型，如：font-family:`微軟雅黑`;

    font-style 設定字型是否傾斜，如：font-style:`normal`; 設定不傾斜，font-style:`italic`;設定文字傾斜

    font-weight 設定文字是否加粗，如：font-weight:bold; 設定加粗 font-weight:normal 設定不加粗

    line-height 設定文字的行高，設定行高相當於在每行文字的上下同時加間距， 如：line-height:24px;

    font 同時設定文字的幾個屬性，寫的順序有相容問題，建議按照如下順序寫： font：是否加粗 字號/行高 字型；如： font:normal 12px/36px `微軟雅黑`;

    text-decoration 設定文字的下劃線，如：text-decoration:none; 將文字下劃線去掉

    text-indent 設定文字首行縮排，如：text-indent:24px; 設定文字首行縮排24px

    text-align 設定文字水平對齊方式，如text-align:center 設定文字水平居中

    text-overflow 設定一行文字寬度超過容器寬度時的顯示方式，如：text-overflow:clip 將多出的文字裁剪掉 text-overflow:ellipsis 將多出的文字顯示成省略號

    white-space 一般用來設定文字不換行，如：white-space:nowrap 設定文字不換行 一般與text-overflow和overflow屬性配合使用來讓一行文字超出寬度時顯示省略號

    list-style 一般用來設定去掉ul或者ol列表中的小圓點或數字 如：list-style:none

    width 設定盒子內容的寬度，如： width：100px;

    height 設定盒子內容的高度，如： height：100px;

    border-top 設定盒子頂部邊框的三個屬性 如：border-top:5px solid red;設定盒子頂部邊框為3畫素寬的紅色的實線，詳細設定說明：盒子模型

    border-left 設定盒子左邊邊框的三個屬性 如：border-left:3px dotted red;設定盒子左邊邊框為3畫素寬的紅色的點線，詳細設定說明：盒子模型

    border-right 設定盒子右邊邊框的三個屬性 如：border-right:2px dashed red;設定盒子右邊框為2畫素寬的紅色的虛線，詳細設定說明：盒子模型

    border-bottom 設定盒子底部邊框的三個屬性 如：border-bottom:1px solid red;設定盒子底部邊框為1畫素寬的紅色的實線，詳細設定說明：盒子模型

    border 同時設定盒子的四個邊框，如果四個邊的樣式統一就使用它 如：border:1px solid #000 設定盒子四個邊都是1畫素寬的黑色實線，詳細設定說明：盒子模型

    padding 設定盒子四個邊的內邊距 如：padding:10px 20px 30px 40px 分別設定盒子上邊(10px)、右邊(20px)、下邊(30px)、左邊(40px)的內邊距(順時針)，詳細設定說明：盒子模型

    margin 設定盒子四個邊的外邊距 如：margin:10px 20px 30px 40px 分別設定盒子上邊(10px)、右邊(20px)、下邊(30px)、左邊(40px)的外邊距(順時針)，詳細設定說明：盒子模型

    overflow 設定當子元素的尺寸超過父元素的尺寸時，盒子及子元素的顯示方式 如：overflow:hidden 超出的子元素被裁切，詳細設定說明：元素溢位

    display 設定盒子的顯示型別及隱藏，如：display:block 將盒子設定為以塊元素顯示 display:none 將元素隱藏，詳細設定說明：元素型別

    float 設定元浮動 如：float:left 設定左浮動 float:right 設定右浮動，詳細設定說明：元素浮動

    clear 在盒子兩側清除浮動 如：clear:both 在盒子兩側都不允許浮動，詳細設定說明：元素浮動

    position 設定元素定位 如：position:relative 設定元素相對定位，詳細設定說明：元素定位

    background 設定元素的背景色和背景圖片，如：background:url(bg.jpg) cyan;設定盒子的背景圖片為bg.jpg，背景色為cyan，詳細設定說明：元素背景

    background-size 設定盒子背景圖的尺寸，如：background-size:30px 40px;設定背景圖的尺寸寬為30px，高為40px，這個屬性不能合到background屬性中，詳細設定說明：retina屏適配

    opacity 設定元素整體透明度，一般為了相容需要加上filter屬性設定 如：opacity:0.1;filter:alpha(opacity=10)

    cursor 設定滑鼠懸停在元素上時指標的形狀 如：cursor:pointer 設定為手型

    outline 設定文字輸入框周圍凸顯的藍色的線，一般是設為沒有 如：outline:none

    border-radius 設定盒子的圓角 如：border-radius:10px 設定盒子的四個角為10px半徑的圓角，詳細設定說明：css圓角

    box-shadow 設定盒子的陰影，如：box-shadow:10px 10px 5px 2px pink;設定盒子有粉色的陰影，詳細設定說明：css陰影

    transition 設定盒子的過渡動畫，如：transition:all 1s ease;設定元素過渡動畫為1秒完成，所有變動的屬性都做動畫，詳細設定說明：過渡動畫

    animation 設定盒子的關鍵幀動畫，詳細設定說明：關鍵幀動畫

    transform 設定盒子的位移、旋轉、縮放、斜切等變形，如：transform:rotate(45deg);設定盒子旋轉45度，詳細設定說明：元素變形

    box-sizing 設定盒子的尺寸計算方式，如：box-sizing:border-box 將盒子的尺寸計算方法設定為按邊框計算，此時width和height的值就是盒子的實際尺寸

    border-collapse 設定表格邊框是否合併，如：border-collapse:collapse，將表格邊框合併，這樣就可以製作1px邊框的表格。

JavaScript

JavaScript介紹

前端三大塊
1、HTML：頁面結構
2、CSS：頁面表現：元素大小、顏色、位置、隱藏或顯示、部分動畫效果
3、JavaScript：頁面行為：部分動畫效果、頁面與使用者的互動、頁面功能 
JavaScript嵌入頁面的方式

行間事件（主要用於事件）

<input type="button" name="" onclick="alert(`ok！`);">
頁面script標籤嵌入

<script type="text/javascript">        
    alert(`ok！`);
</script>
外部引入

<script type="text/javascript" src="js/index.js"></script>
變數

JavaScript 是一種弱型別語言，javascript的變數型別由它的值來決定。 定義變數需要用關鍵字 `var`
變數型別

5種基本資料型別：
1、number 數字型別
2、string 字串型別
3、boolean 布林型別 true 或 false
4、undefined undefined型別，變數宣告未初始化，它的值就是undefined
5、null null型別，表示空物件，如果定義的變數將來準備儲存物件，可以將變數初始化為null,在頁面上獲取不到物件，返回的值就是null
1種複合型別：
object
javascript註釋

<script type="text/javascript">    

// 單行註釋
var iNum = 123;
/*  
    多行註釋
    1、...
    2、...
*/
var sTr = `abc123`;
</script>
變數、函式、屬性、函式引數命名規範

1、區分大小寫
2、第一個字元必須是字母、下劃線（_）或者美元符號（$）
3、其他字元可以是字母、下劃線、美元符或數字
獲取元素方法一

可以使用內建物件document上的getElementById方法來獲取頁面上設定了id屬性的元素，獲取到的是一個html物件，然後將它賦值給一個變數，比如：
<script type="text/javascript">
    var oDiv = document.getElementById(`div1`);
</script>
....
<div id="div1">這是一個div元素</div>
上面的語句，如果把javascript寫在元素的上面，就會出錯，因為頁面上從上往下載入執行的，javascript去頁面上獲取元素div1的時候，元素div1還沒有載入，解決方法有兩種：
第一種方法：將javascript放到頁面最下邊
....
<div id="div1">這是一個div元素</div>
....

<script type="text/javascript">
    var oDiv = document.getElementById(`div1`);
</script>
</body>

第二種方法：將javascript語句放到window.onload觸發的函式裡面,獲取元素的語句會在頁面載入完後才執行，就不會出錯了
<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById(`div1`);
    }
</script>

....

<div id="div1">這是一個div元素</div>
操作元素屬性

獲取的頁面元素，就可以對頁面元素的屬性進行操作，屬性的操作包括屬性的讀和寫
操作屬性的方法

1、“.” 操作
2、“[ ]”操作
屬性寫法

1、html的屬性和js裡面屬性寫法一樣
2、“class” 屬性寫成 “className”
3、“style” 屬性裡面的屬性，有橫槓的改成駝峰式，比如：“font-size”，改成”style.fontSize”
通過“.”操作屬性：
<script type="text/javascript">

    window.onload = function(){
        var oInput = document.getElementById(`input1`);
        var oA = document.getElementById(`link1`);
        // 讀取屬性值
        var sValue = oInput.value;
        var sType = oInput.type;
        var sName = oInput.name;
        var sLinks = oA.href;
        // 寫(設定)屬性
        oA.style.color = `red`;
        oA.style.fontSize = sValue;
    }

</script>

......

<input type="text" name="setsize" id="input1" value="20px">
<a href="http://www.itcast.cn" id="link1">傳智播客</a>
通過“[ ]”操作屬性：
<script type="text/javascript">

    window.onload = function(){
        var oInput1 = document.getElementById(`input1`);
        var oInput2 = document.getElementById(`input2`);
        var oA = document.getElementById(`link1`);
        // 讀取屬性
        var sVal1 = oInput1.value;
        var sVal2 = oInput2.value;
        // 寫(設定)屬性
        // oA.style.val1 = val2; 沒反應
        oA.style[sVal1] = sVal2;        
    }

</script>

......

<input type="text" name="setattr" id="input1" value="fontSize">
<input type="text" name="setnum" id="input2" value="30px">
<a href="http://www.itcast.cn" id="link1">傳智播客</a>
innerHTML

innerHTML可以讀取或者寫入標籤包裹的內容
<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById(`div1`);
        //讀取
        var sTxt = oDiv.innerHTML;
        alert(sTxt);
        //寫入
        oDiv.innerHTML = `<a href="http://www.itcast.cn">傳智播客<a/>`;
    }
</script>

......

<div id="div1">這是一個div元素</div>
函式

變數與函式預解析

JavaScript解析過程分為兩個階段，先是編譯階段，然後執行階段，在編譯階段會將function定義的函式提前，並且將var定義的變數宣告提前，將它賦值為undefined
<script type="text/javascript">    
    fnAlert();       // 彈出 hello！
    alert(iNum);  // 彈出 undefined
    function fnAlert(){
        alert(`hello!`);
    }
    var iNum = 123;
</script>
提取行間事件

在html行間呼叫的事件可以提取到javascript中呼叫，從而做到結構與行為分離
<!--行間事件呼叫函式   -->
<script type="text/javascript">        
    function fnAlert(){
        alert(`ok!`);
    }
</script>
......
<input type="button" name="" value="彈出" onclick="fnAlert()">

<!-- 提取行間事件 -->
<script type="text/javascript">

window.onload = function(){
    var oBtn = document.getElementById(`btn1`);
    oBtn.onclick = fnAlert;
    function fnAlert(){
        alert(`ok!`);
    }
}    
</script>
......
<input type="button" name="" value="彈出" id="btn1">
匿名函式

定義的函式可以不給名稱，這個叫做匿名函式，可以將匿名函式直接賦值給元素繫結的事件來完成匿名函式的呼叫
<script type="text/javascript">

window.onload = function(){
    var oBtn = document.getElementById(`btn1`);
    /*
    oBtn.onclick = myalert;
    function myalert(){
        alert(`ok!`);
    }
    */
    // 直接將匿名函式賦值給繫結的事件

    oBtn.onclick = function (){
        alert(`ok!`);
    }
}

</script>
條件語句

switch語句

多重if else語句可以換成效能更高的switch語句
var iNow = 1;

switch (iNow){
    case 1:
        ...;
        break;
    case 2:
        ...;
        break;    
    default:
        ...;
}
陣列及操作方法

陣列就是一組資料的集合，javascript中，陣列裡面的資料可以是不同型別的
定義陣列的方法

//物件的例項建立
var aList = new Array(1,2,3);

//直接量建立
var aList2 = [1,2,3,`asd`];
運算元組中資料的方法

獲取陣列的長度：aList.length
var aList = [1,2,3,4];
alert(aList.length); // 彈出4
用下標運算元組的某個資料：aList[0]
var aList = [1,2,3,4];
alert(aList[0]); // 彈出1
join() 將陣列成員通過一個分隔符合併成字串
var aList = [1,2,3,4];
alert(aList.join(`-`)); // 彈出 1-2-3-4
push() 和 pop() 從陣列最後增加成員或刪除成員
var aList = [1,2,3,4];
aList.unshift(5);
alert(aList); //彈出5,1,2,3,4
aList.shift();
alert(aList); // 彈出1,2,3,4
unshift()和 shift() 從陣列前面增加成員或刪除成員
var aList = [1,2,3,4];
aList.unshift(5);
alert(aList); //彈出5,1,2,3,4
aList.shift();
alert(aList); // 彈出1,2,3,4
reverse() 將陣列反轉
var aList = [1,2,3,4];
aList.reverse();
alert(aList);  // 彈出4,3,2,1
indexOf() 返回陣列中元素第一次出現時的索引值
var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(1));
splice() 在陣列中增加或刪除成員
var aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //從第2個元素開始，刪除1個元素，然後在此位置增加`7,8,9`三個元素
alert(aList); //彈出 1,2,7,8,9,4
迴圈語句

陣列去重

var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];

var aList2 = [];

for(var i=0;i<aList.length;i++)
{
    if(aList.indexOf(aList[i])==i)
    {
        aList2.push(aList[i]);
    }
}

alert(aList2);
獲取元素方法二

可以使用內建物件document上的getElementsByTagName方法來獲取頁面上的某一種標籤，獲取的是一個選擇集，不是陣列，但是可以用下標的方式操作選擇集裡面的標籤元素
<script type="text/javascript">
    window.onload = function(){
        var aLi = document.getElementsByTagName(`li`);
        // aLi.style.backgroundColor = `gold`; // 出錯！不能同時設定多個li
        alert(aLi.length);
        aLi[0].style.backgroundColor = `gold`;
    }
</script>
....
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
Javascript組成

1、ECMAscript javascript的語法（變數、函式、迴圈語句等語法）
2、DOM 文件物件模型 操作html和css的方法
3、BOM 瀏覽器物件模型 操作瀏覽器的一些方法 
字串處理方法

字串合併操作：“ + ”
var iNum01 = 12;
var iNum02 = 24;
var sNum03 = `12`;
var sTr = `abc`;
alert(iNum01+iNum02);  //彈出36
alert(iNum01+sNum03);  //彈出1212 數字和字串相加等同於字串相加
alert(sNum03+sTr);     // 彈出12abc
parseInt() 將數字字串轉化為整數
var sNum01 = `12`;
var sNum02 = `24`;
var sNum03 = `12.32`;
alert(sNum01+sNum02);  //彈出1224
alert(parseInt(sNum01)+parseInt(sNum02))  //彈出36
alert(sNum03)   //彈出數字12 將字串小數轉化為數字整數
parseFloat() 將數字字串轉化為小數
var sNum03 = `12.32`
alert(parseFloat(sNum03));  //彈出 12.32 將字串小數轉化為數字小數
split() 把一個字串分隔成字串組成的陣列
var sTr = `2017-4-22`;
var aRr = sTr.split("-");
var aRr2= sTr.split("");

alert(aRr);  //彈出[`2017`,`4`,`2`]
alert(aRr2);  //彈出[`2`,`0`,`1`,`7`,`-`,`4`,`-`,`2`,`2`]
charAt() 獲取字串中的某一個字元
var sId = "#div1";
var sTr = sId.charAt(0);
alert(sTr); //彈出 #
indexOf() 查詢字串是否含有某字元
var sTr = "abcdefgh";
var iNum = sTr.indexOf("c");
alert(iNum); //彈出2
substring() 擷取字串 用法： substring(start,end)（不包括end）
var sTr = "abcdefghijkl";
var sTr2 = sTr.substring(3,5);
var sTr3 = sTr.substring(1);

alert(sTr2); //彈出 de
alert(sTr3); //彈出 bcdefghijkl
toUpperCase() 字串轉大寫
var sTr = "abcdef";
var sTr2 = sTr.toUpperCase();
alert(sTr2); //彈出ABCDEF
toLowerCase() 字串轉小寫
var sTr = "ABCDEF";
var sTr2 = sTr.toLowerCase();
alert(sTr2); //彈出abcdef
字串反轉
var str = `asdfj12jlsdkf098`;
var str2 = str.split(``).reverse().join(``);

alert(str2);
型別轉換

直接轉換 parseInt() 與 parseFloat()

alert(`12`+7); //彈出127
alert( parseInt(`12`) + 7 );  //彈出19 
alert( parseInt(5.6));  // 彈出5
alert(`5.6`+2.3);  // 彈出5.62.3
alert(parseFloat(`5.6`)+2.3);  // 彈出7.8999999999999995
alert(0.1+0.2); //彈出 0.3000000000000004
alert((0.1*100+0.2*100)/100); //彈出0.3
alert((parseFloat(`5.6`)*100+2.3*100)/100); //彈出7.9
隱式轉換 “==” 和 “-”

if(`3`==3)
{
    alert(`相等`);
}

// 彈出`相等`
alert(`10`-3);  // 彈出7
NaN 和 isNaN

alert( parseInt(`123abc`) );  // 彈出123
alert( parseInt(`abc123`) );  // 彈出NaN
除錯程式的方法

1、alert

2、console.log

3、document.title 
定時器

定時器在javascript中的作用

1、製作動畫
2、非同步操作
3、函式緩衝與節流
/*
    定時器：
    setTimeout  只執行一次的定時器 
    clearTimeout 關閉只執行一次的定時器
    setInterval  反覆執行的定時器
    clearInterval 關閉反覆執行的定時器

*/

var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
    alert(`ok!`);
}
封閉函式

封閉函式是javascript中匿名函式的另外一種寫法，建立一個一開始就執行而不用命名的函式
(function myalert(){
    alert(`hello!`);
})();
在函式定義前加上“~”和“!”等符號來定義匿名函式
!function myalert(){
    alert(`hello!`);
}()
封閉函式的好處

封閉函式可以創造一個獨立的空間，在封閉函式內定義的變數和函式不會影響外部同名的函式和變數，可以避免命名衝突，在頁面上引入多個js檔案時，用這種方式新增js檔案比較安全，比如：
var iNum01 = 12;
function myalert(){
    alert(`hello!`);
}
(function(){
    var iNum01 = 24;
    function myalert(){
        alert(`hello!world`);
    }
    alert(iNum01);
    myalert()
})()
alert(iNum01);
myalert();
常用內建物件

document
document.getElementById //通過id獲取元素
document.getElementsByTagName //通過標籤名獲取元素
document.referrer  //獲取上一個跳轉頁面的地址(需要伺服器環境)
location
window.location.href  //獲取或者重定url地址
window.location.search //獲取地址引數部分
window.location.hash //獲取頁面錨點或者叫雜湊值
Math
Math.random 獲取0-1的隨機數
Math.floor 向下取整
Math.ceil 向上取整
原型繼承

JavaScript的原型繼承實現方式就是：
定義新的建構函式，並在內部用call()呼叫希望“繼承”的建構函式，並繫結this；
藉助中間函式F實現原型鏈繼承，最好通過封裝的inherits函式完成；
繼續在新的建構函式的原型上定義新方法。
廖雪峰-原型繼承
JQuery

jquery

jquery是一個函式庫，一個js檔案，頁面用script標籤引入這個js檔案就可以使用

<script type="text/javascript" src="js/jquery-1.12.2.js"></script>
jquery選擇器

jquery選擇器

jquery選擇器可以快速地選擇元素，選擇規則和css樣式相同，使用length屬性判斷是否選擇成功
$(`#myId`) //選擇id為myId的網頁元素
$(`.myClass`) // 選擇class為myClass的元素
$(`li`) //選擇所有的li元素
$(`#ul1 li span`) //選擇id為為ul1元素下的所有li下的span元素
$(`input[name=first]`) // 選擇name屬性等於first的input元素
對選擇集進行過濾

$(`div`).has(`p`); // 選擇包含p元素的div元素
$(`div`).not(`.myClass`); //選擇class不等於myClass的div元素
$(`div`).filter(`.myClass`); //選擇class等於myClass的div元素
$(`div`).eq(5); //選擇第6個div元素
選擇集轉移

$(`div`).prev(); //選擇div元素前面緊挨的同輩元素
$(`div`).prevAll(); //選擇div元素之前所有的同輩元素
$(`div`).next(); //選擇div元素後面緊挨的同輩元素
$(`div`).nextAll(); //選擇div元素後面所有的同輩元素
$(`div`).parent(); //選擇div的父元素
$(`div`).children(); //選擇div的所有子元素
$(`div`).siblings(); //選擇div的同級元素
$(`div`).find(`.myClass`); //選擇div內的class等於myClass的元素
判斷是否選擇到了元素

jquery有容錯機制，即使沒有找到元素，也不會出錯，可以用length屬性來判斷是否找到了元素,length等於0，就是沒選擇到元素，length大於0，就是選擇到了元素
var $div1 = $(`#div1`);
var $div2 = $(`#div2`);
alert($div1.length); // 彈出1
alert($div2.length); // 彈出0
......
<div id="div1">這是一個div</div>
jquery樣式操作

操作行間樣式

// 獲取div的樣式
$("div").css("width");
$("div").css("color");

//設定div的樣式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});
選擇器獲取的多個元素，獲取資訊獲取的是第一個，比如：$("div").css("width")，獲取的是第一個div的width
操作樣式類名

$("#div1").addClass("divClass2") //為id為div1的物件追加樣式divClass2
$("#div1").removeClass("divClass")  //移除id為div1的物件的class名為divClass的樣式
$("#div1").removeClass("divClass divClass2") //移除多個樣式
$("#div1").toggleClass("anotherClass") //重複切換anotherClass樣式
獲取元素的索引值

var $li = $(`.list li`).eq(1);
alert($li.index()); // 彈出1
......
<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
jquery特殊效果

fadeIn() 淡入

    $btn.click(function(){

        $(`#div1`).fadeIn(1000,`swing`,function(){
            alert(`done!`);
        });

    });

fadeOut() 淡出
fadeToggle() 切換淡入淡出
hide() 隱藏元素
show() 顯示元素
toggle() 切換元素的可見狀態
slideDown() 向下展開
slideUp() 向上捲起
slideToggle() 依次展開或捲起某個元素
jquery鏈式呼叫

$(`#div1`) // id為div1的元素
.children(`ul`) //該元素下面的ul子元素
.slideDown(`fast`) //高度從零變到實際高度來顯示ul元素
.parent()  //跳到ul的父元素，也就是id為div1的元素
.siblings()  //跳到div1元素平級的所有兄弟元素
.children(`ul`) //這些兄弟元素中的ul子元素
.slideUp(`fast`);  //高度實際高度變換到零來隱藏ul元素
jquery動畫

通過animate方法可以設定元素某屬性值上的動畫，可以設定一個或多個屬性值，動畫執行完成後會執行一個函式
$(`#div1`).animate({
    width:`+=100`,
    height:300
},1000,`swing`,function(){
    alert(`done!`);
});
尺寸相關、滾動事件

獲取和設定元素的尺寸
width()、height()    獲取元素width和height  
innerWidth()、innerHeight()  包括padding的width和height  
outerWidth()、outerHeight()  包括padding和border的width和height  
outerWidth(true)、outerHeight(true)   包括padding和border以及margin的width和height
獲取元素相對頁面的絕對位置
offset()
獲取瀏覽器可視區寬度高度
$(window).width();
$(window).height();
獲取頁面文件的寬度高度
$(document).width();
$(document).height();
獲取頁面滾動距離
$(document).scrollTop();  
$(document).scrollLeft();
頁面滾動事件
$(window).scroll(function(){  
    ......  
})
jquery屬性操作

html() 取出或設定html內容
// 取出html內容

var $htm = $(`#div1`).html();

// 設定html內容

$(`#div1`).html(`<span>新增文字</span>`);
prop() 取出或設定某個屬性的值
// 取出圖片的地址

var $src = $(`#img1`).prop(`src`);

// 設定圖片的地址和alt屬性

$(`#img1`).prop({src: "test.jpg", alt: "Test Image" });
jquery迴圈

對jquery選擇的物件集合分別進行操作，需要用到jquery迴圈操作，此時可以用物件上的each方法：
$(function(){
    $(`.list li`).each(function(i){
        $(this).html(i);
    })
})
......
<ul class="list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
jquery事件

事件函式列表
blur() 元素失去焦點
focus() 元素獲得焦點
click() 滑鼠單擊
mouseover() 滑鼠進入（進入子元素也觸發）
mouseout() 滑鼠離開（離開子元素也觸發）
mouseenter() 滑鼠進入（進入子元素不觸發）
mouseleave() 滑鼠離開（離開子元素不觸發）
hover() 同時為mouseenter和mouseleave事件指定處理函式
ready() DOM載入完成
resize() 瀏覽器視窗的大小發生改變
scroll() 滾動條的位置發生變化
submit() 使用者遞交表單
繫結事件的其他方式
$(function(){
    $(`#div1`).bind(`mouseover click`, function(event) {
        alert($(this).html());
    });
});
取消繫結事件
$(function(){
    $(`#div1`).bind(`mouseover click`, function(event) {
        alert($(this).html());

        // $(this).unbind();
        $(this).unbind(`mouseover`);

    });
});
事件冒泡

什麼是事件冒泡

在一個物件上觸發某類事件（比如單擊onclick事件），如果此物件定義了此事件的處理程式，那麼此事件就會呼叫這個處理程式，如果沒有定義此事件處理程式或者事件返回true，那麼這個事件會向這個物件的父級物件傳播，從裡到外，直至它被處理（父級物件所有同類事件都將被啟用），或者它到達了物件層次的最頂層，即document物件（有些瀏覽器是window）
事件冒泡的作用

事件冒泡允許多個操作被集中處理（把事件處理器新增到一個父級元素上，避免把事件處理器新增到多個子級元素上），它還可以讓你在物件層的不同級別捕獲事件
阻止事件冒泡

事件冒泡機制有時候是不需要的，需要阻止掉，通過 event.stopPropagation() 來阻止
$(function(){
    var $box1 = $(`.father`);
    var $box2 = $(`.son`);
    var $box3 = $(`.grandson`);
    $box1.click(function() {
        alert(`father`);
    });
    $box2.click(function() {
        alert(`son`);
    });
    $box3.click(function(event) {
        alert(`grandson`);
        event.stopPropagation();

    });
    $(document).click(function(event) {
        alert(`grandfather`);
    });
})

......

<div class="father">
    <div class="son">
        <div class="grandson"></div>
    </div>
</div>
阻止預設行為

阻止表單提交

$(`#form1`).submit(function(event){
    event.preventDefault();
})
合併阻止操作

// event.stopPropagation();
// event.preventDefault();

// 合併寫法：
return false;
事件委託

事件委託就是利用冒泡的原理，把事件加到父級上，通過判斷事件來源的子集，執行相應的操作，事件委託首先可以極大減少事件繫結次數，提高效能；其次可以讓新加入的子元素也可以擁有相同的操作
一般繫結事件的寫法

$(function(){
    $ali = $(`#list li`);
    $ali.click(function() {
        $(this).css({background:`red`});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
事件委託的寫法

$(function(){
    $list = $(`#list`);
    $list.delegate(`li`, `click`, function() {
        $(this).css({background:`red`});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
jquery元素節點操作

建立節點
var $div = $(`<div>`);
var $div2 = $(`<div>這是一個div元素</div>`);
插入節點
append()和appendTo()：在現存元素的內部，從後面插入元素
prepend()和prependTo()：在現存元素的內部，從前面插入元素
after()和insertAfter()：在現存元素的外部，從後面插入元素
before()和insertBefore()：在現存元素的外部，從前面插入元素
刪除節點
var $span = $(`<span>這是一個span元素</span>`);
$(`#div1`).append($span);
......
<div id="div1"></div>

$(`#div1`).remove();
ajax與jsonp

ajax技術的目的是讓javascript傳送http請求，與後臺通訊，獲取資料和資訊。ajax技術的原理是例項化xmlhttp物件，使用此物件與後臺通訊。ajax通訊的過程不會影響後續javascript的執行，從而實現非同步
同步和非同步

現實生活中，同步指的是同時做幾件事情，非同步指的是做完一件事後再做另外一件事，程式中的同步和非同步是把現實生活中的概念對調，也就是程式中的非同步指的是現實生活中的同步，程式中的同步指的是現實生活中的非同步
區域性重新整理和無重新整理

ajax可以實現區域性重新整理，也叫做無重新整理，無重新整理指的是整個頁面不重新整理，只是區域性重新整理，ajax可以自己傳送http請求，不用通過瀏覽器的位址列，所以頁面整體不會重新整理，ajax獲取到後臺資料，更新頁面顯示資料的部分，就做到了頁面區域性重新整理
同源策略

ajax請求的頁面或資源只能是同一個域下面的資源，不能是其他域的資源，這是在設計ajax時基於安全的考慮。特徵報錯提示：
XMLHttpRequest cannot load https://www.baidu.com/. No  
`Access-Control-Allow-Origin` header is present on the requested resource.  
Origin `null` is therefore not allowed access.
$.ajax使用方法

常用引數：
1、url 請求地址
2、type 請求方式，預設是`GET`，常用的還有`POST`
3、dataType 設定返回的資料格式，常用的是`json`格式，也可以設定為`html`
4、data 設定傳送給伺服器的資料
5、success 設定請求成功後的回撥函式
6、error 設定請求失敗後的回撥函式
7、async 設定是否非同步，預設值是`true`，表示非同步 
以前的寫法

$.ajax({
    url: `js/data.json`,
    type: `GET`,
    dataType: `json`,
    data:{`aa`:1}
    success:function(data){
        alert(data.name);
    },
    error:function(){
        alert(`伺服器超時，請重試！`);
    }
});
新的寫法(推薦)

$.ajax({
    url: `js/data.json`,
    type: `GET`,
    dataType: `json`,
    data:{`aa`:1}
})
.done(function(data) {
    alert(data.name);
})
.fail(function() {
    alert(`伺服器超時，請重試！`);
});

// data.json裡面的資料： {"name":"tom","age":18}
jsonp

ajax只能請求同一個域下的資料或資源，有時候需要跨域請求資料，就需要用到jsonp技術，jsonp可以跨域請求資料，它的原理主要是利用了<script>標籤可以跨域連結資源的特性。jsonp和ajax原理完全不一樣，不過jquery將它們封裝成同一個函式
$.ajax({
    url:`js/data.js`,
    type:`get`,
    dataType:`jsonp`,
    jsonpCallback:`fnBack`
})
.done(function(data){
    alert(data.name);
})
.fail(function() {
    alert(`伺服器超時，請重試！`);
});

// data.js裡面的資料： fnBack({"name":"tom","age":18});
獲取360搜尋關鍵詞聯想資料

$(function(){
    $(`#txt01`).keyup(function(){
        var sVal = $(this).val();
        $.ajax({
            url:`https://sug.so.360.cn/suggest?`,
            type:`get`,
            dataType:`jsonp`,
            data: {word: sVal}
        })
        .done(function(data){
            var aData = data.s;
            $(`.list`).empty();
            for(var i=0;i<aData.length;i++)
            {
                var $li = $(`<li>`+ aData[i] +`</li>`);
                $li.appendTo($(`.list`));
            }
        })        
    })
})

//......

<input type="text" name="" id="txt01">
<ul class="list"></ul>
本地儲存

本地儲存分為cookie，以及新增的localStorage和sessionStorage
ookie 儲存在本地，容量最大4k，在同源的http請求時攜帶傳遞，損耗頻寬，可設定訪問路徑，只有此路徑及此路徑的子路徑才能訪問此cookie，在設定的過期時間之前有效
jquery 設定cookie
$.cookie(`mycookie`,`123`,{expires:7,path:`/`});
jquery 獲取cookie
$.cookie(`mycookie`);
ocalStorage 儲存在本地，容量為5M或者更大，不會在請求時候攜帶傳遞，在所有同源視窗中共享，資料一直有效，除非人為刪除，可作為長期資料
//設定：
localStorage.setItem("dat", "456");
localStorage.dat = `456`;

//獲取：
localStorage.getItem("dat");
localStorage.dat

//刪除
localStorage.removeItem("dat");
sessionStorage 儲存在本地，容量為5M或者更大，不會在請求時候攜帶傳遞，在同源的當前視窗關閉前有效
localStorage 和 sessionStorage 合稱為Web Storage , Web Storage支援事件通知機制，可以將資料更新的通知監聽者，Web Storage的api介面使用更方便

iPhone的無痕瀏覽不支援Web Storage，只能用cookie
移動端庫和框架

移動端js事件

1、touchstart: //手指放到螢幕上時觸發
2、touchmove: //手指在螢幕上滑動式觸發
3、touchend: //手指離開螢幕時觸發
4、touchcancel: //系統取消touch事件的時候觸發，比較少用 
移動端一般有三種操作，點選、滑動、拖動，這三種操作一般是組合使用上面的幾個事件來完成的，所有上面的4個事件一般很少單獨使用，一般是封裝使用來實現這三種操作，可以使用封裝成熟的js庫
zepto
swiper
bootstrap
正規表示式

正規表示式的寫法
var re=new RegExp(`規則`, `可選引數`);
var re=/規則/引數; 
規則中的字元
1）普通字元匹配：
如：/a/ 匹配字元 ‘a’，/a,b/ 匹配字元 ‘a,b’

2）轉義字元匹配：
d 匹配一個數字，即0-9
D 匹配一個非數字，即除了0-9
w 匹配一個單詞字元（字母、數字、下劃線）
W 匹配任何非單詞字元。等價於[^A-Za-z0-9_]
s 匹配一個空白符
S 匹配一個非空白符
 匹配單詞邊界
B 匹配非單詞邊界
. 匹配一個任意字元
var sTr01 = `123456asdf`;
var re01 = /d+/;
//匹配純數字字串
var re02 = /^d+$/;
alert(re01.test(sTr01)); //彈出true
alert(re02.test(sTr01)); //彈出false
量詞：對左邊的匹配字元定義個數
? 出現零次或一次（最多出現一次）
+ 出現一次或多次（至少出現一次）
* 出現零次或多次（任意次）
{n} 出現n次
{n,m} 出現n到m次
{n,} 至少出現n次 
任意一個或者範圍
[abc123] : 匹配‘abc123’中的任意一個字元
[a-z0-9] : 匹配a到z或者0到9中的任意一個字元
限制開頭結尾
^ 以緊挨的元素開頭
$ 以緊挨的元素結尾 
修飾引數
g： global，全文搜尋，預設搜尋到第一個結果接停止
i： ingore case，忽略大小寫，預設大小寫敏感
常用函式
1、test
用法：正則.test(字串) 匹配成功，就返回真，否則就返回假

2、replace
用法：字串.replace(正則，新的字串) 匹配成功的字元去替換新的字元 
正則預設規則
匹配成功就結束，不會繼續匹配，區分大小寫
var sTr01 = `abcdefedcbaCef`;
var re01 = /c/;
var re02 = /c/g;
var re03 = /c/gi;

var sTr02 = sTr01.replace(re01,`*`);
var sTr03 = sTr01.replace(re02,`*`);
var sTr04 = sTr01.replace(re03,`*`);
alert(sTr02); // 彈出 ab*defedcbaCef
alert(sTr03); // 彈出 ab*defed*baCef
alert(sTr04); // 彈出 ab*defed*ba*ef
常用正則規則
//使用者名稱驗證：(數字字母或下劃線6到20位)
var reUser = /^w{6,20}$/;

//郵箱驗證：        
var reMail = /^[a-z0-9][w.-]*@[a-z0-9-]+(.[a-z]{2,5}){1,2}$/i;

//密碼驗證：
var rePass = /^[w!@#$%^&*]{6,20}$/;

//手機號碼驗證：
var rePhone = /^1[3458]d{9}$/;
前端效能優化

從使用者訪問資源到資源完整的展現在使用者面前的過程中，通過技術手段和優化策略，縮短每個步驟的處理時間從而提升整個資源的訪問和呈現速度。網站的效能直接會影響到使用者的數量，所有前端效能優化很重要
程式碼部署

1、程式碼的壓縮與合併
2、圖片、js、css等靜態資源使用和主站不同域名地址儲存，從而使得在傳輸資源時不會帶上不必要的cookie資訊。
3、使用內容分發網路 CDN
4、為檔案設定Last-Modified、Expires和Etag
5、使用GZIP壓縮傳送
6、權衡DNS查詢次數(使用不同域名會增加DNS查詢)
7、避免不必要的重定向(加"/") 
編碼

html

1、使用結構清晰，簡單，語義化標籤
2、避免空的src和href
3、不要在HTML中縮放圖片 
css

1、精簡css選擇器
2、把CSS放到頂部
3、避免@import方式引入樣式
4、css中使用base64圖片資料取代圖片檔案，減少請求數，線上轉base64網站：http://tool.css-js.com/base64.html
5、使用css動畫來取代javascript動畫
6、使用字型圖示
7、使用css sprite(雪碧圖)
8、使用svg圖形
9、避免使用CSS表示式 

body{
 background-color: expression( (new Date()).getSeconds()%2 ? "#B8D4FF" : "#F08A00" );  
}
javascript

1、減少引用庫的個數
2、使用requirejs或seajs非同步載入js
3、JS放到頁面底部引入
4、避免全域性查詢
5、使用原生方法
6、用switch語句代替複雜的if else語句
7、減少語句數，比如說多個變數宣告可以寫成一句
8、使用字面量表示式來初始化陣列或者物件
9、使用innerHTML取代複雜的元素注入
10、使用事件代理(事件委託)
11、避免多次訪問dom選擇集
12、高頻觸發事件設定使用函式節流
13、使用Web Storage快取資料 
移動端Web

流式佈局

流式佈局：就是百分比佈局，
非固定畫素，內容向兩側填充，
理解成流動的佈局，稱為流式佈局
視覺視窗

視覺視窗：viewport,是移動端特有。
這是一個虛擬的區域，承載網頁的。
承載關係

承載關係：瀏覽器---->viewport---->網頁
適配要求

網頁寬度必須和瀏覽器保持一致
預設顯示的縮放比例和PC端保持（縮放比例1.0）
不允許使用者自行縮放網頁
滿足這些要求達到了適配，國際上通用的適配方案，標準的移動端適配方案
適配設定

如果任何設定都沒有，預設走的就是viewport的預設設定
去設定新的viewport設定,達到適配要求
<meta name="viewport"> 設定視口的標籤 在head裡面並且應該緊接著編碼設定
viewport的功能
width：可以設定寬度(device-width 當前裝置的寬度)
height：可以設定高度
initial-scale：可以設定預設的縮放比例
user-scalable：可以設定是否允許使用者自行縮放
maximum-scale：可以設定最大縮放比例
minimum-scale：可以設定最小縮放比例
在<meta name="viewport" content="" >  content="" 使用以上引數

- width=device-width   當前裝置寬度

- initial-scale=1.0    寬度一致比例是1.0

- user-scalable=no     不允許使用者自行縮放  （yes，no  1,0）
標準適配方案
<meta name=`viewport` content=`width=device-width,initial-scale=1.0,user-scalable=0`>

　　

HTML

html概述和基本結構

html概述

HTML是 HyperText Mark-up Language 的首字母簡寫
意思是超文字標記語言，
超文字指的是超連結，
標記指的是標籤

html註釋

<!-- 這是一段註釋  -->

html標題標籤

<h1>這是一級標題</h1>
<h2>這是二級標題</h2>
<h3>這是三級標題</h3>

html段落標籤、換行標籤與字元實體

html段落標籤

<p>一個html檔案就是一個網頁，html檔案用編輯器開啟顯示的是文字，可以用文字的方
    式編輯它，如果用瀏覽器開啟，瀏覽器會按照標籤描述內容將檔案渲染成網頁，顯示的網
    頁可以從一個網頁連結跳轉到另外一個網頁。</p>

html換行標籤

插入<br />來強制換行

html字元實體

空格的字元實體：
 
“<”和“>”的字元實體：
&lt; 和 &gt;

html塊標籤、含樣式的標籤

html塊標籤

1、<div> 標籤 塊元素，表示一塊內容，沒有具體的語義。
2、<span> 標籤 行內元素，表示一行中的一小段內容，沒有具體的語義。

含樣式和語義的標籤

1、<em> 標籤 行內元素，表示語氣中的強調詞
2、<i> 標籤 行內元素，表示專業詞彙
3、<b> 標籤 行內元素，表示文件中的關鍵字或者產品名
4、<strong> 標籤 行內元素，表示非常重要的內容 

語義化的標籤

語義化的標籤，就是在佈局的時候多使用有語義的標籤，搜尋引擎在爬網的時候能認識這些標籤，理解文件的結構，方便網站的收錄。比如：h1標籤是表示標題，p標籤是表示段落，ul、li標籤是表示列表，a標籤表示連結，dl、dt、dd表示定義列表等，語義化的標籤不多。

html影像標籤、絕對路徑和相對路徑

html影像標籤

<img>標籤可以在網頁上插入一張圖片，它是獨立使用的標籤，它的常用屬性有：
•src屬性 定義圖片的引用地址
•alt屬性 定義圖片載入失敗時顯示的文字，搜尋引擎會使用這個文字收錄圖片、盲人讀屏軟體會讀取這個文字讓盲人識別圖片，所以此屬性非常重要

<img src="images/pic.jpg" alt="產品圖片" />

絕對路徑和相對路徑

• 絕對地址：相對於磁碟的位置去定位檔案的地址
• 相對地址：相對於引用檔案本身去定位被引用的檔案地址

絕對地址在整體檔案遷移時會因為磁碟和頂層目錄的改變而找不到檔案，
相對路徑就沒有這個問題。

html連結標籤

•href屬性 定義跳轉的地址
•title屬性 定義滑鼠懸停時彈出的提示文字框
•target屬性 定義連結視窗開啟的位置
    ◦target="_self" 預設值，新頁面替換原來的頁面，在原來位置開啟
    ◦target="_blank" 新頁面會在新開的一個瀏覽器視窗開啟

html列表標籤

有序列表

<ol>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ol>

無序列表

<ul>
    <li><a href="#">新聞標題一</a></li>
    <li><a href="#">新聞標題二</a></li>
    <li><a href="#">新聞標題三</a></li>
</ul>

定義列表

<h3>前端三大塊</h3>
<dl>
    <dt>html</dt>
    <dd>負責頁面的結構</dd>

    <dt>css</dt>
    <dd>負責頁面的表現</dd>

    <dt>javascript</dt>
    <dd>負責頁面的行為</dd>

</dl>

html表單

<form>標籤 定義整體的表單區域 
    •action屬性 定義表單資料提交地址 
    •method屬性 定義表單提交的方式，一般有“get”方式和“post”方式 

<label>標籤 為表單元素定義文字標註

<input>標籤 定義通用的表單元素
•type屬性◦type="text" 定義單行文字輸入框
    ◦type="password" 定義密碼輸入框
    ◦type="radio" 定義單選框
    ◦type="checkbox" 定義核取方塊
    ◦type="file" 定義上傳檔案
    ◦type="submit" 定義提交按鈕
    ◦type="reset" 定義重置按鈕
    ◦type="button" 定義一個普通按鈕
    ◦type="image" 定義圖片作為提交按鈕，用src屬性定義圖片地址
    ◦type="hidden" 定義一個隱藏的表單域，用來儲存值

•value屬性 定義表單元素的值
•name屬性 定義表單元素的名稱，此名稱是提交資料時的鍵名 

<textarea>標籤 定義多行文字輸入框

<select>標籤 定義下拉表單元素 

<option>標籤 與<select>標籤配合，定義下拉表單元素中的選項 

登錄檔單例項

<form action="http://www..." method="get">
<p>
<label>姓名：</label><input type="text" name="username" />
</p>
<p>
<label>密碼：</label><input type="password" name="password" />
</p>
<p>
<label>性別：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<p>
<label>愛好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>
<p>
<label>個人描述：</label>
<textarea name="about"></textarea>
</p>
<p>
<label>籍貫：</label>
<select name="site">
    <option value="0">北京</option>
    <option value="1">上海</option>
    <option value="2">廣州</option>
    <option value="3">深圳</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交">
<!-- input型別為submit定義提交按鈕  
     還可以用圖片控制元件代替submit按鈕提交，一般會導致提交兩次，不建議使用。如：
     <input type="image" src="xxx.gif">
-->
<input type="reset" name="" value="重置">
</p>
</form>

html表格

1、<table>標籤：宣告一個表格，它的常用屬性如下：
•border屬性 定義表格的邊框，設定值是數值
•cellpadding屬性 定義單元格內容與邊框的距離，設定值是數值
•cellspacing屬性 定義單元格與單元格之間的距離，設定值是數值
•align屬性 設定整體表格相對於瀏覽器視窗的水平對齊方式,設定值有：left | center | right 

2、<tr>標籤：定義表格中的一行 

3、<td>和<th>標籤：定義一行中的一個單元格，td代表普通單元格，th表示表頭單元格，它們的常用屬性如下：
•align 設定單元格中內容的水平對齊方式,設定值有：left | center | right 
•valign 設定單元格中內容的垂直對齊方式 top | middle | bottom 
•colspan 設定單元格水平合併，設定值是數值 
•rowspan 設定單元格垂直合併，設定值是數值

頁面佈局概述

佈局也可以叫做排版，它指的是把文字和圖片等元素按照我們的意願有機地排列在頁面上，佈局的方式分為兩種：

1、table佈局：通過table元素將頁面空間劃分成若干個單元格，將文字或圖片等元素放入單元格中，隱藏表格的邊框，從而實現佈局。這種佈局方式也叫傳統佈局，目前主要使用在EDM(廣告郵件中的頁面)中，主流的佈局方式不用這種。 

2、HTML+CSS佈局(DIV+CSS)：主要通過CSS樣式設定來佈局文字或圖片等元素，需要用到CSS盒子模型、盒子型別、CSS浮動、CSS定位、CSS背景圖定位等知識來佈局，它比傳統佈局要複雜，目前是主流的佈局方式。

CSS

css基本語法及頁面引用

css基本語法

選擇器 { 屬性:值; 屬性:值; 屬性:值;}

/*
    css註釋 ctrl+shift+"/"
*/


div{ 
    width:100px; 
    height:100px; 
    color:red 
}

css頁面引入方法

1. 外聯式：通過link標籤，連結到外部樣式表到頁面中

<link rel="stylesheet" type="text/css" href="css/main.css">

2. 嵌入式：通過style標籤，在網頁上建立嵌入的樣式表

<style type="text/css">
    div{ width:100px; height:100px; color:red }
    ......
</style>

3. 內聯式：通過標籤的style屬性，在標籤上直接寫樣式

<div style="width:100px; height:100px; color:red ">......</div>

css文字設定

常用的應用文字的css樣式：
•color 設定文字的顏色，如： color:red;
•font-size 設定文字的大小，如：font-size:12px;
•font-family 設定文字的字型，如：font-family:`微軟雅黑`;
•font-style 設定字型是否傾斜，如：font-style:`normal`; 設定不傾斜，font-style:`italic`;設定文字傾斜
•font-weight 設定文字是否加粗，如：font-weight:bold; 設定加粗 font-weight:normal 設定不加粗
•line-height 設定文字的行高，設定行高相當於在每行文字的上下同時加間距， 如：line-height:24px; 行高示例圖片 
•font 同時設定文字的幾個屬性，寫的順序有相容問題，建議按照如下順序寫： font：是否加粗 字號/行高 字型；如： font:normal 12px/36px `微軟雅黑`;
•text-decoration 設定文字的下劃線，如：text-decoration:none; 將文字下劃線去掉
•text-indent 設定文字首行縮排，如：text-indent:24px; 設定文字首行縮排24px 行高示例圖片 
•text-align 設定文字水平對齊方式，如text-align:center 設定文字水平居中

css顏色表示法

css顏色值主要有三種表示方法：

1、顏色名錶示，比如：red 紅色，gold 金色

2、rgb表示，比如：rgb(255,0,0)表示紅色

3、16進位制數值表示，比如：#ff0000 表示紅色，這種可以簡寫成 #f00

css選擇器

標籤選擇器

此種選擇器影響範圍大，建議儘量應用在層級選擇器中

*{margin:0;padding:0}
div{color:red}   


<div>....</div>   <!-- 對應以上兩條樣式 -->
<div class="box">....</div>   <!-- 對應以上兩條樣式 -->

id選擇器

通過id名來選擇元素，元素的id名稱不能重複，所以一個樣式設定項只能對應於頁面上一個元素，不能複用，id名一般給程式使用，所以不推薦使用id作為選擇器

#box{color:red} 

<div id="box">....</div>   <!-- 對應以上一條樣式，其它元素不允許應用此樣式 -->

類選擇器

通過類名來選擇元素，一個類可應用於多個元素，一個元素上也可以使用多個類，應用靈活，可複用，是css中應用最多的一種選擇器

.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px} 

<div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>

層級選擇器

主要應用在選擇父元素下的子元素，或者子元素下面的子元素，可與標籤元素結合使用，減少命名，同時也可以通過層級，防止命名衝突

.box span{color:red}
.box .red{color:pink}
.red{color:red}

<div class="box">
    <span>....</span>
    <a href="#" class="red">....</a>
</div>

<h3 class="red">....</h3>

組選擇器

多個選擇器，如果有同樣的樣式設定，可以使用組選擇器

.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}

<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

偽類及偽元素選擇器

.box1:hover{color:red}
.box2:before{content:`行首文字`;}
.box3:after{content:`行尾文字`;}


<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

CSS盒子模型

把元素叫做盒子，設定對應的樣式分別為：盒子的寬度(width)、盒子的高度(height)、盒子的邊框(border)、盒子內的內容和邊框之間的間距(padding)、盒子與盒子之間的間距(margin)。

 設定寬高  
width:200px;  /* 設定盒子的寬度，此寬度是指盒子內容的寬度，不是盒子整體寬度(難點) */ 
height:200px; /* 設定盒子的高度，此高度是指盒子內容的高度，不是盒子整體高度(難點) */


設定邊框 
設定一邊的邊框，比如頂部邊框，可以按如下設定： 
border-top-color:red;    /* 設定頂部邊框顏色為紅色 */  
border-top-width:10px;   /* 設定頂部邊框粗細為10px */   
border-top-style:solid;  /* 設定頂部邊框的線性為實線，常用的有：solid(實線)  
  dashed(虛線)  dotted(點線); */


上面三句可以簡寫成一句： 
border-top:10px solid red;


設定其它三個邊的方法和上面一樣，把上面的`top`換成`left`就是設定左邊，換成`right`就是設定右邊，換成`bottom`就是設定底邊。

四個邊如果設定一樣，可以將四個邊的設定合併成一句： 
border:10px solid red;


設定內間距padding  

設定盒子四邊的內間距，可設定如下： 
padding-top：20px;     /* 設定頂部內間距20px */ 
padding-left:30px;     /* 設定左邊內間距30px */ 
padding-right:40px;    /* 設定右邊內間距40px */ 
padding-bottom:50px;   /* 設定底部內間距50px */


上面的設定可以簡寫如下： 
padding：20px 40px 50px 30px; /* 四個值按照順時針方向，分別設定的是 上 右 下 左  
四個方向的內邊距值。 */


padding後面還可以跟3個值，2個值和1個值，它們分別設定的專案如下：
padding：20px 40px 50px; /* 設定頂部內邊距為20px，左右內邊距為40px，底部內邊距為50px */ 
padding：20px 40px; /* 設定上下內邊距為20px，左右內邊距為40px*/ 
padding：20px; /* 設定四邊內邊距為20px */


設定外間距margin  

外邊距的設定方法和padding的設定方法相同，將上面設定項中的`padding`換成`margin`就是外邊距設定方法。

盒模型的實際尺寸

盒子的width和height設定的是盒子內容的寬和高，不是盒子本身的寬和高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子的真實尺寸</title>
    <style type="text/css">
        .box01{width:50px;height:50px;background-color:gold;}
        .box02{width:50px;height:50px;background-color:gold;border:50px
         solid #000}
        .box03{width:50px;height:50px;background-color:gold;border:50px
         solid #000;padding: 50px;}
    </style>
</head>
<body>
    <div class="box01">1</div>
    <br />
    <div class="box02">2</div>
    <br />
    <div class="box03">3</div>
</body>
</html>

盒模型使用技巧及相關問題

margin相關技巧

1、設定元素水平居中： margin:x auto;

2、margin負值讓元素位移及邊框合併

外邊距合併

外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者

解決方法如下： 

1、使用這種特性
2、設定一邊的外邊距，一般設定margin-top
3、將元素浮動或者定位 

margin-top 塌陷

在兩個盒子巢狀時候，內部的盒子設定的margin-top會加到外邊的盒子上，導致內部的盒子margin-top設定失敗

解決方法如下：

1、外部盒子設定一個邊框
2、外部盒子設定 overflow:hidden
3、使用偽元素類： 
.clearfix:before{
    content: ``;
    display:table;
}

css元素溢位

當子元素的尺寸超過父元素的尺寸時，需要設定父元素顯示溢位的子元素的方式，設定的方法是通過overflow屬性來設定

overflow的設定項： 
1、visible 預設值。內容不會被修剪，會呈現在元素框之外。
2、hidden 內容會被修剪，並且其餘內容是不可見的，此屬性還有清除浮動、清除margin-top塌陷的功能。
3、scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容。
4、auto 如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容。
5、inherit 規定應該從父元素繼承 overflow 屬性的值。

塊元素、內聯元素、內聯塊元素

元素就是標籤，佈局中常用的有三種標籤，塊元素、內聯元素、內聯塊元素，瞭解這三種元素的特性，才能熟練的進行頁面佈局。

 塊元素 
塊元素，也可以稱為行元素，佈局中常用的標籤如：div、p、ul、li、h1~h6、dl、dt、dd等等都是塊元素，它在佈局中的行為：
•支援全部的樣式
•如果沒有設定寬度，預設的寬度為父級寬度100%
•盒子佔據一行、即使設定了寬度

內聯元素
內聯元素，也可以稱為行內元素，佈局中常用的標籤如：a、span、em、b、strong、i等等都是內聯元素，它們在佈局中的行為：
•支援部分樣式（不支援寬、高、margin上下、padding上下）
•寬高由內容決定
•盒子並在一行
•程式碼換行，盒子之間會產生間距
•子元素是內聯元素，父元素可以用text-align屬性設定子元素水平對齊方式

 解決內聯元素間隙的方法 
1、去掉內聯元素之間的換行
2、將內聯元素的父級設定font-size為0，內聯元素自身再設定font-size

內聯塊元素
內聯塊元素，也叫行內塊元素，是新增的元素型別，現有元素沒有歸於此類別的，img和input元素的行為類似這種元素，但是也歸類於內聯元素，我們可以用display屬性將塊元素或者內聯元素轉化成這種元素。它們在佈局中表現的行為：
•支援全部樣式
•如果沒有設定寬高，寬高由內容決定
•盒子並在一行
•程式碼換行，盒子會產生間距
•子元素是內聯塊元素，父元素可以用text-align屬性設定子元素水平對齊方式。

這三種元素，可以通過display屬性來相互轉化，不過實際開發中，塊元素用得比較多，所以我們經常把內聯元素轉化為塊元素，少量轉化為內聯塊，而要使用內聯元素時，直接使用內聯元素，而不用塊元素轉化了。

display屬性
display屬性是用來設定元素的型別及隱藏的，常用的屬性有：
1、none 元素隱藏且不佔位置
2、block 元素以塊元素顯示
3、inline 元素以內聯元素顯示
4、inline-block 元素以內聯塊元素顯示 

浮動

浮動特性

1、浮動元素有左浮動(float:left)和右浮動(float:right)兩種 

2、浮動的元素會向左或向右浮動，碰到父元素邊界、其他元素才停下來 

3、相鄰浮動的塊元素可以並在一行，超出父級寬度就換行 

4、浮動讓行內元素或塊元素自動轉化為行內塊元素(此時不會有行內塊元素間隙問題) 

5、浮動元素後面沒有浮動的元素會佔據浮動元素的位置，沒有浮動的元素內的文字會避開浮動的元素，形成文字饒圖的效果 

6、父元素如果沒有設定尺寸(一般是高度不設定)，父元素內整體浮動的元素無法撐開父元素，父元素需要清除浮動 

7、浮動元素之間沒有垂直margin的合併 

清除浮動

• 父級上增加屬性overflow：hidden
• 在最後一個子元素的後面加一個空的div，給它樣式屬性 clear:both（不推薦）
• 使用成熟的清浮動樣式類，clearfix

.clearfix:after,.clearfix:before{ content: "";display: table;}
.clearfix:after{ clear:both;}
.clearfix{zoom:1;}

清除浮動的使用方法

.con2{... overflow:hidden}
或者
<div class="con2 clearfix">

定位

文件流

文件流，是指盒子按照html標籤編寫的順序依次從上到下，從左到右排列，塊元素佔一行，行內元素在一行之內從左到右排列，先寫的先排列，後寫的排在後面，每個盒子都佔據自己的位置

關於定位

使用css的position屬性來設定元素的定位型別，postion的設定項如下： 
•relative 生成相對定位元素，元素所佔據的文件流的位置保留，元素本身相對自身原位置進行偏移。 
•absolute 生成絕對定位元素，元素脫離文件流，不佔據文件流的位置，可以理解為漂浮在文件流的上方，相對於上一個設定了定位的父級元素來進行定位，如果找不到，則相對於body元素進行定位。 
•fixed 生成固定定位元素，元素脫離文件流，不佔據文件流的位置，可以理解為漂浮在文件流的上方，相對於瀏覽器視窗進行定位。 
•static 預設值，沒有定位，元素出現在正常的文件流中，相當於取消定位屬性或者不設定定位屬性。 
•inherit 從父元素繼承 position 屬性的值。

定位元素的偏移

定位的元素還需要用left、right、top或者bottom來設定相對於參照元素的偏移值

定位元素層級

定位元素是浮動的正常的文件流之上的，可以用z-index屬性來設定元素的層級

.box01{
    ......
    position:absolute;  /* 設定了絕對定位 */
    left:200px;            /* 相對於參照元素左邊向右偏移200px */
    top:100px;          /* 相對於參照元素頂部向下偏移100px */
    z-index:10          /* 將元素層級設定為10 */
}

定位元素特性

絕對定位和固定定位的塊元素和行內元素會自動轉化為行內塊元素

前端女俠-部落格園

background屬性

屬性解釋

background屬性是css中應用比較多，且比較重要的一個屬性，它是負責給盒子設定背景圖片和背景顏色的，background是一個複合屬性，它可以分解成如下幾個設定項： 
•background-color 設定背景顏色
•background-image 設定背景圖片地址
•background-repeat 設定背景圖片如何重複平鋪
•background-position 設定背景圖片的位置
•background-attachment 設定背景圖片是固定還是隨著頁面滾動條滾動

實際應用中，我們可以用background屬性將上面所有的設定項放在一起，而且也建議這麼做，這樣做效能更高，而且相容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，這裡面的“#00ff00”是設定background-color；“url(bgimage.gif)”是設定background-image；“no-repeat”是設定background-repeat；“left center”是設定background-position；“fixed”是設定background-attachment，各個設定項用空格隔開，有的設定項不寫也是可以的，它會使用預設值。

HTML5與CSS3

CSS權重

CSS權重

CSS權重指的是樣式的優先順序，有兩條或多條樣式作用於一個元素，權重高的那條樣式對元素起作用,權重相同的，後寫的樣式會覆蓋前面寫的樣式

權重的等級

可以把樣式的應用方式分為幾個等級，按照等級來計算權重

1、!important，加在樣式屬性值後，權重值為 10000
2、內聯樣式，如：style=””，權重值為1000
3、ID選擇器，如：#content，權重值為100
4、類，偽類和屬性選擇器，如： content、:hover 權重值為10
5、標籤選擇器和偽元素選擇器，如：div、p、:before 權重值為1
6、通用選擇器（*）、子選擇器（>）、相鄰選擇器（+）、同胞選擇器（~）、權重值為0 

權重的計算例項

例項一：

<style type="text/css">
    div{
        color:red !important;
    }        
</style>
......
<div style="color:blue">這是一個div元素</div>
<!-- 
兩條樣式同時作用一個div，上面的樣式權重值為10000+1，下面的行間樣式的權重值為1000，
所以文字的最終顏色為red 
-->

例項二：

<style type="text/css">
    #content div.main_content h2{
        color:red;    
    }
    #content .main_content h2{
        color:blue;
    }
</style>
......
<div id="content">
    <div class="main_content">
        <h2>這是一個h2標題</h2>
    </div>
</div>
<!-- 
第一條樣式的權重計算： 100+1+10+1，結果為112；
第二條樣式的權重計算： 100+10+1，結果為111；
h2標題的最終顏色為red
-->

CSS3新增選擇器

元素選擇器

• E:nth-child(n)：匹配元素型別為E且是父元素的第n個子元素
• E:first-child：匹配元素型別為E且是父元素的第一個子元素
• E:last-child：匹配元素型別為E且是父元素的最後一個子元素
• E > F E元素下面第一層子集
• E ~ F E元素後面的兄弟元素
• E + F 緊挨著的後面的兄弟元素

<style type="text/css">            
    .list div:nth-child(2){
        background-color:red;
    }
</style>
......
<div class="list">
    <h2>1</h2>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

<!-- 第2個子元素div匹配 -->

屬性選擇器

• E[attr] 含有attr屬性的元素
• E[attr=`ok`] 含有attr屬性的元素且它的值為“ok”
• E[attr^=`ok`] 含有attr屬性的元素且它的值的開頭含有“ok”
• E[attr$=`ok`] 含有attr屬性的元素且它的值的結尾含有“ok”
• E[attr*=`ok`] 含有attr屬性的元素且它的值中含有“ok”

<style type="text/css">
    div[data-attr=`ok`]{
        color:red;
    }
</style>
......
<div data-attr="ok">這是一個div元素</div>

CSS3圓角、rgba

CSS3圓角

設定某一個角的圓角，比如設定左上角的圓角：
border-top-left-radius:30px 60px;

同時分別設定四個角： border-radius:30px 60px 120px 150px;

設定四個圓角相同：
border-radius:50%;

rgba（新的顏色值表示法）

• 盒子透明度表示法
• rgba(0,0,0,0.1) 前三個數值表示顏色，第四個數值表示顏色的透明度

.box
    {
        opacity:0.1;
        /* 相容IE */
        filter:alpha(opacity=10); 
    }

CSS3 transition動畫

1、transition-property 設定過渡的屬性，比如：width height background-color
2、transition-duration 設定過渡的時間，比如：1s 500ms
3、transition-timing-function 設定過渡的運動方式，常用有 linear(勻速)|ease(緩衝運動)
4、transition-delay 設定動畫的延遲
5、transition: property duration timing-function delay 同時設定四個屬性

CSS3 transform變換

1、translate(x,y) 設定盒子位移
2、scale(x,y) 設定盒子縮放
3、rotate(deg) 設定盒子旋轉
4、skew(x-angle,y-angle) 設定盒子斜切
5、perspective 設定透視距離
6、transform-style flat | preserve-3d 設定盒子是否按3d空間顯示
7、translateX、translateY、translateZ 設定三維移動
8、rotateX、rotateY、rotateZ 設定三維旋轉
9、scaleX、scaleY、scaleZ 設定三維縮放
10、tranform-origin 設定變形的中心點
11、backface-visibility 設定盒子背面是否可見

CSS3 animation動畫

1、@keyframes 定義關鍵幀動畫
2、animation-name 動畫名稱
3、animation-duration 動畫時間
4、animation-timing-function 動畫曲線 linear(勻速)|ease(緩衝)|steps(步數)
5、animation-delay 動畫延遲
6、animation-iteration-count 動畫播放次數 n|infinite
7、animation-direction 動畫結束後是否反向還原 normal|alternate
8、animation-play-state 動畫狀態 paused(停止)|running(運動)
9、animation-fill-mode 動畫前後的狀態 none(預設)|forwards(結束時停留在最後一幀)|backwards(開始時停留在定義的開始幀)|both(前後都應用)
10、animation:name duration timing-function delay iteration-count direction;同時設定多個屬性

CSS3 瀏覽器字首

瀏覽器樣式字首

為了讓CSS3樣式相容，需要將某些樣式加上瀏覽器字首

• -ms- 相容IE瀏覽器
• -moz- 相容firefox
• -o- 相容opera
• -webkit- 相容chrome 和 safari

div
{    
    -ms-transform: rotate(30deg);        
    -webkit-transform: rotate(30deg);    
    -o-transform: rotate(30deg);        
    -moz-transform: rotate(30deg);    
    transform: rotate(30deg);
}

自動新增瀏覽器字首

目前的狀況是，有些CSS3屬性需要加字首，有些不需要加，有些只需要加一部分，這些加字首的工作可以交給外掛來完成，比如安裝： autoprefixer

可以在Sublime text中通過package control 安裝 autoprefixer

Autoprefixer在Sublime text中的設定

1. preferences/key Bindings-User

{ "keys": ["ctrl+alt+x"], "command": "autoprefixer" }

2. Preferences>package setting>AutoPrefixer>Setting-User

{
    "browsers": ["last 7 versions"],
    "cascade": true,
    "remove": true
}

• last 7 versions：最新的瀏覽器的7個版本
• cascade：縮排美化屬性值
• remove：是否去掉不必要的字首

HTML5新增標籤

新增語義標籤

1、<header> 頁面頭部、頁首
2、<nav> 頁面導航
3、<article> 一篇文章
4、<section> 文章中的章節
5、<aside> 側邊欄
6、<footer> 頁面底部、頁尾

音訊視訊

1、<audio>
2、<video>

PC端相容h5的新標籤的方法，在頁面中引入以下js檔案:
<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script>

HTML5 新增表單控制元件

新增型別：網址 郵箱 日期 時間 星期 數量 範圍 電話 顏色 搜尋

<label>網址:</label><input type="url" name="" required><br><br> 
<label>郵箱:</label><input type="email" name="" required><br><br> 
<label>日期:</label><input type="date" name=""><br><br> 
<label>時間:</label><input type="time" name=""><br><br> 
<label>星期:</label><input type="week" name=""><br><br> 
<label>數量:</label><input type="number" name=""> <br><br>
<label>範圍:</label><input type="range" name=""><br><br> 
<label>電話:</label><input type="tel" name=""><br><br> 
<label>顏色:</label><input type="color" name=""><br><br> 
<label>搜尋:</label><input type="search" name=""><br><br>

新增常用表單控制元件屬性：
1、placeholder 設定文字框預設提示文字
2、autofocus 自動獲得焦點
3、autocomplete 聯想關鍵詞 

常用css列表

    color 設定文字的顏色，如： color:red;

    font-size 設定文字的大小，如：font-size:12px;

    font-family 設定文字的字型，如：font-family:`微軟雅黑`;

    font-style 設定字型是否傾斜，如：font-style:`normal`; 設定不傾斜，font-style:`italic`;設定文字傾斜

    font-weight 設定文字是否加粗，如：font-weight:bold; 設定加粗 font-weight:normal 設定不加粗

    line-height 設定文字的行高，設定行高相當於在每行文字的上下同時加間距， 如：line-height:24px;

    font 同時設定文字的幾個屬性，寫的順序有相容問題，建議按照如下順序寫： font：是否加粗 字號/行高 字型；如： font:normal 12px/36px `微軟雅黑`;

    text-decoration 設定文字的下劃線，如：text-decoration:none; 將文字下劃線去掉

    text-indent 設定文字首行縮排，如：text-indent:24px; 設定文字首行縮排24px

    text-align 設定文字水平對齊方式，如text-align:center 設定文字水平居中

    text-overflow 設定一行文字寬度超過容器寬度時的顯示方式，如：text-overflow:clip 將多出的文字裁剪掉 text-overflow:ellipsis 將多出的文字顯示成省略號

    white-space 一般用來設定文字不換行，如：white-space:nowrap 設定文字不換行 一般與text-overflow和overflow屬性配合使用來讓一行文字超出寬度時顯示省略號

    list-style 一般用來設定去掉ul或者ol列表中的小圓點或數字 如：list-style:none

    width 設定盒子內容的寬度，如： width：100px;

    height 設定盒子內容的高度，如： height：100px;

    border-top 設定盒子頂部邊框的三個屬性 如：border-top:5px solid red;設定盒子頂部邊框為3畫素寬的紅色的實線，詳細設定說明：盒子模型

    border-left 設定盒子左邊邊框的三個屬性 如：border-left:3px dotted red;設定盒子左邊邊框為3畫素寬的紅色的點線，詳細設定說明：盒子模型

    border-right 設定盒子右邊邊框的三個屬性 如：border-right:2px dashed red;設定盒子右邊框為2畫素寬的紅色的虛線，詳細設定說明：盒子模型

    border-bottom 設定盒子底部邊框的三個屬性 如：border-bottom:1px solid red;設定盒子底部邊框為1畫素寬的紅色的實線，詳細設定說明：盒子模型

    border 同時設定盒子的四個邊框，如果四個邊的樣式統一就使用它 如：border:1px solid #000 設定盒子四個邊都是1畫素寬的黑色實線，詳細設定說明：盒子模型

    padding 設定盒子四個邊的內邊距 如：padding:10px 20px 30px 40px 分別設定盒子上邊(10px)、右邊(20px)、下邊(30px)、左邊(40px)的內邊距(順時針)，詳細設定說明：盒子模型

    margin 設定盒子四個邊的外邊距 如：margin:10px 20px 30px 40px 分別設定盒子上邊(10px)、右邊(20px)、下邊(30px)、左邊(40px)的外邊距(順時針)，詳細設定說明：盒子模型

    overflow 設定當子元素的尺寸超過父元素的尺寸時，盒子及子元素的顯示方式 如：overflow:hidden 超出的子元素被裁切，詳細設定說明：元素溢位

    display 設定盒子的顯示型別及隱藏，如：display:block 將盒子設定為以塊元素顯示 display:none 將元素隱藏，詳細設定說明：元素型別

    float 設定元浮動 如：float:left 設定左浮動 float:right 設定右浮動，詳細設定說明：元素浮動

    clear 在盒子兩側清除浮動 如：clear:both 在盒子兩側都不允許浮動，詳細設定說明：元素浮動

    position 設定元素定位 如：position:relative 設定元素相對定位，詳細設定說明：元素定位

    background 設定元素的背景色和背景圖片，如：background:url(bg.jpg) cyan;設定盒子的背景圖片為bg.jpg，背景色為cyan，詳細設定說明：元素背景

    background-size 設定盒子背景圖的尺寸，如：background-size:30px 40px;設定背景圖的尺寸寬為30px，高為40px，這個屬性不能合到background屬性中，詳細設定說明：retina屏適配

    opacity 設定元素整體透明度，一般為了相容需要加上filter屬性設定 如：opacity:0.1;filter:alpha(opacity=10)

    cursor 設定滑鼠懸停在元素上時指標的形狀 如：cursor:pointer 設定為手型

    outline 設定文字輸入框周圍凸顯的藍色的線，一般是設為沒有 如：outline:none

    border-radius 設定盒子的圓角 如：border-radius:10px 設定盒子的四個角為10px半徑的圓角，詳細設定說明：css圓角

    box-shadow 設定盒子的陰影，如：box-shadow:10px 10px 5px 2px pink;設定盒子有粉色的陰影，詳細設定說明：css陰影

    transition 設定盒子的過渡動畫，如：transition:all 1s ease;設定元素過渡動畫為1秒完成，所有變動的屬性都做動畫，詳細設定說明：過渡動畫

    animation 設定盒子的關鍵幀動畫，詳細設定說明：關鍵幀動畫

    transform 設定盒子的位移、旋轉、縮放、斜切等變形，如：transform:rotate(45deg);設定盒子旋轉45度，詳細設定說明：元素變形

    box-sizing 設定盒子的尺寸計算方式，如：box-sizing:border-box 將盒子的尺寸計算方法設定為按邊框計算，此時width和height的值就是盒子的實際尺寸

    border-collapse 設定表格邊框是否合併，如：border-collapse:collapse，將表格邊框合併，這樣就可以製作1px邊框的表格。

JavaScript

JavaScript介紹

前端三大塊
1、HTML：頁面結構
2、CSS：頁面表現：元素大小、顏色、位置、隱藏或顯示、部分動畫效果
3、JavaScript：頁面行為：部分動畫效果、頁面與使用者的互動、頁面功能 

JavaScript嵌入頁面的方式

行間事件（主要用於事件）

<input type="button" name="" onclick="alert(`ok！`);">

頁面script標籤嵌入

<script type="text/javascript">        
    alert(`ok！`);
</script>

外部引入

<script type="text/javascript" src="js/index.js"></script>

變數

JavaScript 是一種弱型別語言，javascript的變數型別由它的值來決定。 定義變數需要用關鍵字 `var`

變數型別

5種基本資料型別：
1、number 數字型別
2、string 字串型別
3、boolean 布林型別 true 或 false
4、undefined undefined型別，變數宣告未初始化，它的值就是undefined
5、null null型別，表示空物件，如果定義的變數將來準備儲存物件，可以將變數初始化為null,在頁面上獲取不到物件，返回的值就是null
1種複合型別：
object

javascript註釋

<script type="text/javascript">    

// 單行註釋
var iNum = 123;
/*  
    多行註釋
    1、...
    2、...
*/
var sTr = `abc123`;
</script>

變數、函式、屬性、函式引數命名規範

1、區分大小寫
2、第一個字元必須是字母、下劃線（_）或者美元符號（$）
3、其他字元可以是字母、下劃線、美元符或數字

獲取元素方法一

可以使用內建物件document上的getElementById方法來獲取頁面上設定了id屬性的元素，獲取到的是一個html物件，然後將它賦值給一個變數，比如：
<script type="text/javascript">
    var oDiv = document.getElementById(`div1`);
</script>
....
<div id="div1">這是一個div元素</div>
上面的語句，如果把javascript寫在元素的上面，就會出錯，因為頁面上從上往下載入執行的，javascript去頁面上獲取元素div1的時候，元素div1還沒有載入，解決方法有兩種：
第一種方法：將javascript放到頁面最下邊
....
<div id="div1">這是一個div元素</div>
....

<script type="text/javascript">
    var oDiv = document.getElementById(`div1`);
</script>
</body>

第二種方法：將javascript語句放到window.onload觸發的函式裡面,獲取元素的語句會在頁面載入完後才執行，就不會出錯了
<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById(`div1`);
    }
</script>

....

<div id="div1">這是一個div元素</div>

操作元素屬性

獲取的頁面元素，就可以對頁面元素的屬性進行操作，屬性的操作包括屬性的讀和寫

操作屬性的方法

1、“.” 操作
2、“[ ]”操作

屬性寫法

1、html的屬性和js裡面屬性寫法一樣
2、“class” 屬性寫成 “className”
3、“style” 屬性裡面的屬性，有橫槓的改成駝峰式，比如：“font-size”，改成”style.fontSize”

通過“.”操作屬性：
<script type="text/javascript">

    window.onload = function(){
        var oInput = document.getElementById(`input1`);
        var oA = document.getElementById(`link1`);
        // 讀取屬性值
        var sValue = oInput.value;
        var sType = oInput.type;
        var sName = oInput.name;
        var sLinks = oA.href;
        // 寫(設定)屬性
        oA.style.color = `red`;
        oA.style.fontSize = sValue;
    }

</script>

......

<input type="text" name="setsize" id="input1" value="20px">
<a href="http://www.itcast.cn" id="link1">傳智播客</a>

通過“[ ]”操作屬性：
<script type="text/javascript">

    window.onload = function(){
        var oInput1 = document.getElementById(`input1`);
        var oInput2 = document.getElementById(`input2`);
        var oA = document.getElementById(`link1`);
        // 讀取屬性
        var sVal1 = oInput1.value;
        var sVal2 = oInput2.value;
        // 寫(設定)屬性
        // oA.style.val1 = val2; 沒反應
        oA.style[sVal1] = sVal2;        
    }

</script>

......

<input type="text" name="setattr" id="input1" value="fontSize">
<input type="text" name="setnum" id="input2" value="30px">
<a href="http://www.itcast.cn" id="link1">傳智播客</a>

innerHTML

innerHTML可以讀取或者寫入標籤包裹的內容

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById(`div1`);
        //讀取
        var sTxt = oDiv.innerHTML;
        alert(sTxt);
        //寫入
        oDiv.innerHTML = `<a href="http://www.itcast.cn">傳智播客<a/>`;
    }
</script>

......

<div id="div1">這是一個div元素</div>

函式

變數與函式預解析

JavaScript解析過程分為兩個階段，先是編譯階段，然後執行階段，在編譯階段會將function定義的函式提前，並且將var定義的變數宣告提前，將它賦值為undefined

<script type="text/javascript">    
    fnAlert();       // 彈出 hello！
    alert(iNum);  // 彈出 undefined
    function fnAlert(){
        alert(`hello!`);
    }
    var iNum = 123;
</script>

提取行間事件

在html行間呼叫的事件可以提取到javascript中呼叫，從而做到結構與行為分離

<!--行間事件呼叫函式   -->
<script type="text/javascript">        
    function fnAlert(){
        alert(`ok!`);
    }
</script>
......
<input type="button" name="" value="彈出" onclick="fnAlert()">

<!-- 提取行間事件 -->
<script type="text/javascript">

window.onload = function(){
    var oBtn = document.getElementById(`btn1`);
    oBtn.onclick = fnAlert;
    function fnAlert(){
        alert(`ok!`);
    }
}    
</script>
......
<input type="button" name="" value="彈出" id="btn1">

匿名函式

定義的函式可以不給名稱，這個叫做匿名函式，可以將匿名函式直接賦值給元素繫結的事件來完成匿名函式的呼叫

<script type="text/javascript">

window.onload = function(){
    var oBtn = document.getElementById(`btn1`);
    /*
    oBtn.onclick = myalert;
    function myalert(){
        alert(`ok!`);
    }
    */
    // 直接將匿名函式賦值給繫結的事件

    oBtn.onclick = function (){
        alert(`ok!`);
    }
}

</script>

條件語句

switch語句

多重if else語句可以換成效能更高的switch語句

var iNow = 1;

switch (iNow){
    case 1:
        ...;
        break;
    case 2:
        ...;
        break;    
    default:
        ...;
}

陣列及操作方法

陣列就是一組資料的集合，javascript中，陣列裡面的資料可以是不同型別的

定義陣列的方法

//物件的例項建立
var aList = new Array(1,2,3);

//直接量建立
var aList2 = [1,2,3,`asd`];

運算元組中資料的方法

• 獲取陣列的長度：aList.length

var aList = [1,2,3,4];
alert(aList.length); // 彈出4

• 用下標運算元組的某個資料：aList[0]

var aList = [1,2,3,4];
alert(aList[0]); // 彈出1

• join() 將陣列成員通過一個分隔符合併成字串

var aList = [1,2,3,4];
alert(aList.join(`-`)); // 彈出 1-2-3-4

• push() 和 pop() 從陣列最後增加成員或刪除成員

var aList = [1,2,3,4];
aList.unshift(5);
alert(aList); //彈出5,1,2,3,4
aList.shift();
alert(aList); // 彈出1,2,3,4

• unshift()和 shift() 從陣列前面增加成員或刪除成員

var aList = [1,2,3,4];
aList.unshift(5);
alert(aList); //彈出5,1,2,3,4
aList.shift();
alert(aList); // 彈出1,2,3,4

• reverse() 將陣列反轉

var aList = [1,2,3,4];
aList.reverse();
alert(aList);  // 彈出4,3,2,1

• indexOf() 返回陣列中元素第一次出現時的索引值

var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(1));

• splice() 在陣列中增加或刪除成員

var aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //從第2個元素開始，刪除1個元素，然後在此位置增加`7,8,9`三個元素
alert(aList); //彈出 1,2,7,8,9,4

迴圈語句

陣列去重

var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];

var aList2 = [];

for(var i=0;i<aList.length;i++)
{
    if(aList.indexOf(aList[i])==i)
    {
        aList2.push(aList[i]);
    }
}

alert(aList2);

獲取元素方法二

可以使用內建物件document上的getElementsByTagName方法來獲取頁面上的某一種標籤，獲取的是一個選擇集，不是陣列，但是可以用下標的方式操作選擇集裡面的標籤元素

<script type="text/javascript">
    window.onload = function(){
        var aLi = document.getElementsByTagName(`li`);
        // aLi.style.backgroundColor = `gold`; // 出錯！不能同時設定多個li
        alert(aLi.length);
        aLi[0].style.backgroundColor = `gold`;
    }
</script>
....
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

Javascript組成

1、ECMAscript javascript的語法（變數、函式、迴圈語句等語法）
2、DOM 文件物件模型 操作html和css的方法
3、BOM 瀏覽器物件模型 操作瀏覽器的一些方法 

字串處理方法

• 字串合併操作：“ + ”

var iNum01 = 12;
var iNum02 = 24;
var sNum03 = `12`;
var sTr = `abc`;
alert(iNum01+iNum02);  //彈出36
alert(iNum01+sNum03);  //彈出1212 數字和字串相加等同於字串相加
alert(sNum03+sTr);     // 彈出12abc

• parseInt() 將數字字串轉化為整數

var sNum01 = `12`;
var sNum02 = `24`;
var sNum03 = `12.32`;
alert(sNum01+sNum02);  //彈出1224
alert(parseInt(sNum01)+parseInt(sNum02))  //彈出36
alert(sNum03)   //彈出數字12 將字串小數轉化為數字整數

• parseFloat() 將數字字串轉化為小數

var sNum03 = `12.32`
alert(parseFloat(sNum03));  //彈出 12.32 將字串小數轉化為數字小數

• split() 把一個字串分隔成字串組成的陣列

var sTr = `2017-4-22`;
var aRr = sTr.split("-");
var aRr2= sTr.split("");

alert(aRr);  //彈出[`2017`,`4`,`2`]
alert(aRr2);  //彈出[`2`,`0`,`1`,`7`,`-`,`4`,`-`,`2`,`2`]

• charAt() 獲取字串中的某一個字元

var sId = "#div1";
var sTr = sId.charAt(0);
alert(sTr); //彈出 #

• indexOf() 查詢字串是否含有某字元

var sTr = "abcdefgh";
var iNum = sTr.indexOf("c");
alert(iNum); //彈出2

• substring() 擷取字串 用法： substring(start,end)（不包括end）

var sTr = "abcdefghijkl";
var sTr2 = sTr.substring(3,5);
var sTr3 = sTr.substring(1);

alert(sTr2); //彈出 de
alert(sTr3); //彈出 bcdefghijkl

• toUpperCase() 字串轉大寫

var sTr = "abcdef";
var sTr2 = sTr.toUpperCase();
alert(sTr2); //彈出ABCDEF

• toLowerCase() 字串轉小寫

var sTr = "ABCDEF";
var sTr2 = sTr.toLowerCase();
alert(sTr2); //彈出abcdef

• 字串反轉

var str = `asdfj12jlsdkf098`;
var str2 = str.split(``).reverse().join(``);

alert(str2);

型別轉換

直接轉換 parseInt() 與 parseFloat()

alert(`12`+7); //彈出127
alert( parseInt(`12`) + 7 );  //彈出19 
alert( parseInt(5.6));  // 彈出5
alert(`5.6`+2.3);  // 彈出5.62.3
alert(parseFloat(`5.6`)+2.3);  // 彈出7.8999999999999995
alert(0.1+0.2); //彈出 0.3000000000000004
alert((0.1*100+0.2*100)/100); //彈出0.3
alert((parseFloat(`5.6`)*100+2.3*100)/100); //彈出7.9

隱式轉換 “==” 和 “-”

if(`3`==3)
{
    alert(`相等`);
}

// 彈出`相等`
alert(`10`-3);  // 彈出7

NaN 和 isNaN

alert( parseInt(`123abc`) );  // 彈出123
alert( parseInt(`abc123`) );  // 彈出NaN

除錯程式的方法

1、alert

2、console.log

3、document.title 

定時器

定時器在javascript中的作用

1、製作動畫
2、非同步操作
3、函式緩衝與節流

/*
    定時器：
    setTimeout  只執行一次的定時器 
    clearTimeout 關閉只執行一次的定時器
    setInterval  反覆執行的定時器
    clearInterval 關閉反覆執行的定時器

*/

var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
    alert(`ok!`);
}

封閉函式

封閉函式是javascript中匿名函式的另外一種寫法，建立一個一開始就執行而不用命名的函式

(function myalert(){
    alert(`hello!`);
})();

在函式定義前加上“~”和“!”等符號來定義匿名函式

!function myalert(){
    alert(`hello!`);
}()

封閉函式的好處

封閉函式可以創造一個獨立的空間，在封閉函式內定義的變數和函式不會影響外部同名的函式和變數，可以避免命名衝突，在頁面上引入多個js檔案時，用這種方式新增js檔案比較安全，比如：

var iNum01 = 12;
function myalert(){
    alert(`hello!`);
}
(function(){
    var iNum01 = 24;
    function myalert(){
        alert(`hello!world`);
    }
    alert(iNum01);
    myalert()
})()
alert(iNum01);
myalert();

常用內建物件

• document

document.getElementById //通過id獲取元素
document.getElementsByTagName //通過標籤名獲取元素
document.referrer  //獲取上一個跳轉頁面的地址(需要伺服器環境)

• location

window.location.href  //獲取或者重定url地址
window.location.search //獲取地址引數部分
window.location.hash //獲取頁面錨點或者叫雜湊值

• Math

Math.random 獲取0-1的隨機數
Math.floor 向下取整
Math.ceil 向上取整

原型繼承

• JavaScript的原型繼承實現方式就是：
  • 定義新的建構函式，並在內部用call()呼叫希望“繼承”的建構函式，並繫結this；
  • 藉助中間函式F實現原型鏈繼承，最好通過封裝的inherits函式完成；
  • 繼續在新的建構函式的原型上定義新方法。

廖雪峰-原型繼承

JQuery

jquery

jquery是一個函式庫，一個js檔案，頁面用script標籤引入這個js檔案就可以使用

<script type="text/javascript" src="js/jquery-1.12.2.js"></script>

jquery選擇器

jquery選擇器

jquery選擇器可以快速地選擇元素，選擇規則和css樣式相同，使用length屬性判斷是否選擇成功

$(`#myId`) //選擇id為myId的網頁元素
$(`.myClass`) // 選擇class為myClass的元素
$(`li`) //選擇所有的li元素
$(`#ul1 li span`) //選擇id為為ul1元素下的所有li下的span元素
$(`input[name=first]`) // 選擇name屬性等於first的input元素

對選擇集進行過濾

$(`div`).has(`p`); // 選擇包含p元素的div元素
$(`div`).not(`.myClass`); //選擇class不等於myClass的div元素
$(`div`).filter(`.myClass`); //選擇class等於myClass的div元素
$(`div`).eq(5); //選擇第6個div元素

選擇集轉移

$(`div`).prev(); //選擇div元素前面緊挨的同輩元素
$(`div`).prevAll(); //選擇div元素之前所有的同輩元素
$(`div`).next(); //選擇div元素後面緊挨的同輩元素
$(`div`).nextAll(); //選擇div元素後面所有的同輩元素
$(`div`).parent(); //選擇div的父元素
$(`div`).children(); //選擇div的所有子元素
$(`div`).siblings(); //選擇div的同級元素
$(`div`).find(`.myClass`); //選擇div內的class等於myClass的元素

判斷是否選擇到了元素

jquery有容錯機制，即使沒有找到元素，也不會出錯，可以用length屬性來判斷是否找到了元素,length等於0，就是沒選擇到元素，length大於0，就是選擇到了元素

var $div1 = $(`#div1`);
var $div2 = $(`#div2`);
alert($div1.length); // 彈出1
alert($div2.length); // 彈出0
......
<div id="div1">這是一個div</div>

jquery樣式操作

操作行間樣式

// 獲取div的樣式
$("div").css("width");
$("div").css("color");

//設定div的樣式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});

選擇器獲取的多個元素，獲取資訊獲取的是第一個，比如：$(“div”).css(“width”)，獲取的是第一個div的width

操作樣式類名

$("#div1").addClass("divClass2") //為id為div1的物件追加樣式divClass2
$("#div1").removeClass("divClass")  //移除id為div1的物件的class名為divClass的樣式
$("#div1").removeClass("divClass divClass2") //移除多個樣式
$("#div1").toggleClass("anotherClass") //重複切換anotherClass樣式

獲取元素的索引值

var $li = $(`.list li`).eq(1);
alert($li.index()); // 彈出1
......
<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

jquery特殊效果

fadeIn() 淡入

    $btn.click(function(){

        $(`#div1`).fadeIn(1000,`swing`,function(){
            alert(`done!`);
        });

    });

fadeOut() 淡出
fadeToggle() 切換淡入淡出
hide() 隱藏元素
show() 顯示元素
toggle() 切換元素的可見狀態
slideDown() 向下展開
slideUp() 向上捲起
slideToggle() 依次展開或捲起某個元素

jquery鏈式呼叫

$(`#div1`) // id為div1的元素
.children(`ul`) //該元素下面的ul子元素
.slideDown(`fast`) //高度從零變到實際高度來顯示ul元素
.parent()  //跳到ul的父元素，也就是id為div1的元素
.siblings()  //跳到div1元素平級的所有兄弟元素
.children(`ul`) //這些兄弟元素中的ul子元素
.slideUp(`fast`);  //高度實際高度變換到零來隱藏ul元素

jquery動畫

通過animate方法可以設定元素某屬性值上的動畫，可以設定一個或多個屬性值，動畫執行完成後會執行一個函式

$(`#div1`).animate({
    width:`+=100`,
    height:300
},1000,`swing`,function(){
    alert(`done!`);
});

尺寸相關、滾動事件

• 獲取和設定元素的尺寸

width()、height()    獲取元素width和height  
innerWidth()、innerHeight()  包括padding的width和height  
outerWidth()、outerHeight()  包括padding和border的width和height  
outerWidth(true)、outerHeight(true)   包括padding和border以及margin的width和height

• 獲取元素相對頁面的絕對位置

offset()

• 獲取瀏覽器可視區寬度高度

$(window).width();
$(window).height();

• 獲取頁面文件的寬度高度

$(document).width();
$(document).height();

• 獲取頁面滾動距離

$(document).scrollTop();  
$(document).scrollLeft();

• 頁面滾動事件

$(window).scroll(function(){  
    ......  
})

jquery屬性操作

• html() 取出或設定html內容

// 取出html內容

var $htm = $(`#div1`).html();

// 設定html內容

$(`#div1`).html(`<span>新增文字</span>`);

• prop() 取出或設定某個屬性的值

// 取出圖片的地址

var $src = $(`#img1`).prop(`src`);

// 設定圖片的地址和alt屬性

$(`#img1`).prop({src: "test.jpg", alt: "Test Image" });

jquery迴圈

對jquery選擇的物件集合分別進行操作，需要用到jquery迴圈操作，此時可以用物件上的each方法：

$(function(){
    $(`.list li`).each(function(i){
        $(this).html(i);
    })
})
......
<ul class="list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

jquery事件

• 事件函式列表

blur() 元素失去焦點
focus() 元素獲得焦點
click() 滑鼠單擊
mouseover() 滑鼠進入（進入子元素也觸發）
mouseout() 滑鼠離開（離開子元素也觸發）
mouseenter() 滑鼠進入（進入子元素不觸發）
mouseleave() 滑鼠離開（離開子元素不觸發）
hover() 同時為mouseenter和mouseleave事件指定處理函式
ready() DOM載入完成
resize() 瀏覽器視窗的大小發生改變
scroll() 滾動條的位置發生變化
submit() 使用者遞交表單

• 繫結事件的其他方式

$(function(){
    $(`#div1`).bind(`mouseover click`, function(event) {
        alert($(this).html());
    });
});

• 取消繫結事件

$(function(){
    $(`#div1`).bind(`mouseover click`, function(event) {
        alert($(this).html());

        // $(this).unbind();
        $(this).unbind(`mouseover`);

    });
});

事件冒泡

什麼是事件冒泡

在一個物件上觸發某類事件（比如單擊onclick事件），如果此物件定義了此事件的處理程式，那麼此事件就會呼叫這個處理程式，如果沒有定義此事件處理程式或者事件返回true，那麼這個事件會向這個物件的父級物件傳播，從裡到外，直至它被處理（父級物件所有同類事件都將被啟用），或者它到達了物件層次的最頂層，即document物件（有些瀏覽器是window）

事件冒泡的作用

事件冒泡允許多個操作被集中處理（把事件處理器新增到一個父級元素上，避免把事件處理器新增到多個子級元素上），它還可以讓你在物件層的不同級別捕獲事件

阻止事件冒泡

事件冒泡機制有時候是不需要的，需要阻止掉，通過 event.stopPropagation() 來阻止

$(function(){
    var $box1 = $(`.father`);
    var $box2 = $(`.son`);
    var $box3 = $(`.grandson`);
    $box1.click(function() {
        alert(`father`);
    });
    $box2.click(function() {
        alert(`son`);
    });
    $box3.click(function(event) {
        alert(`grandson`);
        event.stopPropagation();

    });
    $(document).click(function(event) {
        alert(`grandfather`);
    });
})

......

<div class="father">
    <div class="son">
        <div class="grandson"></div>
    </div>
</div>

阻止預設行為

阻止表單提交

$(`#form1`).submit(function(event){
    event.preventDefault();
})

合併阻止操作

// event.stopPropagation();
// event.preventDefault();

// 合併寫法：
return false;

事件委託

事件委託就是利用冒泡的原理，把事件加到父級上，通過判斷事件來源的子集，執行相應的操作，事件委託首先可以極大減少事件繫結次數，提高效能；其次可以讓新加入的子元素也可以擁有相同的操作

一般繫結事件的寫法

$(function(){
    $ali = $(`#list li`);
    $ali.click(function() {
        $(this).css({background:`red`});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

事件委託的寫法

$(function(){
    $list = $(`#list`);
    $list.delegate(`li`, `click`, function() {
        $(this).css({background:`red`});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

jquery元素節點操作

• 建立節點

var $div = $(`<div>`);
var $div2 = $(`<div>這是一個div元素</div>`);

• 插入節點
  • append()和appendTo()：在現存元素的內部，從後面插入元素
  • prepend()和prependTo()：在現存元素的內部，從前面插入元素
  • after()和insertAfter()：在現存元素的外部，從後面插入元素
  • before()和insertBefore()：在現存元素的外部，從前面插入元素
• 刪除節點

var $span = $(`<span>這是一個span元素</span>`);
$(`#div1`).append($span);
......
<div id="div1"></div>

$(`#div1`).remove();

ajax與jsonp

ajax技術的目的是讓javascript傳送http請求，與後臺通訊，獲取資料和資訊。ajax技術的原理是例項化xmlhttp物件，使用此物件與後臺通訊。ajax通訊的過程不會影響後續javascript的執行，從而實現非同步

同步和非同步

現實生活中，同步指的是同時做幾件事情，非同步指的是做完一件事後再做另外一件事，程式中的同步和非同步是把現實生活中的概念對調，也就是程式中的非同步指的是現實生活中的同步，程式中的同步指的是現實生活中的非同步

區域性重新整理和無重新整理

ajax可以實現區域性重新整理，也叫做無重新整理，無重新整理指的是整個頁面不重新整理，只是區域性重新整理，ajax可以自己傳送http請求，不用通過瀏覽器的位址列，所以頁面整體不會重新整理，ajax獲取到後臺資料，更新頁面顯示資料的部分，就做到了頁面區域性重新整理

同源策略

ajax請求的頁面或資源只能是同一個域下面的資源，不能是其他域的資源，這是在設計ajax時基於安全的考慮。特徵報錯提示：

XMLHttpRequest cannot load https://www.baidu.com/. No  
`Access-Control-Allow-Origin` header is present on the requested resource.  
Origin `null` is therefore not allowed access.

$.ajax使用方法

常用引數：
1、url 請求地址
2、type 請求方式，預設是`GET`，常用的還有`POST`
3、dataType 設定返回的資料格式，常用的是`json`格式，也可以設定為`html`
4、data 設定傳送給伺服器的資料
5、success 設定請求成功後的回撥函式
6、error 設定請求失敗後的回撥函式
7、async 設定是否非同步，預設值是`true`，表示非同步 

以前的寫法

$.ajax({
    url: `js/data.json`,
    type: `GET`,
    dataType: `json`,
    data:{`aa`:1}
    success:function(data){
        alert(data.name);
    },
    error:function(){
        alert(`伺服器超時，請重試！`);
    }
});

新的寫法(推薦)

$.ajax({
    url: `js/data.json`,
    type: `GET`,
    dataType: `json`,
    data:{`aa`:1}
})
.done(function(data) {
    alert(data.name);
})
.fail(function() {
    alert(`伺服器超時，請重試！`);
});

// data.json裡面的資料： {"name":"tom","age":18}

jsonp

ajax只能請求同一個域下的資料或資源，有時候需要跨域請求資料，就需要用到jsonp技術，jsonp可以跨域請求資料，它的原理主要是利用了<script>標籤可以跨域連結資源的特性。jsonp和ajax原理完全不一樣，不過jquery將它們封裝成同一個函式

$.ajax({
    url:`js/data.js`,
    type:`get`,
    dataType:`jsonp`,
    jsonpCallback:`fnBack`
})
.done(function(data){
    alert(data.name);
})
.fail(function() {
    alert(`伺服器超時，請重試！`);
});

// data.js裡面的資料： fnBack({"name":"tom","age":18});

獲取360搜尋關鍵詞聯想資料

$(function(){
    $(`#txt01`).keyup(function(){
        var sVal = $(this).val();
        $.ajax({
            url:`https://sug.so.360.cn/suggest?`,
            type:`get`,
            dataType:`jsonp`,
            data: {word: sVal}
        })
        .done(function(data){
            var aData = data.s;
            $(`.list`).empty();
            for(var i=0;i<aData.length;i++)
            {
                var $li = $(`<li>`+ aData[i] +`</li>`);
                $li.appendTo($(`.list`));
            }
        })        
    })
})

//......

<input type="text" name="" id="txt01">
<ul class="list"></ul>

本地儲存

本地儲存分為cookie，以及新增的localStorage和sessionStorage

• ookie 儲存在本地，容量最大4k，在同源的http請求時攜帶傳遞，損耗頻寬，可設定訪問路徑，只有此路徑及此路徑的子路徑才能訪問此cookie，在設定的過期時間之前有效

jquery 設定cookie
$.cookie(`mycookie`,`123`,{expires:7,path:`/`});
jquery 獲取cookie
$.cookie(`mycookie`);

• ocalStorage 儲存在本地，容量為5M或者更大，不會在請求時候攜帶傳遞，在所有同源視窗中共享，資料一直有效，除非人為刪除，可作為長期資料

//設定：
localStorage.setItem("dat", "456");
localStorage.dat = `456`;

//獲取：
localStorage.getItem("dat");
localStorage.dat

//刪除
localStorage.removeItem("dat");

• sessionStorage 儲存在本地，容量為5M或者更大，不會在請求時候攜帶傳遞，在同源的當前視窗關閉前有效

localStorage 和 sessionStorage 合稱為Web Storage , Web Storage支援事件通知機制，可以將資料更新的通知監聽者，Web Storage的api介面使用更方便

iPhone的無痕瀏覽不支援Web Storage，只能用cookie

移動端庫和框架

移動端js事件

1、touchstart: //手指放到螢幕上時觸發
2、touchmove: //手指在螢幕上滑動式觸發
3、touchend: //手指離開螢幕時觸發
4、touchcancel: //系統取消touch事件的時候觸發，比較少用 

移動端一般有三種操作，點選、滑動、拖動，這三種操作一般是組合使用上面的幾個事件來完成的，所有上面的4個事件一般很少單獨使用，一般是封裝使用來實現這三種操作，可以使用封裝成熟的js庫

• zepto
• swiper
• bootstrap

正規表示式

• 正規表示式的寫法

var re=new RegExp(`規則`, `可選引數`);
var re=/規則/引數; 

• 規則中的字元

1）普通字元匹配：
如：/a/ 匹配字元 ‘a’，/a,b/ 匹配字元 ‘a,b’

2）轉義字元匹配：
d 匹配一個數字，即0-9
D 匹配一個非數字，即除了0-9
w 匹配一個單詞字元（字母、數字、下劃線）
W 匹配任何非單詞字元。等價於[^A-Za-z0-9_]
s 匹配一個空白符
S 匹配一個非空白符
 匹配單詞邊界
B 匹配非單詞邊界
. 匹配一個任意字元

var sTr01 = `123456asdf`;
var re01 = /d+/;
//匹配純數字字串
var re02 = /^d+$/;
alert(re01.test(sTr01)); //彈出true
alert(re02.test(sTr01)); //彈出false

• 量詞：對左邊的匹配字元定義個數

? 出現零次或一次（最多出現一次）
+ 出現一次或多次（至少出現一次）
* 出現零次或多次（任意次）
{n} 出現n次
{n,m} 出現n到m次
{n,} 至少出現n次 

• 任意一個或者範圍

[abc123] : 匹配‘abc123’中的任意一個字元
[a-z0-9] : 匹配a到z或者0到9中的任意一個字元

• 限制開頭結尾

^ 以緊挨的元素開頭
$ 以緊挨的元素結尾 

• 修飾引數

g： global，全文搜尋，預設搜尋到第一個結果接停止
i： ingore case，忽略大小寫，預設大小寫敏感

• 常用函式

1、test
用法：正則.test(字串) 匹配成功，就返回真，否則就返回假

2、replace
用法：字串.replace(正則，新的字串) 匹配成功的字元去替換新的字元 

• 正則預設規則

匹配成功就結束，不會繼續匹配，區分大小寫

var sTr01 = `abcdefedcbaCef`;
var re01 = /c/;
var re02 = /c/g;
var re03 = /c/gi;

var sTr02 = sTr01.replace(re01,`*`);
var sTr03 = sTr01.replace(re02,`*`);
var sTr04 = sTr01.replace(re03,`*`);
alert(sTr02); // 彈出 ab*defedcbaCef
alert(sTr03); // 彈出 ab*defed*baCef
alert(sTr04); // 彈出 ab*defed*ba*ef

• 常用正則規則

//使用者名稱驗證：(數字字母或下劃線6到20位)
var reUser = /^w{6,20}$/;

//郵箱驗證：        
var reMail = /^[a-z0-9][w.-]*@[a-z0-9-]+(.[a-z]{2,5}){1,2}$/i;

//密碼驗證：
var rePass = /^[w!@#$%^&*]{6,20}$/;

//手機號碼驗證：
var rePhone = /^1[3458]d{9}$/;

前端效能優化

從使用者訪問資源到資源完整的展現在使用者面前的過程中，通過技術手段和優化策略，縮短每個步驟的處理時間從而提升整個資源的訪問和呈現速度。網站的效能直接會影響到使用者的數量，所有前端效能優化很重要

程式碼部署

1、程式碼的壓縮與合併
2、圖片、js、css等靜態資源使用和主站不同域名地址儲存，從而使得在傳輸資源時不會帶上不必要的cookie資訊。
3、使用內容分發網路 CDN
4、為檔案設定Last-Modified、Expires和Etag
5、使用GZIP壓縮傳送
6、權衡DNS查詢次數(使用不同域名會增加DNS查詢)
7、避免不必要的重定向(加"/") 

編碼

html

1、使用結構清晰，簡單，語義化標籤
2、避免空的src和href
3、不要在HTML中縮放圖片 

css

1、精簡css選擇器
2、把CSS放到頂部
3、避免@import方式引入樣式
4、css中使用base64圖片資料取代圖片檔案，減少請求數，線上轉base64網站：http://tool.css-js.com/base64.html
5、使用css動畫來取代javascript動畫
6、使用字型圖示
7、使用css sprite(雪碧圖)
8、使用svg圖形
9、避免使用CSS表示式 

body{
 background-color: expression( (new Date()).getSeconds()%2 ? "#B8D4FF" : "#F08A00" );  
}

javascript

1、減少引用庫的個數
2、使用requirejs或seajs非同步載入js
3、JS放到頁面底部引入
4、避免全域性查詢
5、使用原生方法
6、用switch語句代替複雜的if else語句
7、減少語句數，比如說多個變數宣告可以寫成一句
8、使用字面量表示式來初始化陣列或者物件
9、使用innerHTML取代複雜的元素注入
10、使用事件代理(事件委託)
11、避免多次訪問dom選擇集
12、高頻觸發事件設定使用函式節流
13、使用Web Storage快取資料 

移動端Web

流式佈局

流式佈局：就是百分比佈局，
非固定畫素，內容向兩側填充，
理解成流動的佈局，稱為流式佈局

視覺視窗

視覺視窗：viewport,是移動端特有。
這是一個虛擬的區域，承載網頁的。

承載關係

承載關係：瀏覽器---->viewport---->網頁

適配要求

1. 網頁寬度必須和瀏覽器保持一致
2. 預設顯示的縮放比例和PC端保持（縮放比例1.0）
3. 不允許使用者自行縮放網頁

滿足這些要求達到了適配，國際上通用的適配方案，標準的移動端適配方案

適配設定

1. 如果任何設定都沒有，預設走的就是viewport的預設設定
2. 去設定新的viewport設定,達到適配要求
3. <meta name=”viewport”> 設定視口的標籤 在head裡面並且應該緊接著編碼設定
4. viewport的功能
   5. width：可以設定寬度(device-width 當前裝置的寬度)
   6. height：可以設定高度
   7. initial-scale：可以設定預設的縮放比例
   8. user-scalable：可以設定是否允許使用者自行縮放
   9. maximum-scale：可以設定最大縮放比例
   10. minimum-scale：可以設定最小縮放比例

在<meta name="viewport" content="" >  content="" 使用以上引數

- width=device-width   當前裝置寬度

- initial-scale=1.0    寬度一致比例是1.0

- user-scalable=no     不允許使用者自行縮放  （yes，no  1,0）

標準適配方案
<meta name=`viewport` content=`width=device-width,initial-scale=1.0,user-scalable=0`>