前端知識點總結

前端知識點總結

1 HTML

1.1 組成

HTML標籤： 單 雙 HTML標籤屬性 class id 

1.2 HTML標籤

# 頁面結構標籤 html body head # HEAD 頭部標籤 meta title style link  script # 格式標籤 p h1~6 pre br hr # 文本標籤 em strong sub sup del ins i # 列表 ul ol li dl dt dd # 表格 table thead tbody tfoot tr td th caption td屬性 colspan rowspan # 表單 form input 屬性  type maxlength size value placeholder autocomplete='on/off' max min step name pattern multiple type: text / password / radio / checkbox / button / submit / reset / email / number / tel / search / date / time / week / datetime-local / range / url / file select multiple option textarea label button 

1.3 塊狀元素好內聯元素

#塊狀 塊級 獨佔一行 div p hr br tr table header footer h1 h2 h3 ... 佈局的元素 格式類 列表 #內聯 行內 span em strong a img input button sub sup del ... 文本類、表單控件 

2 CSS

2.1 CSS選擇器

# 基本選擇器 #idName .className tagName * # 層級選擇器 s1 s2 s1>s2 s1+s2 s1~s2 # 屬性選擇器 [attrName] [attrName=value] [attrName*=value] [attrName^=value] [attrName$=value] # 僞類選擇器 :link :visited :hover :active :focus :first-child li:first-child :last-child :nth-child(n) :last-nth-child(n) :only-child :first-of-type :last-of-type :nth-of-type(n) :last-nth-of-type(n) :only-of-type() # 僞元素選擇器 ::before content:'' ::after ::first-letter ::first-line ::placeholder ::selection 

2.2 取值

長度單位 px em 百分比 rem 顏色單位 colorName rgb() rgba() HEX 十六進制 hsl() hsla() 

2.3 CSS屬性

# 字體 font-family font-size font-weight font-style font-variant: small-caps font 複合屬性 # 文本 text-align: vertical-align: 長度單位 line-height text-decoration: underline/overline/line-through/none word-wrap: white-space:pre/pre-line/nowrap word-spacing letter-spacing text-indent # 顏色 color opacity: 不透明度 # 背景 background backgorund-color background-image background-repeat background-postion background-attachment background-size: cover / contain / 長度 # 邊框 border border-color border-width border-style border-top border-top-width border-top-color border-bottom-style .... border-radius border-top-left-radius ... box-shadow # 列表 list-style list-style-type list-style-position list-style-image # 表格 table-layout border-collapse border-spacing empty-cells caption-side # 浮動 float clear # 定位 postion:relative / absolute / fixed left top right bottom z-index # 佈局 display overflow overflow-x overflox-y width height max-width min-width max-height min-height box-sizing: border-box / content-box # 外邊距 margin margin-left margin-top margin-right margin-bottom # 內邊距 padding padding-left padding-right padding-top padding-bottom # 變換 transform: translate() translatex() translate() rotate() skew() skeyx() skewy() transform-origin # 過渡 transition-name transition-duration transition-timing-function：ease / linear transition-delay transition # 動畫 @keyframes 動畫名稱 { 0% { } 100% { } } animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state:runing pasued # CSS3 網絡字體 字體圖標 # 其餘 * 漸變 

3 JavaScript

3.1 基本語法

指令結束符 ；或者換行 註釋 // /* */ 變量 變量名規範 (不能是關鍵字) 

3.2 數據類型

String Number Boolean Null Undefined Object Array Function ........ RegExp 

3.3 運算符

算術 ++ -- + - * / % **（ES6） 比較 > >= < <= == != === !== 邏輯 && || ! 位運算符 賦值 = += -= /= *= %= 其餘 +(字符串拼接) typeof delete ?: 

3.4 內置對象

# String對象 length substr() substring() slice() indexOf() lastIndexOf() search() 能夠寫正則 split() trim() # Number toFixed() toString() # Array length --------------------- push() unshift() pop() shift() splice() reverse() sort() -------------------- concat() join() indexOf() lastIndexOf() ---------------------- forEach() map() filter() some() every() reduce() # Function apply() call() # Math PI abs() pow() max() min() ceil() floor() round() random() # Date getFullYear() getMonth() getDate() getDay() getHours() getMinutes() getSeconds() getMilliseconds() getTime() getUTC.... set... setUTC... #RegRxp test() exec() 字符串方法： search() match() replace() 

4 BOM/DOM

4.1 BOM

瀏覽器對象模型 #window 瀏覽器中運行JS的全局對象 setInterval() setTimeout() clearInterval() clearTimeout() alert() confirm() prompt() innerWidth innerHeight #histroy back() go() forward() #navigator userAgent #screen #location href path hostname hash ..... 

