17年項目工作知識點小總結------彭記（022）
阿新 • • 發佈：2017-09-08
oca sna 繼承 代碼 java ima 對象 掌握 完全
時間永遠是過的最快的，對於現在的我來說，忙碌的工作中不斷的學習，不斷的成長，已經正能量滿滿。17年已過大半，對
這段時間的工作和項目知識點做一個小結，重新整理一下小知識點。
總結分一下幾大塊：
HTML5：
1、新特性：語義特性,本地存儲特性,設備兼容特性,連接特性,網頁多媒體特性,三維、圖形及特效特性,性能與集成特性
a.語義化更好的內容標簽(header,nav,footer,aside,article,section)
b.表單控件,calendar、date、time、email、url、search
c.音頻、視頻 API(audio,video) 自定義播放器案例
d.地理定位(Geolocation) API 掌握獲取、使用第三方 API 方法
e.拖拽釋放(Drag and drop) API 給元素設置 draggable = "true" 屬性使其可拖動,鏈接和圖片默認可拖動
f. WEB 存儲 API 只能存儲字符串
localStorage 長期存儲,瀏覽器關閉後數據不丟失;sessionStorage 臨時存儲,不共享,關閉頁面數據丟失
g.畫布(Canvas) API
h.新的技術 webworker, websocket, Geolocation(作為了解)
2、HTML5 和 CSS3 的新標簽
HTML5:canvas , audio , video , datalist , keygen ,meter, header, footer, nav, section, article, aside,
CSS3:RGBA, text-shadow, box-shadow, border-radius, border-image,border-color, transform, transition,
animation, linear-gradient, radial-gradient, flex
--等等--
CSS註意點：
1.CSS中選擇器的優先級為:
!important > 行內樣式 > id > class > tag > 通配符 > 繼承 > 默認
權重算法:(不標準,但可以幫助理解)-用 1 表示派生選擇器的優先級、用 10 表示類選擇器的優先級、用 100 表示 ID 選
擇器的優先級--在項目中用到插件時，想要改變其樣式，往往會出現權重不夠沒有效果，這時就應該想到增加權重來解決。
2.CSS中隱藏元素:
基本的: 設置 display :none;(不占位置),或者設置 visibility :hidden(占位置)
註意兩者的區別--使用 display:none 屬性後,HTML 元素(對象)的寬度、高度等各種屬性值都將"丟失";而使用
visibility:hidden 屬性
後,HTML 元素(對象)僅僅是在視覺上看不見(完全透明),而它所占據的空間位置仍然存在.
技巧性: 設置寬高為 0,設置透明度為 0,設置 z-index 位置在-9999
3.CSS中透明效果實現:
rgba()和 opacity 的透明效果是有所不同的
opacity 作用於元素,以及元素內的所有內容的透明度
rgba()只作用於元素的顏色或其背景色.(設置 rgba 透明的元素的子元素不會繼承透明效果！)
--等等--
JS:
1、JavaScript：
弱類型:聲明變量都使用 var(ES6 中有 let 和 const)
動態類型:聲明時類型不定,運行時才明確變量類型;對象可以隨意添加屬性、方法
解析型:遇到一行解析一行(區別是編譯型全解析後再執行)
腳本語言:不需要編譯,直接執行
2、javascript 的本地對象、內置對象和宿主對象：
本地對象為 array、obj、regexp 等可以 new 實例化
內置對象為 Global、Math 等不可以實例化的(也是本地對象,Global 不存在,但是類似於 isNaN()、parseInt()和
parseFloat()方
法都是他的方法)
宿主對象為瀏覽器提供的對象,所有的 BOM 和 DOM,如 document,window
3、日期對象的常用方法：
var date = new Date(); var year = date.getFullYear(); //獲取年
var month = date.getMonth(); //獲取月份獲取的月份從 0 開始
var day = date.getDate(); //獲取日,每個月當中的第幾天
var week = date.getDay(); //獲取星期幾 0 代表星期日 6 代表星期六
var hour = date.getHours(); //獲取小時 0 - 23
var minutes = date.getMinutes(); //獲取分 0 - 59
var second = date.getSeconds(); //獲取秒 0 - 59
var ms = date.getMilliseconds(); //獲取毫秒 0-999
var tatolms = date.getTime(); //獲取時間的總的毫秒數
4、添加刪除替換插入到某個節點的方法：
obj.appendChild() //追加子節點
obj.insertBefore() //插入子節點,參數 2 為 null 時等同於 appendChild
obj.replaceChild() //替換子節點,參數:新節點、舊節點(應該是沒用過)
obj.removeChild() //刪除子節點
此外,jQuery 還提供了 append、perpend、after、before,appendTo、prependTo、insertAfter、insertBefore
5、短路表達式foo = foo||bar：
等同於 if(!foo) foo = bar;如果 foo 存在,值不變,否則把 bar 的值賦給 foo. 作為"&&"和"||"操作符的操作數表達式,
這些表達式在進行求值時,只要最終的結果已經可以確定是真或假,求值過程便告
終止,這稱之為短路求值.
6、js 數組類型中常用的方法
concat() 連接兩個或更多的數組,並返回結果.
join() 把數組的所有元素放入一個字符串.元素通過指定的分隔符進行分隔.
pop() 刪除並返回數組的最後一個元素
push() 向數組的末尾添加一個或更多元素,並返回新的長度.
reverse() 顛倒數組中元素的順序.
shift() 刪除並返回數組的第一個元素
slice() 從某個已有的數組返回選定的元素
sort() 對數組的元素進行排序
splice() 刪除元素,並向數組添加新元素.
toSource() 返回該對象的源代碼.
toString() 把數組轉換為字符串,並返回結果.
toLocaleString() 把數組轉換為本地數組,並返回結果.
unshift() 向數組的開頭添加一個或更多元素,並返回新的長度.
valueOf() 返回數組對象的原始值
7、apply 和 call 方法的異同
call 和 apply 都是為了改變某個函數運行時的 context 即上下文而存在的,換句話說,就是為了改變函數體內部 this 的
指向.因為 JavaScript 的函數存在「定義時上下文」和「運行時上下文」以及「上下文是可以改變的」這樣的概念. 二者
的作用完全一樣,只是接受參數的方式不太一樣,參數 1 是 this ,all 需要把參數按順序傳遞進去,而 apply 則是把參數
放在數組裏
8、數組和對象有哪些原生方法,列舉一下??
1.Array.concat() //數組拼接
2.Array.push() //向數組尾部添加元素
3.Array.pop() //從數組尾部刪除元素
4.Array.shift() //從數組頭部刪除元素
5.Array.unshift() //向數組頭部刪除元素
6.Array.slice() //返回數組的一部分
7.Array.splice() //插入,刪除或替換元素
8.Array.reverse() //顛倒數組中元素的順序
9.Array.sort() //對數組進行排序
10.Array.toString() //將數組轉換成一個字符串
11.Array.valueOf() //
12.Array.join() //將數組元素連接起來以構建一個字符串
13.Array.length() //數組的長度
14.Array.toLocalString() //把數組轉換成局部字符串
時間關系，就總結到這裏哈
這段時間的工作和項目知識點做一個小結，重新整理一下小知識點。
總結分一下幾大塊：
HTML5：
1、新特性：語義特性,本地存儲特性,設備兼容特性,連接特性,網頁多媒體特性,三維、圖形及特效特性,性能與集成特性
a.語義化更好的內容標簽(header,nav,footer,aside,article,section)
b.表單控件,calendar、date、time、email、url、search
c.音頻、視頻 API(audio,video) 自定義播放器案例
d.地理定位(Geolocation) API 掌握獲取、使用第三方 API 方法
e.拖拽釋放(Drag and drop) API 給元素設置 draggable = "true" 屬性使其可拖動,鏈接和圖片默認可拖動
f. WEB 存儲 API 只能存儲字符串
localStorage 長期存儲,瀏覽器關閉後數據不丟失;sessionStorage 臨時存儲,不共享,關閉頁面數據丟失
g.畫布(Canvas) API
h.新的技術 webworker, websocket, Geolocation(作為了解)
2、HTML5 和 CSS3 的新標簽
HTML5:canvas , audio , video , datalist , keygen ,meter, header, footer, nav, section, article, aside,
CSS3:RGBA, text-shadow, box-shadow, border-radius, border-image,border-color, transform, transition,
animation, linear-gradient, radial-gradient, flex
--等等--
CSS註意點：
1.CSS中選擇器的優先級為:
!important > 行內樣式 > id > class > tag > 通配符 > 繼承 > 默認
權重算法:(不標準,但可以幫助理解)-用 1 表示派生選擇器的優先級、用 10 表示類選擇器的優先級、用 100 表示 ID 選
擇器的優先級--在項目中用到插件時，想要改變其樣式，往往會出現權重不夠沒有效果，這時就應該想到增加權重來解決。
2.CSS中隱藏元素:
基本的: 設置 display :none;(不占位置),或者設置 visibility :hidden(占位置)
註意兩者的區別--使用 display:none 屬性後,HTML 元素(對象)的寬度、高度等各種屬性值都將"丟失";而使用
visibility:hidden 屬性
後,HTML 元素(對象)僅僅是在視覺上看不見(完全透明),而它所占據的空間位置仍然存在.
技巧性: 設置寬高為 0,設置透明度為 0,設置 z-index 位置在-9999
3.CSS中透明效果實現:
rgba()和 opacity 的透明效果是有所不同的
opacity 作用於元素,以及元素內的所有內容的透明度
rgba()只作用於元素的顏色或其背景色.(設置 rgba 透明的元素的子元素不會繼承透明效果！)
--等等--
JS:
1、JavaScript：
弱類型:聲明變量都使用 var(ES6 中有 let 和 const)
動態類型:聲明時類型不定,運行時才明確變量類型;對象可以隨意添加屬性、方法
解析型:遇到一行解析一行(區別是編譯型全解析後再執行)
腳本語言:不需要編譯,直接執行
2、javascript 的本地對象、內置對象和宿主對象：
本地對象為 array、obj、regexp 等可以 new 實例化
內置對象為 Global、Math 等不可以實例化的(也是本地對象,Global 不存在,但是類似於 isNaN()、parseInt()和
parseFloat()方
法都是他的方法)
宿主對象為瀏覽器提供的對象,所有的 BOM 和 DOM,如 document,window
3、日期對象的常用方法：
var date = new Date(); var year = date.getFullYear(); //獲取年
var month = date.getMonth(); //獲取月份獲取的月份從 0 開始
var day = date.getDate(); //獲取日,每個月當中的第幾天
var week = date.getDay(); //獲取星期幾 0 代表星期日 6 代表星期六
var hour = date.getHours(); //獲取小時 0 - 23
var minutes = date.getMinutes(); //獲取分 0 - 59
var second = date.getSeconds(); //獲取秒 0 - 59
var ms = date.getMilliseconds(); //獲取毫秒 0-999
var tatolms = date.getTime(); //獲取時間的總的毫秒數
4、添加刪除替換插入到某個節點的方法：
obj.appendChild() //追加子節點
obj.insertBefore() //插入子節點,參數 2 為 null 時等同於 appendChild
obj.replaceChild() //替換子節點,參數:新節點、舊節點(應該是沒用過)
obj.removeChild() //刪除子節點
此外,jQuery 還提供了 append、perpend、after、before,appendTo、prependTo、insertAfter、insertBefore
5、短路表達式foo = foo||bar：
等同於 if(!foo) foo = bar;如果 foo 存在,值不變,否則把 bar 的值賦給 foo. 作為"&&"和"||"操作符的操作數表達式,
這些表達式在進行求值時,只要最終的結果已經可以確定是真或假,求值過程便告
終止,這稱之為短路求值.
6、js 數組類型中常用的方法
concat() 連接兩個或更多的數組,並返回結果.
join() 把數組的所有元素放入一個字符串.元素通過指定的分隔符進行分隔.
pop() 刪除並返回數組的最後一個元素
push() 向數組的末尾添加一個或更多元素,並返回新的長度.
reverse() 顛倒數組中元素的順序.
shift() 刪除並返回數組的第一個元素
slice() 從某個已有的數組返回選定的元素
sort() 對數組的元素進行排序
splice() 刪除元素,並向數組添加新元素.
toSource() 返回該對象的源代碼.
toString() 把數組轉換為字符串,並返回結果.
toLocaleString() 把數組轉換為本地數組,並返回結果.
unshift() 向數組的開頭添加一個或更多元素,並返回新的長度.
valueOf() 返回數組對象的原始值
7、apply 和 call 方法的異同
call 和 apply 都是為了改變某個函數運行時的 context 即上下文而存在的,換句話說,就是為了改變函數體內部 this 的
指向.因為 JavaScript 的函數存在「定義時上下文」和「運行時上下文」以及「上下文是可以改變的」這樣的概念. 二者
的作用完全一樣,只是接受參數的方式不太一樣,參數 1 是 this ,all 需要把參數按順序傳遞進去,而 apply 則是把參數
放在數組裏
8、數組和對象有哪些原生方法,列舉一下??
1.Array.concat() //數組拼接
2.Array.push() //向數組尾部添加元素
3.Array.pop() //從數組尾部刪除元素
4.Array.shift() //從數組頭部刪除元素
5.Array.unshift() //向數組頭部刪除元素
6.Array.slice() //返回數組的一部分
7.Array.splice() //插入,刪除或替換元素
8.Array.reverse() //顛倒數組中元素的順序
9.Array.sort() //對數組進行排序
10.Array.toString() //將數組轉換成一個字符串
11.Array.valueOf() //
12.Array.join() //將數組元素連接起來以構建一個字符串
13.Array.length() //數組的長度
14.Array.toLocalString() //把數組轉換成局部字符串
時間關系，就總結到這裏哈
17年項目工作知識點小總結------彭記（022）