前端——基礎
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塊標籤
一、<div> 標籤 塊元素，表示一塊內容，沒有具體的語義。
二、<span> 標籤 行內元素，表示一行中的一小段內容，沒有具體的語義。
含樣式和語義的標籤
一、<em> 標籤 行內元素，表示語氣中的強調詞
二、<i> 標籤 行內元素，表示專業詞彙
三、<b> 標籤 行內元素，表示文檔中的關鍵字或者產品名
四、<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表格
一、<table>標籤：聲明一個表格，它的經常使用屬性以下：
•border屬性 定義表格的邊框，設置值是數值
•cellpadding屬性 定義單元格內容與邊框的距離，設置值是數值
•cellspacing屬性 定義單元格與單元格之間的距離，設置值是數值
•align屬性 設置總體表格相對於瀏覽器窗口的水平對齊方式,設置值有：left | center | right
二、<tr>標籤：定義表格中的一行
三、<td>和<th>標籤：定義一行中的一個單元格，td表明普通單元格，th表示表頭單元格，它們的經常使用屬性以下：
•align 設置單元格中內容的水平對齊方式,設置值有：left | center | right
•valign 設置單元格中內容的垂直對齊方式 top | middle | bottom
•colspan 設置單元格水平合併，設置值是數值
•rowspan 設置單元格垂直合併，設置值是數值
頁面佈局概述
佈局也能夠叫作排版，它指的是把文字和圖片等元素按照咱們的意願有機地排列在頁面上，佈局的方式分爲兩種：
一、table佈局：經過table元素將頁面空間劃分紅若干個單元格，將文字或圖片等元素放入單元格中，隱藏表格的邊框，從而實現佈局。這種佈局方式也叫傳統佈局，目前主要使用在EDM(廣告郵件中的頁面)中，主流的佈局方式不用這種。
二、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顏色值主要有三種表示方法：
一、顏色名錶示，好比：red 紅色，gold 金色
二、rgb表示，好比：rgb(255,0,0)表示紅色
三、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相關技巧
一、設置元素水平居中： margin:x auto;
二、margin負值讓元素位移及邊框合併
外邊距合併
外邊距合併指的是，當兩個垂直外邊距相遇時，它們將造成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者
解決方法以下：
一、使用這種特性
二、設置一邊的外邊距，通常設置margin-top
三、將元素浮動或者定位
margin-top 塌陷
在兩個盒子嵌套時候，內部的盒子設置的margin-top會加到外邊的盒子上，致使內部的盒子margin-top設置失敗
解決方法以下：
一、外部盒子設置一個邊框
二、外部盒子設置 overflow:hidden
三、使用僞元素類：
.clearfix:before{
content: '';
display:table;
}
css元素溢出
當子元素的尺寸超過父元素的尺寸時，須要設置父元素顯示溢出的子元素的方式，設置的方法是經過overflow屬性來設置
overflow的設置項：
一、visible 默認值。內容不會被修剪，會呈如今元素框以外。
二、hidden 內容會被修剪，而且其他內容是不可見的，此屬性還有清除浮動、清除margin-top塌陷的功能。
三、scroll 內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。
四、auto 若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。
五、inherit 規定應該從父元素繼承 overflow 屬性的值。
塊元素、內聯元素、內聯塊元素
元素就是標籤，佈局中經常使用的有三種標籤，塊元素、內聯元素、內聯塊元素，瞭解這三種元素的特性，才能熟練的進行頁面佈局。
塊元素
塊元素，也能夠稱爲行元素，佈局中經常使用的標籤如：div、p、ul、li、h1~h六、dl、dt、dd等等都是塊元素，它在佈局中的行爲：
•支持所有的樣式
•若是沒有設置寬度，默認的寬度爲父級寬度100%
•盒子佔據一行、即便設置了寬度
內聯元素
內聯元素，也能夠稱爲行內元素，佈局中經常使用的標籤如：a、span、em、b、strong、i等等都是內聯元素，它們在佈局中的行爲：
•支持部分樣式（不支持寬、高、margin上下、padding上下）
•寬高由內容決定
•盒子並在一行
•代碼換行，盒子之間會產生間距
•子元素是內聯元素，父元素能夠用text-align屬性設置子元素水平對齊方式
解決內聯元素間隙的方法
一、去掉內聯元素之間的換行
二、將內聯元素的父級設置font-size爲0，內聯元素自身再設置font-size
內聯塊元素
內聯塊元素，也叫行內塊元素，是新增的元素類型，現有元素沒有歸於此類別的，img和input元素的行爲相似這種元素，可是也歸類於內聯元素，咱們能夠用display屬性將塊元素或者內聯元素轉化成這種元素。它們在佈局中表現的行爲：
•支持所有樣式
•若是沒有設置寬高，寬高由內容決定
•盒子並在一行
•代碼換行，盒子會產生間距
•子元素是內聯塊元素，父元素能夠用text-align屬性設置子元素水平對齊方式。
這三種元素，能夠經過display屬性來相互轉化，不過實際開發中，塊元素用得比較多，因此咱們常常把內聯元素轉化爲塊元素，少許轉化爲內聯塊，而要使用內聯元素時，直接使用內聯元素，而不用塊元素轉化了。
display屬性
display屬性是用來設置元素的類型及隱藏的，經常使用的屬性有：
一、none 元素隱藏且不佔位置
二、block 元素以塊元素顯示
三、inline 元素之內聯元素顯示
四、inline-block 元素之內聯塊元素顯示
浮動
浮動特性
一、浮動元素有左浮動(float:left)和右浮動(float:right)兩種
二、浮動的元素會向左或向右浮動，碰到父元素邊界、其餘元素才停下來
三、相鄰浮動的塊元素能夠並在一行，超出父級寬度就換行
四、浮動讓行內元素或塊元素自動轉化爲行內塊元素(此時不會有行內塊元素間隙問題)
五、浮動元素後面沒有浮動的元素會佔據浮動元素的位置，沒有浮動的元素內的文字會避開浮動的元素，造成文字饒圖的效果
六、父元素若是沒有設置尺寸(通常是高度不設置)，父元素內總體浮動的元素沒法撐開父元素，父元素須要清除浮動
七、浮動元素之間沒有垂直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權重指的是樣式的優先級，有兩條或多條樣式做用於一個元素，權重高的那條樣式對元素起做用,權重相同的，後寫的樣式會覆蓋前面寫的樣式
權重的等級
能夠把樣式的應用方式分爲幾個等級，按照等級來計算權重
一、!important，加在樣式屬性值後，權重值爲 10000
二、內聯樣式，如：style=」」，權重值爲1000
三、ID選擇器，如：#content，權重值爲100
四、類，僞類和屬性選擇器，如： content、:hover 權重值爲10
五、標籤選擇器和僞元素選擇器，如：div、p、:before 權重值爲1
六、通用選擇器（*）、子選擇器（>）、相鄰選擇器（+）、同胞選擇器（~）、權重值爲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動畫
一、transition-property 設置過渡的屬性，好比：width height background-color
二、transition-duration 設置過渡的時間，好比：1s 500ms
三、transition-timing-function 設置過渡的運動方式，經常使用有 linear(勻速)|ease(緩衝運動)
四、transition-delay 設置動畫的延遲
五、transition: property duration timing-function delay 同時設置四個屬性
CSS3 transform變換
一、translate(x,y) 設置盒子位移
二、scale(x,y) 設置盒子縮放
三、rotate(deg) 設置盒子旋轉
四、skew(x-angle,y-angle) 設置盒子斜切
五、perspective 設置透視距離
六、transform-style flat | preserve-3d 設置盒子是否按3d空間顯示
七、translateX、translateY、translateZ 設置三維移動
八、rotateX、rotateY、rotateZ 設置三維旋轉
九、scaleX、scaleY、scaleZ 設置三維縮放
十、tranform-origin 設置變形的中心點
十一、backface-visibility 設置盒子背面是否可見
CSS3 animation動畫
一、@keyframes 定義關鍵幀動畫
二、animation-name 動畫名稱
三、animation-duration 動畫時間
四、animation-timing-function 動畫曲線 linear(勻速)|ease(緩衝)|steps(步數)
五、animation-delay 動畫延遲
六、animation-iteration-count 動畫播放次數 n|infinite
七、animation-direction 動畫結束後是否反向還原 normal|alternate
八、animation-play-state 動畫狀態 paused(中止)|running(運動)
九、animation-fill-mode 動畫先後的狀態 none(缺省)|forwards(結束時停留在最後一幀)|backwards(開始時停留在定義的開始幀)|both(先後都應用)
十、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新增標籤
新增語義標籤
一、<header> 頁面頭部、頁眉
二、<nav> 頁面導航
三、<article> 一篇文章
四、<section> 文章中的章節
五、<aside> 側邊欄
六、<footer> 頁面底部、頁腳
音頻視頻
一、<audio>
二、<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>
新增經常使用表單控件屬性：
一、placeholder 設置文本框默認提示文字
二、autofocus 自動得到焦點
三、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介紹
前端三大塊
一、HTML：頁面結構
二、CSS：頁面表現：元素大小、顏色、位置、隱藏或顯示、部分動畫效果
三、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種基本數據類型：
一、number 數字類型
二、string 字符串類型
三、boolean 布爾類型 true 或 false
四、undefined undefined類型，變量聲明未初始化，它的值就是undefined
五、null null類型，表示空對象，若是定義的變量未來準備保存對象，能夠將變量初始化爲null,在頁面上獲取不到對象，返回的值就是null
1種複合類型：
object
javascript註釋
<script type="text/javascript">
// 單行註釋
var iNum = 123;
/*
多行註釋
一、...
二、...
*/
var sTr = 'abc123';
</script>
變量、函數、屬性、函數參數命名規範
一、區分大小寫
二、第一個字符必須是字母、下劃線（_）或者美圓符號（$）
三、其餘字符能夠是字母、下劃線、美圓符或數字
獲取元素方法一
可使用內置對象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>
操做元素屬性
獲取的頁面元素，就能夠對頁面元素的屬性進行操做，屬性的操做包括屬性的讀和寫
操做屬性的方法
一、「.」 操做
二、「[ ]」操做
屬性寫法
一、html的屬性和js裏面屬性寫法同樣
二、「class」 屬性寫成 「className」
三、「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組成
一、ECMAscript javascript的語法（變量、函數、循環語句等語法）
二、DOM 文檔對象模型 操做html和css的方法
三、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
調試程序的方法
一、alert
二、console.log
三、document.title
定時器
定時器在javascript中的做用
一、製做動畫
二、異步操做
三、函數緩衝與節流
/*
定時器：
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使用方法
經常使用參數：
一、url 請求地址
二、type 請求方式，默認是'GET'，經常使用的還有'POST'
三、dataType 設置返回的數據格式，經常使用的是'json'格式，也能夠設置爲'html'
四、data 設置發送給服務器的數據
五、success 設置請求成功後的回調函數
六、error 設置請求失敗後的回調函數
七、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事件
一、touchstart: //手指放到屏幕上時觸發
二、touchmove: //手指在屏幕上滑動式觸發
三、touchend: //手指離開屏幕時觸發
四、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 匹配單詞邊界
\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，忽略大小寫，默認大小寫敏感
經常使用函數
一、test
用法：正則.test(字符串) 匹配成功，就返回真，不然就返回假
二、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}$/;
前端性能優化
從用戶訪問資源到資源完整的展示在用戶面前的過程當中，經過技術手段和優化策略，縮短每一個步驟的處理時間從而提高整個資源的訪問和呈現速度。網站的性能直接會影響到用戶的數量，全部前端性能優化很重要
代碼部署
一、代碼的壓縮與合併
二、圖片、js、css等靜態資源使用和主站不一樣域名地址存儲，從而使得在傳輸資源時不會帶上沒必要要的cookie信息。
三、使用內容分發網絡 CDN
四、爲文件設置Last-Modified、Expires和Etag
五、使用GZIP壓縮傳送
六、權衡DNS查找次數(使用不一樣域名會增長DNS查找)
七、避免沒必要要的重定向(加"/")
編碼
html
一、使用結構清晰，簡單，語義化標籤
二、避免空的src和href
三、不要在HTML中縮放圖片
css
一、精簡css選擇器
二、把CSS放到頂部
三、避免@import方式引入樣式
四、css中使用base64圖片數據取代圖片文件，減小請求數，在線轉base64網站：http://tool.css-js.com/base64.html
五、使用css動畫來取代javascript動畫
六、使用字體圖標
七、使用css sprite(雪碧圖)
八、使用svg圖形
九、避免使用CSS表達式
body{
background-color: expression( (new Date()).getSeconds()%2 ? "#B8D4FF" : "#F08A00" );
}
javascript
一、減小引用庫的個數
二、使用requirejs或seajs異步加載js
三、JS放到頁面底部引入
四、避免全局查找
五、使用原生方法
六、用switch語句代替複雜的if else語句
七、減小語句數，好比說多個變量聲明能夠寫成一句
八、使用字面量表達式來初始化數組或者對象
九、使用innerHTML取代複雜的元素注入
十、使用事件代理(事件委託)
十一、避免屢次訪問dom選擇集
十二、高頻觸發事件設置使用函數節流
1三、使用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字符實體
空格的字符實體：
「<」和「>」的字符實體：
< 和 >
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基本語法
選擇器 { 屬性:值; 屬性:值; 屬性:值;}javascript
/* 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選擇器
標籤選擇器
此種選擇器影響範圍大，建議儘可能應用在層級選擇器中css
*{margin:0;padding:0}
div{color:red}
<div>....</div> <!-- 對應以上兩條樣式 -->
<div class="box">....</div> <!-- 對應以上兩條樣式 -->
id選擇器
經過id名來選擇元素，元素的id名稱不能重複，因此一個樣式設置項只能對應於頁面上一個元素，不能複用，id名通常給程序使用，因此不推薦使用id做爲選擇器html
#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>
層級選擇器
主要應用在選擇父元素下的子元素，或者子元素下面的子元素，可與標籤元素結合使用，減小命名，同時也能夠經過層級，防止命名衝突html5
.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>
組選擇器
多個選擇器，若是有一樣的樣式設置，可使用組選擇器java
.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設置的是盒子內容的寬和高，不是盒子自己的寬和高jquery
<!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相關技巧
一、設置元素水平居中： margin:x auto;css3
二、margin負值讓元素位移及邊框合併web
外邊距合併
外邊距合併指的是，當兩個垂直外邊距相遇時，它們將造成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者ajax
解決方法以下：
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 匹配單詞邊界
\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'>
相關文章
- 1. 前端基礎
- 2. 前端基礎---JS基礎
- 3. 前端—基礎—JS基礎
- 4. 前端基礎-CSS
- 5. 前端基礎-HTML
- 6. 前端基礎---jquery
- 7. 前端基礎-Javascript
- 8. 前端基礎-Jquery
- 9. 前端基礎(三)
- 10. 前端基礎（二）
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Kotlin學習（二）基本類型
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 前端基礎
- 2. 前端基礎---JS基礎
- 3. 前端—基礎—JS基礎
- 4. 前端基礎-CSS
- 5. 前端基礎-HTML
- 6. 前端基礎---jquery
- 7. 前端基礎-Javascript
- 8. 前端基礎-Jquery
- 9. 前端基礎(三)
- 10. 前端基礎（二）