前端工程師快速入門
概述
前端開發(fā)工程師是Web前端開發(fā)工程師的簡稱，2007年才真正開始受到重視的一個(gè)新興職業(yè)爽哎。Web前端開發(fā)技術(shù)是一個(gè)先易后難的過程，主要包括三個(gè)要素：HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）弦蹂、級聯(lián)樣式表和JavaScript救恨。前端開發(fā)工程師不僅要掌握基本的Web前端開發(fā)技術(shù)缀匕，網(wǎng)站性能優(yōu)化纳决、SEO和服務(wù)器端的基礎(chǔ)知識(shí)碰逸，而且要學(xué)會(huì)運(yùn)用各種工具進(jìn)行輔助開發(fā)以及理論層面的知識(shí)乡小，包括代碼的可維護(hù)性、組件的易用性饵史、分層語義模板和瀏覽器分級支持等满钟。
html(超文本標(biāo)記語言)
-
什么是 HTML？
HTML 是用來描述網(wǎng)頁的一種語言胳喷。
HTML 指的是超文本標(biāo)記語言 (HyperTextMarkupLanguage)
HTML 不是一種編程語言湃番，而是一種標(biāo)記語言(markup language)
標(biāo)記語言是一套標(biāo)記標(biāo)簽(markup tag)
HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁
-
HTML 標(biāo)簽
HTML 標(biāo)記標(biāo)簽通常被稱為 HTML 標(biāo)簽 (HTML tag)。
HTML 標(biāo)簽是由尖括號包圍的關(guān)鍵詞吭露，比如 <html>
HTML 標(biāo)簽通常是成對出現(xiàn)的吠撮，比如 ** 和 **
標(biāo)簽對中的第一個(gè)標(biāo)簽是開始標(biāo)簽，第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽
開始和結(jié)束標(biāo)簽也被稱為開放標(biāo)簽和閉合標(biāo)簽
css(級聯(lián)樣式表)
-
CSS 概述
CSS 指層疊樣式表 (CascadingStyleSheets)讲竿，主要是用來調(diào)整html的外觀樣式
樣式定義如何顯示HTML 元素
樣式通常存儲(chǔ)在樣式表中
把樣式添加到 HTML 4.0 中泥兰，是為了解決內(nèi)容與表現(xiàn)分離的問題
外部樣式表可以極大提高工作效率
外部樣式表通常存儲(chǔ)在CSS 文件中
多個(gè)樣式定義可層疊為一
-
使用
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n55" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: inherit; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; position: relative !important; padding: 10px 30px; border: 1px solid; width: inherit;">//內(nèi)聯(lián)樣式
This is a paragraph
//內(nèi)部引入css樣式
//引入外部css樣式//內(nèi)聯(lián)樣式
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
//內(nèi)部引入css樣式
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
//引入外部css樣式
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
</html>
//css文件代碼
body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}
//css文件代碼
body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}</pre> -
什么是JavaScript
- 簡稱js，是世界上最流行的編程語言题禀。這門語言可用于 HTML 和 web鞋诗，更可廣泛用于服務(wù)器、PC迈嘹、筆記本電腦削彬、平板電腦和智能手機(jī)等設(shè)備。主要是用來創(chuàng)建動(dòng)態(tài)更新的內(nèi)容秀仲，控制多媒體融痛，制作圖像動(dòng)畫，使網(wǎng)頁增加互動(dòng)性神僵。
-
使用
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n65" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: inherit; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; position: relative !important; padding: 10px 30px; border: 1px solid; width: inherit;">document.write("This is a heading");//動(dòng)態(tài)輸出
?
點(diǎn)擊這里//控制按鈕點(diǎn)擊
x=document.getElementById("demo") //找到元素
x.style.color="#ff0000"; //改變樣式</pre>
初級前端
前端應(yīng)用需要適配電腦酌心、手機(jī)、平板等不同設(shè)備挑豌，前端技術(shù)更新發(fā)展很快安券，做好前端并不容易.2014年10月29日萬維網(wǎng)聯(lián)盟發(fā)布了H5，前端迎來迅猛發(fā)展氓英，不僅能做絢麗的網(wǎng)頁還可以做跨平臺(tái)的手機(jī)app.甚至上海公司推出了前端腳本語言設(shè)計(jì)的硬件開發(fā)語言ruff.
html5
-
h5與h4區(qū)別
-
推出理由及目標(biāo):解決web上存在的各種問題
web瀏覽器之間兼容性低
文檔結(jié)構(gòu)不明確
Web應(yīng)用程序的功能受到了限制
-
語法的改變
內(nèi)容類型
DOCTYPE申明
指定字符編碼
可以省略標(biāo)記的元素
具有boolean值的屬性
省略引號
-
新增的元素和廢除的元素
-
新增的結(jié)構(gòu)元素
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n104" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: inherit; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; position: relative !important; padding: 10px 30px; border: 1px solid; width: inherit;">section侯勉、article、aside铝阐、header址貌、hgroup、footer、nav练对、figure</pre>
-
新增的其它元素
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n107" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: inherit; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; position: relative !important; padding: 10px 30px; border: 1px solid; width: inherit;">video遍蟋、audio、embed螟凭、mark虚青、progress、meter螺男、time棒厘、ruby、rt下隧、rp奢人、wbr、canvas淆院、command何乎、details、datalist土辩、datagrid支救、keygen、output脯燃、source搂妻、menu</pre>
-
新增input元素類型
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n110" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: inherit; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; position: relative !important; padding: 10px 30px; border: 1px solid; width: inherit;">email、url辕棚、number欲主、range、Date Pickers逝嚎、color...</pre>
-
廢除的元素
能使用css代替的元素：basefont扁瓢、big、center补君、font引几、s、tt挽铁、u等
不再使用frame框架
只有部分瀏覽器支持的元素
其它被廢除的元素
-
-
新增的屬性和廢除的屬性
表單相關(guān)的屬性
鏈接相關(guān)的屬性
其它屬性
廢除的屬性
-
全局屬性
contentEditable屬性
designMode屬性
hidden屬性
spellcheck屬性
tabindex屬性
-
-
新增的主題結(jié)構(gòu)元素
-
article:代表文檔伟桅、獨(dú)立內(nèi)容，如博客叽掘、帖子...;article可以嵌套使用楣铁，可以用來表示插件
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n151" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: inherit; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; position: relative !important; padding: 10px 30px; border: 1px solid; width: inherit;"><article>
<h1>這是一個(gè)內(nèi)嵌頁面</h1>
<object>
<embed src="#" width="600" height="500"></embed>
</object>
</article></pre> -
section:
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n154" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: inherit; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; position: relative !important; padding: 10px 30px; border: 1px solid; width: inherit;"> <section>
<h1>蘋果</h1>
<p>這是一顆??很好吃</p>
</section></pre> -
nav元素是一個(gè)可以用作頁面導(dǎo)航的連接組,一個(gè)頁面可以有多個(gè)nav作用于不同導(dǎo)航
傳統(tǒng)導(dǎo)航條
側(cè)邊欄導(dǎo)航
頁內(nèi)導(dǎo)航
翻頁操作
aside元素頁面主內(nèi)容之外的解釋說明
time元素
-
-
新增的非主題結(jié)構(gòu)元素
header:主要放置標(biāo)題，也可以放置其它內(nèi)容
footer:主要放底部更扁，footer可以在區(qū)域塊中使用
address:用來在文檔中顯示聯(lián)系信息盖腕，文檔作者赫冬、郵箱、地址溃列、電話
hgroup:-hgroup是將標(biāo)題及其子元素分組的元素
-
html結(jié)構(gòu)
顯示編排內(nèi)容區(qū)域塊：明確使用section元素創(chuàng)建文檔結(jié)構(gòu)劲厌，在每個(gè)內(nèi)容區(qū)塊內(nèi)使用標(biāo)題
隱式編排內(nèi)容區(qū)域塊:不明確使用section等元素，根據(jù)頁面中所書寫的各級標(biāo)題等把內(nèi)容區(qū)塊自動(dòng)創(chuàng)建出來听隐。
標(biāo)題分級补鼻，下級區(qū)域塊&新區(qū)域塊
不同區(qū)域塊可以使用相同級別的標(biāo)題
-
表單新增屬性
表單內(nèi)的form屬性：h5中表單內(nèi)從屬元素可以寫在頁面任何地方，設(shè)置form屬性為表單id就好
表單內(nèi)formaction屬性：h5可以為所有提交按鈕增加不同的formaction屬性遵绰，是不同按鈕提交到不同頁面
表單內(nèi)的formmethod屬性：對每一個(gè)表單元素指定不同的提交方法
表單內(nèi)的formenctype屬性：可以使用formenctype屬性分別對表單元素指定不同編碼方式
表單內(nèi)的formtarget屬性：可以對多個(gè)提交按鈕分別使用formtarget屬性來指定提交后在何處打開所需要加載的頁面
表單內(nèi)的autofocus屬性：為文本框辽幌、選擇框或按鈕設(shè)置aotufocus屬性增淹，當(dāng)畫面打開時(shí)該控件自動(dòng)獲得焦點(diǎn)
表單內(nèi)元素的required屬性：輸入元素設(shè)置required椿访，在提交時(shí)如果元素內(nèi)容為空白，則不允許提交虑润，同時(shí)在瀏覽器中顯示提示文字
表單內(nèi)的lable屬性：為可使用標(biāo)簽的輸入表單元素設(shè)置labels屬性成玫，屬性值為NodeList對象，代表該元素所綁定的標(biāo)簽元素所構(gòu)成的集合
control屬性：標(biāo)簽內(nèi)放置一個(gè)表單元素拳喻，通過該標(biāo)簽的control屬性來訪問該表單元素,可以自動(dòng)改變內(nèi)容值等
placeholder屬性：當(dāng)文本框處于為輸入狀態(tài)時(shí)哭当，模糊顯示提示
list屬性：單行文本設(shè)置list屬性，值是datalist的id,那么datalist列表內(nèi)容為文本框的可選項(xiàng)冗澈，類似之前的下拉菜單支持輸入
AutoComplete屬性：自動(dòng)完成輸入功能钦勘，還有安全方面的控制
pattern屬性：為輸入元素設(shè)置該正則屬性，在提交時(shí)內(nèi)容不符合格式不能提交并提示
SelectionDirection屬性：為輸入元素設(shè)置該屬性亚亲，可以監(jiān)聽到使用鼠標(biāo)選取內(nèi)容的方向--forward和backward
indeterminate屬性：為復(fù)選框設(shè)置該屬性表示復(fù)選框尚未明確選取狀態(tài)
image的height和width屬性
-
增加與改良的input元素
- url類型彻采、email類型、date類型捌归、time類型肛响、datetime類型、datetime-local類型惜索、month類型特笋、week類型、number類型巾兆、range類型猎物、search類型、tel類型角塑、color類型
-
增強(qiáng)的頁面元素
新增的figure元素figcaption元素
新增的details元素與summary元素
新增的mark元素
新增的progress元素
新增的meter元素
改良的ol列表
改良的dl列表
嚴(yán)格限制的cote元素和改良的small元素
-
新增Range對象：一個(gè)range對象代表頁面上的一段連續(xù)區(qū)域蔫磨，通過range對象可以獲取和修改網(wǎng)絡(luò)上的任何區(qū)域
Range對象的SelectNode、SelectNodeContents吉拳、deleteContents方法
Range對象的setStart质帅、setEnd、setStartBefore、setStartAfter煤惩、setEndBefore嫉嘀、setEndAfter方法
Range對象的cloneRange、cloneContents魄揉、extractContents
Range對象insertNode剪侮、compareBoundaryPoints
Range對象的collapse、detach方法
-
html5中音視頻播放
音頻播放：auido->source定義資源洛退，control控制
視頻播放：video
html5拖放：boxDiv.ondrop方法
-
html5的Canvas標(biāo)簽
-
Canvas的使用
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n278" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: inherit; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; position: relative !important; padding: 10px 30px; border: 1px solid; width: inherit;">context=mycanvas.getContext("2d");
context.fillStyle="#ff0000";
?
context.rotate(45);//旋轉(zhuǎn)
?
context.translate(200,200);//平移
?
context.fillRect(0,0,200,200);//填充繪制</pre> Canvas的使用路徑
Canvas繪制變化圖形
Canvas圖形繪制處理
-
Canvas的應(yīng)用
- createjs動(dòng)畫
-
-
html中SVG的使用
-
什么是svg
SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
SVG 用來定義用于網(wǎng)絡(luò)的基于矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有所損
SVG 是萬維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)
SVG 與諸如 DOM 和 XSL 之類的 W3C 標(biāo)準(zhǔn)是一個(gè)整體
-
SVG的優(yōu)勢
SVG可以通過文本編輯器來創(chuàng)建和修改
SVG圖像可被搜索瓣俯、索引、腳本化壓縮
SVG圖像可在任何分辨率下被高質(zhì)量的打印
SVG可在圖像質(zhì)量不下降的情況下被放大
-
-
html5File中的api應(yīng)用
-
fileApi協(xié)議族
Directories and System-文件系統(tǒng)和目錄
FileWriter-寫入文件
FileReader-讀取文件
File Api-頁面選擇文件處理
接口對象:FileSystem兵怯、Entry彩匕、DirectoryEntry、FileEntry媒区、DirectoryReader
-
實(shí)現(xiàn)文件列表功能
- cordova-plugin-file在Android中操作文件
操作欄的創(chuàng)建及WebFont的使用
使用對話框創(chuàng)建文件夾
-
-
Web存儲(chǔ)
-
新存儲(chǔ)類型
localStorage:沒有時(shí)間限制
sessionStorage:針對一個(gè)session的數(shù)據(jù)存儲(chǔ),當(dāng)用戶關(guān)閉瀏覽器數(shù)據(jù)被刪除
-
web緩存與webWorkers
-
web緩存
CACHE MANIFEST:此標(biāo)題下文件會(huì)首次下載后緩
NETWORK:此標(biāo)題下文件需要與服務(wù)器連接且不會(huì)緩存
FALLBACK:此標(biāo)題規(guī)定頁面無法訪問時(shí)的回退頁面(比如404)
-
webWorkers:運(yùn)行在后臺(tái)的js驼仪，獨(dú)立于其它腳本不會(huì)影響頁面性能
postMessage:發(fā)送
terminate:停止
onmessage:接收
-
-
-
html5服務(wù)器推送
- onopen、onerror袜漩、onmessage
-
響應(yīng)式布局
-
基本實(shí)現(xiàn)
設(shè)備寬高
渲染窗口的寬高
設(shè)備的手持方向
設(shè)備的分辨率
-
響應(yīng)式布局框架Bootstrap
- 快速绪爸、簡單、靈活的柵格系統(tǒng)宙攻、小而強(qiáng)大奠货、響應(yīng)式布局、跨平臺(tái)
-
-
使用html5構(gòu)建布局和移動(dòng)手機(jī)頁面
-
html5在移動(dòng)開發(fā)中的準(zhǔn)則
盡量使用單頁面開發(fā)
慎重選擇前端UI框架
動(dòng)畫座掘、特效使用準(zhǔn)則(60fps)
-
瀏覽器消耗最小的css屬性
位置-transform:translate(x,y,z)
大小-transform:scale(n)
旋轉(zhuǎn)-transform:rotate
透明度-opacity:0..1
長度單位使用rem
-
css3
-
css基礎(chǔ)樣式
-
css格式递惋、派生選擇器、id選擇器雹顺、類選擇器丹墨、屬性選擇器
- id不可以重復(fù)，class可以重復(fù)嬉愧；id是先找到結(jié)構(gòu)內(nèi)容在加載樣式贩挣，class是先加載好樣式再去找內(nèi)容
-
css背景
-
屬性 描述 background 簡寫屬性，作用是將背景屬性設(shè)置在一個(gè)聲明中没酣。 background-attachment 背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)王财。 background-color 設(shè)置元素的背景顏色。 background-image 把圖像設(shè)置為背景裕便。 background-position 設(shè)置背景圖像的起始位置绒净。 background-repeat 設(shè)置背景圖像是否及如何重復(fù)。
-
-
css文本：通過文本屬性偿衰，可以改變文本的顏色挂疆、字符間距才漆、對齊文本给梅、裝飾文本召夹、對文本縮進(jìn)
-
屬性 描述 color 設(shè)置文本顏色 direction 設(shè)置文本方向审胚。 line-height 設(shè)置行高。 letter-spacing 設(shè)置字符間距胆萧。 text-align 對齊元素中的文本庆揩。 text-decoration 向文本添加修飾。 text-indent 縮進(jìn)元素中文本的首行跌穗。 text-shadow 設(shè)置文本陰影订晌。CSS2 包含該屬性，但是 CSS2.1 沒有保留該屬性蚌吸。 text-transform 控制元素中的字母锈拨。 unicode-bidi 設(shè)置文本方向。 white-space 設(shè)置元素中空白的處理方式套利。 word-spacing 設(shè)置字間距推励。
-
-
css字體：css字體屬性定義文本的字體系列鹤耍、大小肉迫、加粗、風(fēng)格和變形
-
屬性 描述 font 簡寫屬性稿黄。作用是把所有針對字體的屬性設(shè)置在一個(gè)聲明中喊衫。 font-family 設(shè)置字體系列。 font-size 設(shè)置字體的尺寸杆怕。 font-size-adjust 當(dāng)首選字體不可用時(shí)族购，對替換字體進(jìn)行智能縮放。（CSS2.1 已刪除該屬性陵珍。） font-stretch 對字體進(jìn)行水平拉伸寝杖。（CSS2.1 已刪除該屬性。） font-style 設(shè)置字體風(fēng)格互纯。 font-variant 以小型大寫字體或者正常字體顯示文本瑟幕。 font-weight 設(shè)置字體的粗細(xì)。
-
-
css鏈接
a:link-普通的留潦、未被訪問的連接
a:visited-用戶已經(jīng)訪問的連接
a: hover -鼠標(biāo)指針位于鏈接的上方
a:active-鏈接被點(diǎn)擊
-
css列表：允許你放置只盹、改變列表標(biāo)志，或者將圖像作為列表標(biāo)志
-
屬性 描述 list-style 簡寫屬性兔院。用于把所有用于列表的屬性設(shè)置于一個(gè)聲明中殖卑。 list-style-image 將圖象設(shè)置為列表項(xiàng)標(biāo)志。 list-style-position 設(shè)置列表中列表項(xiàng)標(biāo)志的位置坊萝。 list-style-type 設(shè)置列表項(xiàng)標(biāo)志的類型孵稽。 marker-offset
-
css表格-表格邊许起、折疊邊框、表格寬高菩鲜、表格文本對齊街氢、表格內(nèi)邊距、表格顏色
-
css輪廓：主要用來突出元素
-
屬性 描述 CSS outline 在一個(gè)聲明中設(shè)置所有的輪廓屬性睦袖。 2 outline-color 設(shè)置輪廓的顏色珊肃。 2 outline-style 設(shè)置輪廓的樣式。 2 outline-width 設(shè)置輪廓的寬度馅笙。
-
-
-
css定位：改變元素在頁面的位置
-
css定位機(jī)制
普同流
-
浮動(dòng)：
可用值left伦乔、right、none董习、inherit(從父級繼承浮動(dòng)屬性)
-
clear屬性
- 去掉浮動(dòng)屬性：left烈和、right、both皿淋、inherit
絕對布局
-
css定位屬性
-
屬性 描述 position 把元素放置到一個(gè)靜態(tài)的招刹、相對的、絕對的窝趣、或固定的位置中疯暑。 top 定義了一個(gè)定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。 right 定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移哑舒。 bottom 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移妇拯。 left 定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。 overflow 設(shè)置當(dāng)元素的內(nèi)容溢出其區(qū)域時(shí)發(fā)生的事情洗鸵。 clip 設(shè)置元素的形狀越锈。元素被剪入這個(gè)形狀之中，然后顯示出來膘滨。 vertical-align 設(shè)置元素的垂直對齊方式甘凭。 z-index 設(shè)置元素的堆疊順序。
-
-
-
css盒子模型
-
盒子模型概述
內(nèi)邊距
-
邊框
- css3邊框：border-radius火邓、box-shadow丹弱、border-image
外邊距
外邊距合并
-
盒子的類型：inline、block
- display的inline-block屬性和table的inline-table屬性贡翘，list-item
-
對盒子中容納不下的內(nèi)容顯示
- overflow相關(guān)
對盒子使用陰影：box-shadow
指定針對元素的寬度和高度的計(jì)算方法：box-sizing: content-box(是否包含外邊距)
-
-
css常用操作
對齊操作：margin蹈矮、position、float
-
分類
尺寸操作：line-height鸣驱、width泛鸟、height...
屬性：clear、cursor踊东、display北滥、float刚操、position、visibility
導(dǎo)航欄
-
css選擇器
- 元素選擇器再芋、選擇器分組菊霜、類選擇器、id選擇器济赎、屬性選擇器鉴逞、后代選擇器、子元素選擇器司训、相鄰兄弟選擇器
-
css動(dòng)畫與特效
-
2D构捡、3D轉(zhuǎn)換
2D轉(zhuǎn)換：translate()|rotate()|scale()|skew()|matrix
3D轉(zhuǎn)換：rotateX()|rotateY()
-
過渡
-
屬性 描述 CSS transition 簡寫屬性，用于在一個(gè)屬性中設(shè)置四個(gè)過渡屬性壳猜。 3 transition-property 規(guī)定應(yīng)用過渡的 CSS 屬性的名稱勾徽。 3 transition-duration 定義過渡效果花費(fèi)的時(shí)間。默認(rèn)是 0统扳。 3 transition-timing-function 規(guī)定過渡效果的時(shí)間曲線喘帚。默認(rèn)是 "ease"。 3 transition-delay 規(guī)定過渡效果何時(shí)開始咒钟。默認(rèn)是 0吹由。 3
-
-
動(dòng)畫
-
屬性 描述 CSS @keyframes 規(guī)定動(dòng)畫。 3 animation 所有動(dòng)畫屬性的簡寫屬性盯腌，除了 animation-play-state 屬性溉知。 3 animation-name 規(guī)定 @keyframes 動(dòng)畫的名稱。 3 animation-duration 規(guī)定動(dòng)畫完成一個(gè)周期所花費(fèi)的秒或毫秒腕够。默認(rèn)是 0。 3 animation-timing-function 規(guī)定動(dòng)畫的速度曲線舌劳。默認(rèn)是 "ease"帚湘。 3 animation-delay 規(guī)定動(dòng)畫何時(shí)開始。默認(rèn)是 0甚淡。 3 animation-iteration-count 規(guī)定動(dòng)畫被播放的次數(shù)大诸。默認(rèn)是 1。 3 animation-direction 規(guī)定動(dòng)畫是否在下一周期逆向地播放贯卦。默認(rèn)是 "normal"资柔。 3 animation-play-state 規(guī)定動(dòng)畫是否正在運(yùn)行或暫停。默認(rèn)是 "running"撵割。 3 animation-fill-mode 規(guī)定對象動(dòng)畫時(shí)間之外的狀態(tài)贿堰。 3 transform與animation動(dòng)畫
-
-
html與css簡單頁面
-
css選擇器詳解
-
屬性選擇器與結(jié)構(gòu)性偽類選擇器
[id^=div]
-
結(jié)構(gòu)性偽類選擇器
偽元素選擇器
結(jié)構(gòu)性偽類選擇器：root、not啡彬、empty羹与、target
child相關(guān)選擇器
-
UI元素狀態(tài)偽類選擇器與兄弟元素選擇器
- UI元素狀態(tài)偽類選擇器17種：E:hover故硅、E:active、E:focus纵搁、E:disabled吃衅、E: read-only、E:checked腾誉、E:default徘层、E:indeterminate、E:selection利职、E:invalid惑灵、E:valid、E:required眼耀、E:optional英支、E:in-range
-
-
css文字與字體相關(guān)樣式
給文字添加陰影
使用服務(wù)器端字體
修改字體種類保持尺寸
-
css背景與邊框
與背景相關(guān)的新增屬性
在一個(gè)元素中顯示多個(gè)背景圖像
圓角邊框的繪制
使用圖像邊框
-
老式瀏覽器支持html5與css3
- google的html5.js和behavior:url("ie-css3.htc")
-
css布局屬性全接觸
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="" cid="n847" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: inherit; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; position: relative !important; padding: 10px 30px; border: 1px solid; width: inherit;">(ul.menu>li6>a[href="#"]{內(nèi)容})//開發(fā)工具快捷代碼
h1{圖片瀑布流}+ul.picC>li18>img[src="../../$.jpg"]//快捷代碼
</pre>-
Flexbox(彈性布局)
彈性基礎(chǔ)：彈性容器、彈性子元素哮伟、主軸干花、側(cè)軸、主側(cè)軸開始和結(jié)束
-
彈性容器屬性
flex-direction:設(shè)置主軸方向楞黄，確定彈性子元素排列方式
flex-wrap:當(dāng)彈性子容器超出彈性容器范圍時(shí)是否換行
flex-flow:direction和wrap的復(fù)合屬性
justify-content:主軸上的對齊方式
align-items:側(cè)軸上的對齊方式
align-content:側(cè)軸有空白時(shí)池凄，側(cè)軸的對齊方式
-
彈性子容器屬性
order:控制彈性容器子元素順序
flex-grow:控制彈性子元素?cái)U(kuò)展比例
flwx-shrink:設(shè)置彈性子元素收縮比例
flex-basis:指定彈性子元素收縮前的默認(rèn)大小值
flex:grow|shrink|basis的復(fù)合屬性
align-self:允許獨(dú)立子元素覆蓋彈性的默認(rèn)對齊值
-
多列屬性
-
屬性 描述 CSS column-count 規(guī)定元素應(yīng)該被分隔的列數(shù)。 3 column-fill 規(guī)定如何填充列鬼廓。 3 column-gap 規(guī)定列之間的間隔肿仑。 3 column-rule 設(shè)置所有 column-rule-* 屬性的簡寫屬性。 3 column-rule-color 規(guī)定列之間規(guī)則的顏色碎税。 3 column-rule-style 規(guī)定列之間規(guī)則的樣式尤慰。 3 column-rule-width 規(guī)定列之間規(guī)則的寬度。 3 column-span 規(guī)定元素應(yīng)該橫跨的列數(shù)雷蹂。 3 column-width 規(guī)定列的寬度伟端。 3 columns 規(guī)定設(shè)置 column-width 和 column-count 的簡寫屬性。 3
-
-
媒體查詢解析語法
-
媒體功能
-
aspect-ratio 定義輸出設(shè)備中的頁面可見區(qū)域?qū)挾扰c高度的比率 color 定義輸出設(shè)備每一組彩色原件的個(gè)數(shù)匪煌。如果不是彩色設(shè)備责蝠，則值等于0 color-index 定義在輸出設(shè)備的彩色查詢表中的條目數(shù)。如果沒有使用彩色查詢表萎庭，則值等于0 device-aspect-ratio 定義輸出設(shè)備的屏幕可見寬度與高度的比率霜医。 device-height 定義輸出設(shè)備的屏幕可見高度。 device-width 定義輸出設(shè)備的屏幕可見寬度驳规。 grid 用來查詢輸出設(shè)備是否使用柵格或點(diǎn)陣肴敛。 height 定義輸出設(shè)備中的頁面可見區(qū)域高度。 max-aspect-ratio 定義輸出設(shè)備的屏幕可見寬度與高度的最大比率达舒。 max-color 定義輸出設(shè)備每一組彩色原件的最大個(gè)數(shù)值朋。 max-color-index 定義在輸出設(shè)備的彩色查詢表中的最大條目數(shù)叹侄。 max-device-aspect-ratio 定義輸出設(shè)備的屏幕可見寬度與高度的最大比率。 max-device-height 定義輸出設(shè)備的屏幕可見的最大高度昨登。 max-device-width 定義輸出設(shè)備的屏幕最大可見寬度趾代。 max-height 定義輸出設(shè)備中的頁面最大可見區(qū)域高度。 max-monochrome 定義在一個(gè)單色框架緩沖區(qū)中每像素包含的最大單色原件個(gè)數(shù)丰辣。 max-resolution 定義設(shè)備的最大分辨率撒强。 max-width 定義輸出設(shè)備中的頁面最大可見區(qū)域?qū)挾取?/td> min-aspect-ratio 定義輸出設(shè)備中的頁面可見區(qū)域?qū)挾扰c高度的最小比率。 min-color 定義輸出設(shè)備每一組彩色原件的最小個(gè)數(shù)笙什。 min-color-index 定義在輸出設(shè)備的彩色查詢表中的最小條目數(shù)飘哨。 min-device-aspect-ratio 定義輸出設(shè)備的屏幕可見寬度與高度的最小比率。 min-device-width 定義輸出設(shè)備的屏幕最小可見寬度琐凭。 min-device-height 定義輸出設(shè)備的屏幕的最小可見高度芽隆。 min-height 定義輸出設(shè)備中的頁面最小可見區(qū)域高度。 min-monochrome 定義在一個(gè)單色框架緩沖區(qū)中每像素包含的最小單色原件個(gè)數(shù) min-resolution 定義設(shè)備的最小分辨率统屈。 min-width 定義輸出設(shè)備中的頁面最小可見區(qū)域?qū)挾取?/td> monochrome 定義在一個(gè)單色框架緩沖區(qū)中每像素包含的單色原件個(gè)數(shù)胚吁。如果不是單色設(shè)備，則值等于0 orientation 定義輸出設(shè)備中的頁面可見區(qū)域高度是否大于或等于寬度愁憔。 resolution 定義設(shè)備的分辨率腕扶。如：96dpi, 300dpi, 118dpcm scan 定義電視類設(shè)備的掃描工序。 width 定義輸出設(shè)備中的頁面可見區(qū)域?qū)挾取?/td>
-
-
響應(yīng)式表格布局
響應(yīng)式圖片
-
初級前端實(shí)踐與面試
中級前端
JavaScript
-
Javascript基礎(chǔ)
-
JavaScript介紹
- JavaScript是互聯(lián)網(wǎng)最流行腳本語言吨掌，它是輕量級語言半抱，可以嵌入html，被所有瀏覽器兼容膜宋，更可廣泛用于服務(wù)器窿侈、PC端、移動(dòng)端
-
JavaScript實(shí)現(xiàn)
可以放置在html的head和body標(biāo)簽中激蹲，一般為了不干擾頁面放在head中棉磨，不限制腳本使用數(shù)量
演示
-
JavaScript語法
語句之間可以使用分號隔開，JavaScript對大小寫敏感学辱，標(biāo)識(shí)符以字母、下劃線或美元符號開始,忽略空格
JavaScript注釋：注釋和java一樣：//單行注釋环形；/多行注釋/
JavaScript變量：通過var來定義策泣，可以有美元符號和數(shù)字
JavaScript數(shù)據(jù)類型：String、Number抬吟、Boolean萨咕、Array、Object火本、null危队、未定義聪建；通過賦值null清除變量
-
-
Javascript語法詳解
算數(shù)運(yùn)算符：+、-茫陆、*金麸、%、/簿盅、++挥下、--
賦值運(yùn)算符：=、+=桨醋、-=棚瘟、*=、/=喜最、%=
字符串操作
比較運(yùn)算符：==偎蘸、===、!=瞬内、!==迷雪、>、<遂鹊、>=振乏、<=
邏輯運(yùn)算符：&&、||秉扑、!
條件運(yùn)算符：三元運(yùn)算
Javascript函數(shù)
-
JavaScript異常處理和事件處理
異常
-
事件
事件流
事件冒泡
事件捕獲
事件對象：type慧邮、target、stopPropagetion舟陆、preventDefault
-
屬性 當(dāng)以下情況發(fā)生時(shí)误澳，出現(xiàn)此事件 FF N IE onabort 圖像加載被中斷 1 3 4 onblur 元素失去焦點(diǎn) 1 2 3 onchange 用戶改變域的內(nèi)容 1 2 3 onclick 鼠標(biāo)點(diǎn)擊某個(gè)對象 1 2 3 ondblclick 鼠標(biāo)雙擊某個(gè)對象 1 4 4 onerror 當(dāng)加載文檔或圖像時(shí)發(fā)生某個(gè)錯(cuò)誤 1 3 4 onfocus 元素獲得焦點(diǎn) 1 2 3 onkeydown 某個(gè)鍵盤的鍵被按下 1 4 3 onkeypress 某個(gè)鍵盤的鍵被按下或按住 1 4 3 onkeyup 某個(gè)鍵盤的鍵被松開 1 4 3 onload 某個(gè)頁面或圖像被完成加載 1 2 3 onmousedown 某個(gè)鼠標(biāo)按鍵被按下 1 4 4 onmousemove 鼠標(biāo)被移動(dòng) 1 6 3 onmouseout 鼠標(biāo)從某元素移開 1 4 4 onmouseover 鼠標(biāo)被移到某元素之上 1 2 3 onmouseup 某個(gè)鼠標(biāo)按鍵被松開 1 4 4 onreset 重置按鈕被點(diǎn)擊 1 3 4 onresize 窗口或框架被調(diào)整尺寸 1 4 4 onselect 文本被選定 1 2 3 onsubmit 提交按鈕被點(diǎn)擊 1 2 3 onunload 用戶退出頁面 1 2 3
-
JavaScriptDOM對象
操作html
操作css屬性
-
添加句柄(為元素動(dòng)態(tài)添加事件)
- addEventListener、removeEventListener
-
JavaScript內(nèi)置對象
基本的對象創(chuàng)建
String對象與方法
-
屬性 描述 constructor 對創(chuàng)建該對象的函數(shù)的引用 length 字符串的長度 prototype 允許您向?qū)ο筇砑訉傩院头椒?/td> -
方法 描述 anchor() 創(chuàng)建 HTML 錨秦躯。 big() 用大號字體顯示字符串忆谓。 blink() 顯示閃動(dòng)字符串。 bold() 使用粗體顯示字符串踱承。 charAt() 返回在指定位置的字符倡缠。 charCodeAt() 返回在指定的位置的字符的 Unicode 編碼。 concat() 連接字符串茎活。 fixed() 以打字機(jī)文本顯示字符串昙沦。 fontcolor() 使用指定的顏色來顯示字符串。 fontsize() 使用指定的尺寸來顯示字符串载荔。 fromCharCode() 從字符編碼創(chuàng)建一個(gè)字符串盾饮。 indexOf() 檢索字符串。 italics() 使用斜體顯示字符串。 lastIndexOf() 從后向前搜索字符串丘损。 link() 將字符串顯示為鏈接普办。 localeCompare() 用本地特定的順序來比較兩個(gè)字符串。 match() 找到一個(gè)或多個(gè)正則表達(dá)式的匹配徘钥。 replace() 替換與正則表達(dá)式匹配的子串衔蹲。 search() 檢索與正則表達(dá)式相匹配的值。 slice() 提取字符串的片斷吏饿，并在新的字符串中返回被提取的部分踪危。 small() 使用小字號來顯示字符串。 split() 把字符串分割為字符串?dāng)?shù)組猪落。 strike() 使用刪除線來顯示字符串贞远。 sub() 把字符串顯示為下標(biāo)。 substr() 從起始索引號提取字符串中指定數(shù)目的字符笨忌。 substring() 提取字符串中兩個(gè)指定的索引號之間的字符蓝仲。 sup() 把字符串顯示為上標(biāo)。 toLocaleLowerCase() 把字符串轉(zhuǎn)換為小寫官疲。 toLocaleUpperCase() 把字符串轉(zhuǎn)換為大寫袱结。 toLowerCase() 把字符串轉(zhuǎn)換為小寫。 toUpperCase() 把字符串轉(zhuǎn)換為大寫途凫。 toSource() 代表對象的源代碼垢夹。 toString() 返回字符串。 valueOf() 返回某個(gè)字符串對象的原始值维费。 -
Date對象
-
屬性 描述 constructor 返回對創(chuàng)建此對象的 Date 函數(shù)的引用果元。 prototype 使您有能力向?qū)ο筇砑訉傩院头椒ā?/td> -
方法 描述 Date() 返回當(dāng)日的日期和時(shí)間。 getDate() 從 Date 對象返回一個(gè)月中的某一天 (1 ~ 31)犀盟。 getDay() 從 Date 對象返回一周中的某一天 (0 ~ 6)而晒。 getMonth() 從 Date 對象返回月份 (0 ~ 11)。 getFullYear() 從 Date 對象以四位數(shù)字返回年份阅畴。 getYear() 請使用 getFullYear() 方法代替倡怎。 getHours() 返回 Date 對象的小時(shí) (0 ~ 23)。 getMinutes() 返回 Date 對象的分鐘 (0 ~ 59)贱枣。 getSeconds() 返回 Date 對象的秒數(shù) (0 ~ 59)监署。 getMilliseconds() 返回 Date 對象的毫秒(0 ~ 999)。 getTime() 返回 1970 年 1 月 1 日至今的毫秒數(shù)纽哥。 getTimezoneOffset() 返回本地時(shí)間與格林威治標(biāo)準(zhǔn)時(shí)間 (GMT) 的分鐘差焦匈。 getUTCDate() 根據(jù)世界時(shí)從 Date 對象返回月中的一天 (1 ~ 31)。 getUTCDay() 根據(jù)世界時(shí)從 Date 對象返回周中的一天 (0 ~ 6)昵仅。 getUTCMonth() 根據(jù)世界時(shí)從 Date 對象返回月份 (0 ~ 11)。 getUTCFullYear() 根據(jù)世界時(shí)從 Date 對象返回四位數(shù)的年份。 getUTCHours() 根據(jù)世界時(shí)返回 Date 對象的小時(shí) (0 ~ 23)摔笤。 getUTCMinutes() 根據(jù)世界時(shí)返回 Date 對象的分鐘 (0 ~ 59)够滑。 getUTCSeconds() 根據(jù)世界時(shí)返回 Date 對象的秒鐘 (0 ~ 59)。 getUTCMilliseconds() 根據(jù)世界時(shí)返回 Date 對象的毫秒(0 ~ 999)吕世。 parse() 返回1970年1月1日午夜到指定日期（字符串）的毫秒數(shù)彰触。 setDate() 設(shè)置 Date 對象中月的某一天 (1 ~ 31)。 setMonth() 設(shè)置 Date 對象中月份 (0 ~ 11)命辖。 setFullYear() 設(shè)置 Date 對象中的年份（四位數(shù)字）况毅。 setYear() 請使用 setFullYear() 方法代替。 setHours() 設(shè)置 Date 對象中的小時(shí) (0 ~ 23)尔艇。 setMinutes() 設(shè)置 Date 對象中的分鐘 (0 ~ 59)尔许。 setSeconds() 設(shè)置 Date 對象中的秒鐘 (0 ~ 59)。 setMilliseconds() 設(shè)置 Date 對象中的毫秒 (0 ~ 999)终娃。 setTime() 以毫秒設(shè)置 Date 對象味廊。 setUTCDate() 根據(jù)世界時(shí)設(shè)置 Date 對象中月份的一天 (1 ~ 31)。 setUTCMonth() 根據(jù)世界時(shí)設(shè)置 Date 對象中的月份 (0 ~ 11)棠耕。 setUTCFullYear() 根據(jù)世界時(shí)設(shè)置 Date 對象中的年份（四位數(shù)字）余佛。 setUTCHours() 根據(jù)世界時(shí)設(shè)置 Date 對象中的小時(shí) (0 ~ 23)。 setUTCMinutes() 根據(jù)世界時(shí)設(shè)置 Date 對象中的分鐘 (0 ~ 59)窍荧。 setUTCSeconds() 根據(jù)世界時(shí)設(shè)置 Date 對象中的秒鐘 (0 ~ 59)辉巡。 setUTCMilliseconds() 根據(jù)世界時(shí)設(shè)置 Date 對象中的毫秒 (0 ~ 999)。 toSource() 返回該對象的源代碼蕊退。 toString() 把 Date 對象轉(zhuǎn)換為字符串郊楣。 toTimeString() 把 Date 對象的時(shí)間部分轉(zhuǎn)換為字符串。 toDateString() 把 Date 對象的日期部分轉(zhuǎn)換為字符串咕痛。 toGMTString() 請使用 toUTCString() 方法代替痢甘。 toUTCString() 根據(jù)世界時(shí)，把 Date 對象轉(zhuǎn)換為字符串茉贡。 toLocaleString() 根據(jù)本地時(shí)間格式塞栅，把 Date 對象轉(zhuǎn)換為字符串。 toLocaleTimeString() 根據(jù)本地時(shí)間格式腔丧，把 Date 對象的時(shí)間部分轉(zhuǎn)換為字符串放椰。 toLocaleDateString() 根據(jù)本地時(shí)間格式，把 Date 對象的日期部分轉(zhuǎn)換為字符串愉粤。 UTC() 根據(jù)世界時(shí)返回 1970 年 1 月 1 日 到指定日期的毫秒數(shù)砾医。 valueOf() 返回 Date 對象的原始值。
-
array對象
Math對象
-
JavaScriptDom對象控制HTML元素詳解
-
屬性：
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="" cid="n1564" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: inherit; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; position: relative !important; padding: 10px 30px; border: 1px solid; width: inherit;">document.body.offsetHeight
document.body.offsetWidth
</pre> -
方法 描述 getElementById() 返回帶有指定 ID 的元素衣厘。 getElementsByTagName() 返回包含帶有指定標(biāo)簽名稱的所有元素的節(jié)點(diǎn)列表（集合/節(jié)點(diǎn)數(shù)組）如蚜。 getElementsByClassName() 返回包含帶有指定類名的所有元素的節(jié)點(diǎn)列表压恒。 appendChild() 把新的子節(jié)點(diǎn)添加到指定節(jié)點(diǎn)。 removeChild() 刪除子節(jié)點(diǎn)错邦。 replaceChild() 替換子節(jié)點(diǎn)探赫。 insertBefore() 在指定的子節(jié)點(diǎn)前面插入新的子節(jié)點(diǎn)。 createAttribute() 創(chuàng)建屬性節(jié)點(diǎn)撬呢。 createElement() 創(chuàng)建元素節(jié)點(diǎn)伦吠。 createTextNode() 創(chuàng)建文本節(jié)點(diǎn)。 getAttribute() 返回指定的屬性值魂拦。 setAttribute() 把指定屬性設(shè)置或修改為指定的值毛仪。
-
-
JavaScript瀏覽器對象
window對象
計(jì)時(shí)器：setTimeout椭懊、setInterval
-
History對象：返回歷史記錄地址集合
- back带膀、forward、go方法
-
Location對象
location.hostname:返回web主機(jī)的域名
location.pathname:返回當(dāng)前頁面的路徑和文件名
location.port
location衩侥。protocol//返回所使用的web協(xié)議
location.href//返回當(dāng)前頁面url
location.assign()//加載新的文檔
Screen對象
Navigator對象
彈出窗口
Cookies對象
JavaScript瀑布流
JavaScript面向?qū)ο笤斀?/p>
-
JavaScript正則表達(dá)式
正則定義
-
正則使用
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="" cid="n1654" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: inherit; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; position: relative !important; padding: 10px 30px; border: 1px solid; width: inherit;">//test方法
ar pat = /my/;
var str = "this is my code...";
console.log(pat.test(str)); // true
//exec
var pat = /hello/;
console.log(pat.exec("oh hello world")); //返還hello
//不區(qū)分大小寫
var str = "Visit Hunger";
var patt1 = /hunger/i;
console.log(str.match(patt1)); //全局匹配
var str="hello hunger valley! I am hunger"; var patt1=/hunger/g; console.log(str.match(patt1)); //不區(qū)分大小寫借尿，全局匹配 var str="hell
//字符串正則
Hunger valley! I am hunger";
var patt1=/hunger/gi;
console.log(str.match(patt1));
//search
var str="Visit W3School!";
console.log(str.search(/w3school/)); //-1 console.log(str.serach(/w3school/i)); //
//replace
var str="Hello JI! oh I am hunger"
console.log(str.replace(/Hunger/, "valley")); console.log(str.replace(/hunger/ig, "hunger"));
//split
var str = "Hello Hunger , oh I am Hunger";
str.split("");
str.split(/\s+/);
</pre>
Jquery
-
認(rèn)識(shí)Jquery
-
是簡化js的一個(gè)函數(shù)庫刨晴，包含的功能;Jquery通過美元符號定義，通過(selector)選擇元素路翻，action()執(zhí)行操作->
HTML元素選取與操作
CSS操作
HTML函數(shù)事件
JavaScript特效和動(dòng)畫
HTML DOM遍歷和修改
AJAX
Utilities
-
-
Jquery選擇器和事件
常用元素狈癞、類、id選擇器
-
事件
常用事件方法
綁定事件
解除綁定事件
事件的目標(biāo)
事件的冒泡
自定義事件
-
JqueryHTML元素相關(guān)操作
修改屬性與回調(diào)
添加元素
刪除元素remove和刪除內(nèi)容empty
-
jQuery元素的遍歷與過濾
向下遍歷：children | find
向上遍歷：parentsUntil | parents |parent
同級遍歷：nextAll | nextUntil | prev |next | preUntil
過濾：first | last | eq | filter |not
-
Jquery盒子模型和CSS操作與動(dòng)畫
-
Jquery的效果
jQuery隱藏與顯示
jQuery淡入淡出
jQuery滑動(dòng)
jQuery動(dòng)畫與停止
jQuery Callback
jQuery chaining
-
Jquery的Ajax異步
jquery的擴(kuò)展與noConflict
jquery 菜單
-
jQueryUI是包含底層用戶交互茂契、動(dòng)畫蝶桶、特效和可換主題的可視控件
-
jQuery下載與使用
- jQuery包含交互、小部件和效果庫
jQuery UI Interactions
-
jQuery Widgets
- accordion | dilog |button | progressbar |datePicker | menu |slider |spinner |table
-
Backbone框架
-
單頁面應(yīng)用
-
優(yōu)點(diǎn)
前后端分離
減輕服務(wù)器壓力
更好的用戶體驗(yàn)
-
缺點(diǎn)
SEO收錄空難
瀏覽歷史問題
初次加載問題
-
AngularJS
-
AngularJS四個(gè)核心思想
依賴注入
模塊化
雙向綁定
語義化標(biāo)簽
-
Cordova是驅(qū)動(dòng)PhoneGap的核心引擎
- 命令行方式創(chuàng)建一個(gè)移動(dòng)端項(xiàng)目
Bootstrap
Bootstrap簡介
Bootstrap柵格掉冶、代碼和表格
Bootstrap表單真竖、按鈕和圖片
Bootstrap之下拉菜單、按鈕組厌小、按鈕式下拉菜單
Bootstrap輸入框組恢共、導(dǎo)航和導(dǎo)航條
Bootstrap媒體對象、面板和well
Bootstrap過渡效果璧亚、模態(tài)框和下拉菜單
Bootstrap基本組件
Bootstrap警告框讨韭、進(jìn)度條和列表組
Bootstrap滾動(dòng)監(jiān)聽、標(biāo)簽頁和工具提示
-
Bootstrap實(shí)踐與進(jìn)階
- gunt與less重新定義bootstrap
subline或webstrom開發(fā)工具快速生成代碼
<h2>web編輯器代碼快速生成</h2>>
<h3>子代>：div>ul>li</h3>
<div>
<ul>
<li></li>
</ul>
</div>
<h3>兄弟節(jié)點(diǎn)+:div+p+bd</h3>
<div></div>
<p></p>
<div></div>
<h3>父代:div+div>p>span+emheader</h3>
<div></div>
<div>
<p><span></span><em></em></p>
<header></header>
</div>
<h3>重復(fù):ul>li5</h3>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<h3>成組:(div>dl>(dt+dd)*3)+footer>p</h3>
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>
<h3>id#代替,class點(diǎn)代替:div#header+div.page+div#footer.class1.class2.class3</h3>
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>
<h3>屬性[]:td[title="helloword" colspan=3]</h3>
<td title="helloword" colspan="3"></td>