4.2 DOM

文檔對象模型 獲取頁面元素 querySelector() querySelectorAll() 操做元素的內容、屬性、樣式 document document.body body元素 document.documentElement html元素 

4.3 事件 Event

# 綁定事件 dom.addEventLister() dom.on事件 = function(){} <p onclick="code..."> # 事件 鼠標 click dblclick contextmenu mouseenter mouseleave mousemove mousedown mouseup 鍵盤 keydown keyup keypress 表單 blur focus submit reset select change input 文檔 load unload beforeunload 圖片 load error abort 其餘 scroll resize # Event對象 keyCode clientX/clientY offsetX/offsetY pageX/pageY button target stopPropagation() preventDefault() 

5 jQuery JS庫

5.1 基礎

jquery DOM 對象 和 JS dom區別 、 轉換 連貫操做 

5.2 選擇器

# 基礎選擇器 # 屬性選擇器 [attr!=value] # 子元素選擇器 child和of-type # 層級選擇器 # 過濾 基本篩選器 :first :last :eq(index) :even :odd :lt(index) :gt(index) :not(選擇器） li:not('.item') li.item # 內容 : contains(context) : has(選擇器) ：parent : empty # 可見性選擇器 :hidden :visible # 表單 :input .... # 表單對象 :disabled :enabled :checked :selected 

5.3 篩選器

# 過濾 first() last() eq(index) not() filter() has() slice() # 查找 parent() parents() offsetParent() parentsUntil() children() find(選擇器) prev() prevAll() prevUntil() next() nextAll() nextUntil() siblings() closest(選擇器) # 串聯 add(選擇器) addBack() end() 

5.4 DOM操做 文檔操做

# 內部插入 append() appendTo() prepend() prependTo() # 外部插入 after() insertAfter() before() insertBefore() # 包裹 wrap() wrapAll() wrappInner() unwrap() # 替換 replaceWith() replaceAll() # 刪除 empty() remove() # 克隆 clone() 

5.5 樣式操做

#css css() # 尺寸 width() / height() innerWidth() / innerHeight() outerWidth() / outerHeight() # 位置 offset() postion() scrollLeft() scrollTop() 

5.6 屬性

# 屬性 attr() removeAttr() prop() removeProp() # class addClass() removeClass() toggleClass() hasClass() # 取值 text() html() val() 

5.7 事件

#綁定 on() one()  #解除綁定 off()  #委派 父元素.on('事件', ‘子元素’， fn)  # 自動觸發事件 $('btn').trigger('click')  # jqueyr 事件  # Event 

5.8 jQuery 動畫

# 基本 show() hide() toggle() # 滑動 slideUp() slideDown() slideToggle() # 淡入淡出 fadeIn() fadeOut() fadeToggle() fadeTo() # 自定義動畫 animate() # 動畫控制 delay() finish() stop() 

5.9 jquery插件

6 Boostrap UI樣式庫

6.1 基礎

響應式 media bootstrap.css bootstrap.js 依賴於jquery 

6.2 佈局

柵格系統 表格 表單 ..... 

6.3 組件

字體圖標 按鈕 導航條 .. 

6.4 插件

模態框 輪播圖 ..... 

7 Vue JS框架

7.1 Vue實例

new Vue ({ el:, template:, render:, data:, computed:, watch:, methods: //鉤子 created:function(){}, mounted: function(){} }) 

7.2 Vue視圖語法 （模板語法）

# 插值 {{}} v-html v-text v-once # 屬性綁定 v-bind:屬性名 :屬性名 # 指令 v-for v-else-if v-html v-text v-once v-bind v-on ... # 樣式綁定 :class="{}" :style="{}" # 條件渲染 v-if v-else v-else-if v-show # 列表渲染 v-for key # 事件 v-on:事件 @事件 修飾符 .stop .prevent 鍵盤修飾符 系統按鍵的修飾符 # 表單 v-model 文本框 checkbox radio select 修飾 v-model.number .trim .lazy 

7.3 組件

# 註冊組件 Vue.component(組件名, { props data: function(){ } 同vue實例 comonents: { 局部組件 } })； # 組件通訊 父組件->子組件 prop 子組件->父組件 $emit() 自定義事件 # 插槽 # 動態組件 <component is="組件名"> 

7.4 項目

# 前端工具 支持環境 node.js  # 包管理工具 npm  # 模塊化 webpack ...  # 自動化工具 grunt glup webpack  # Vue全家桶 vue vue-router vuex vue-ssr 服務端渲染 element-ui