實用技巧

1 從頁面中獲取元素

document.getElementById()   根據ID的值
document.getElementsByTagName()   根據標簽名 
document.getElmenntsByClassName()  根據class的值
document.getElementsByName()  根據name屬性的值
document.querySelector(css選擇器)  返回滿足條件的第一個 元素對象
document.querySelectorAll(css選擇器)   返回所有滿足條件元素組成的 類數組對象

2 給元素綁定事件

先獲取元素
ele.onclick = function(){
    
}
?
獲取元素的類數組對象， 遍歷，挨個給每個元素綁定事件
 

3 修改元素的CSS樣式

ele.style.css屬性名
ele.style.background
ele.style.border
ele.style.backgroundColor
ele.style[‘background-color‘]

4 設置元素的class值

ele.className 可以賦值，也可以獲取
ele.classList.add(‘值’) 添加一個class值
ele.classList.remove(‘值’) 刪除一個class值
ele.classList.toggle(‘值’)  自動切換一個class值(有就刪除，沒有就添加)

5 事件

onclick         單擊
ondblclick      雙擊
oncontextmenu   右擊
onmouseover/onmouseenter       鼠標懸浮到元素上
onmouseout/onmouseleave        鼠標離開元素
onmousemove   鼠標在上面移動
onmousedown   鼠標的按鍵按下
onmouseup     鼠標的按鍵擡起
 

6 JS定時

單次定時

setTimeout(fn, delay)
clearTimeout()  清除定時

多次定時

setInterval(fn, dealy)
clearInterval()  清除定時

JavaScript 內置對象

1 Number

1.1 屬性

• MAX_VALUE JS可以表示的最大的數字
• MIN_VALUE JS可以表示的最小的數字

1.2 方法

• toFixed(length) 指定保留長度的小數
• toExponential() 用科學計數法表示
• toPrecision(length) 要求數字按照指定長度顯示 整數+小數
• toString(number) 把數字轉換為字符串 可以按照指定的 進制 返回

2 String

2.1 屬性

• length 字符串長度

2.2 方法

• charAt(index) 返回指定位置的字符
• concat(string) 連接字符串
• indexOf(str) 返回小字符串在字符串對象中第一次出現位置 -1表示不存在
• lastIndexOf() 返回小字符在字符串中最後一次出現的位置
• substr(start, length) 截取字符串 省略長度截取到結束
• substring(start, end) 截取字符串, 省略結束位置 一直到最後
• slice(start, end) 與substring 一模一樣
• split(char) 把字符串分割為數組
• toUpperCase() 把字符串轉為大寫
• toLowerCase() 把字符串轉為小寫
• match() 匹配字符串 可用正則
• search() 查找字符串 可用正則
• replace(舊, 新) 替換字符串可用正則，替換 只能替換一次
• charCodeAt() 返回在指定的位置的字符的 Unicode 編碼。
• String.formCharCode() 從字符編碼創建一個字符串。

3 Array

3.1 創建數組

• 使用直接量 []
• 構造函數方式 new Array()

var list = [item1, item2, item3 ...]
var list = new Array()

3.2 數組特點

• 索引必須連續
• 如果索引不連續，會產生稀疏數組

3.3 數組的遍歷(叠代)

• for 循環遍歷

• for (var i = 0; i < arr.length; i ++) {
  arr[i]
  }

• for...in 循環

• for (var i in arr) {
  arr[i]
  }

• for...of 循環

• 推薦 數組方法 forEach
  arr.forEach(function(val, index){
  
  })

3.4 數組元素的添加和刪除

添加

• 為新索引賦值
• 利用數組長度,在數組尾部插入新元素

• list.push() 最後面
  list.unshift() 最前面
  list.splice(位置,0,新值) 指定位置

刪除

• 改變數組長度

• list.pop() 刪除最後 返回刪除的元素

• list.shift() 刪除第一個 返回刪除的元素

• list.splice(位置,刪除的個數) 指定位置刪除指定個數

• 運算符 delete?

設置修改

list[index] = value

list.splice(位置，刪除個數,值1,值2...)

3.5 數組對象屬性

• length 數組長度 元素個數

3.6 數組對象方法

• splice()

  刪除指定位置指定個數的元素
  替換指定位置指定個數的元素
  添加指定位置的元素
  返回 被刪除的元素組成的數組

• reverse() 翻轉數組

• sort() 數組排序

• push() 和 pop() 在數組的最後添加或刪除元素

• unshift()和shift() 在數組的最前面添加或刪除元素

• toString() 和 toLocalString() 把數組轉換為字符串

• join() 把數組的元素拼接成字符串

• slice() 截取數組中的一部分,返回新的數組 slice(start, end)

• concat() 合並多個數組

• indexOf() 搜索數組中的元素，並返回它所在的位置。

• lastIndexOf() 返回一個指定的字符串值最後出現的位置，在一個字符串中的指定位置從後向前搜索。

• forEach() 遍歷 循環

• map() 通過指定函數處理數組的每個元素，並返回處理後的數組。

• filter() 檢測數值元素，並返回符合條件所有元素的數組。

• every() 檢測數值元素的每個元素是否都符合條件。

• some() 檢測數組元素中是否有元素符合指定條件。

• reduce() 將數組元素 索引值從低到高 進行組合 reduceRight() 將數組元素 索引值從高到低進行組合

5 Function

5.1 屬性

• prototype 原型

• length 形參的數量，形參的長度。

5.2 方法

• apply(對象, 數組) 在調用函數（方法）的同時，改變函數內this的指向
• call(對象，參數,參數2...) 在調用函數（方法）的同時，改變函數內this的指向
• bind() 返回一個作為方法調用的函數

6 Math

6.1 屬性

• MATH.PI 返回圓周率（約等於3.14159）。

6.2 方法

• abs(x) 返回數的絕對值。
• sqrt(x) 返回數的平方根。
• pow(x,y) 返回 x 的 y 次冪。
• ceil(x) 對數進行上舍入。
• floor(x) 對數進行下舍入。
• round(x) 把數四舍五入為最接近的整數。
• max(x,y) 返回 x 和 y 中的最高值。
• min(x,y) 返回 x 和 y 中的最低值。
• random() 返回 0 ~ 1 之間的隨機數。

取隨機數
0~9
Math.floor(Math.random() * 10)

6~13
Math.floor(Math.random() * 8) + 6

7 Date

7.1 方法

• getYear() 請使用 getFullYear() 方法代替。
• getFullYear() 從 Date 對象以四位數字返回年份。
• getMonth() 從 Date 對象返回月份 (0 ~ 11)。
• getDate() 從 Date 對象返回一個月中的某一天 (1 ~ 31)。
• getDay() 從 Date 對象返回一周中的某一天 (0 ~ 6)。
• getHours() 返回 Date 對象的小時 (0 ~ 23)。
• getMinutes() 返回 Date 對象的分鐘 (0 ~ 59)。
• getSeconds() 返回 Date 對象的秒數 (0 ~ 59)。
• getMilliseconds() 返回 Date 對象的毫秒(0 ~ 999)。
• getTime() 返回 1970 年 1 月 1 日至今的毫秒數。
• getTimezoneOffset() 返回本地時間與格林威治標準時間 (GMT) 的分鐘差。
• getUTC.... 標準時區
• set...
• setUTC...
• toTimeString() 把 Date 對象的時間部分轉換為字符串。
• toDateString() 把 Date 對象的日期部分轉換為字符串。
• toUTCString() 根據世界時，把 Date 對象轉換為字符串。
• toLocaleString() 根據本地時間格式，把 Date 對象轉換為字符串。
• toLocaleTimeString() 根據本地時間格式，把 Date 對象的時間部分轉換為字符串。
• toLocaleDateString() 根據本地時間格式，把 Date 對象的日期部分轉換為字符串。

8 RegExp

8.1 屬性

• global RegExp 對象是否具有標誌 g。
• ignoreCase RegExp 對象是否具有標誌 i。
• lastIndex 一個整數，標示開始下一次匹配的字符位置。
• multiline RegExp 對象是否具有標誌 m。
• source 正則表達式的源文本。

8.2 方法

• exec() 檢索字符串中指定的值。返回找到的值，並確定其位置。
• test() 檢索字符串中指定的值。返回 true 或 false。

String對象的方法
search() 第一次匹配到的位置，匹配不到 -1
match() 同r.exec()
replace() 替換，默認只替換一個，正則全局匹配

9 JSON

9.1方法

• JSON.parse() 解析json格式的字符串
• JSON.stringify() 序列化對象 數組 或 原始值

10 Global

10.1 屬性

• NaN
• InFinity

10.2 方法

• escape() 對字符串進行Unicode編碼。
• unescape() 對由 escape() 編碼的字符串進行解碼。
• encodeURI() 把字符串編碼為 URI。 對其他一些在網址中有特殊含義的符號“; / ? : @ & = + $ , #”不進行編碼
• decodeURI() 解碼某個編碼的 URI。
• encodeURIComponent() 把字符串編碼為 URI 組件
• decodeURIComponent() 解碼一個編碼的 URI 組件。
• eval() 計算 JavaScript 字符串，並把它作為腳本代碼來執行。
• isFinite() 檢查某個值是否為有窮大的數。
• isNaN() 檢查某個值是否是數字。
• parseInt() 解析一個字符串並返回一個整數。
• parseFloat() 解析一個字符串並返回一個浮點數。
• Number() 把對象的值轉換為數字。
• String() 把對象的值轉換為字符串。
• 所有內置構造函數 都是 全局對象的屬性

JavaScript 內置對象和使用技巧（三）