JavaScript 小白手冊

嘮嘮嗑

• 因爲我的另外兩個隊友，在學習這玩意，學完後，和我說記憶不是很清楚、不鞏固、容易忘記。這不，我立馬就給他們整理了一套複習的資料，記憶模糊了就瞅幾眼。

1. 變量

• 在函數中聲明

// 都爲局部變量
function fun() {
	var a, b, c = 1;
}

// 則除了第一個爲局部，其它則全局
function fun() {
	var a = b = c = 20;
}

// 都是全局變量
function fun() {
	a = 1, b = 1;
}

• 在函數外聲明

var a = 1;   //全局變量

• 結構賦值

var [a,b,c] = [1,2,3];

2. 數據類型

2.1 基本類型

基本類型
Number	數字類型
String	字符串類型
Boolean	true與false
Null	空對象賦值，主要是和undefined進行區分
Undefined	變量聲明不賦值的情況下，默認值是undefined

2.2 引用類型

• 引用數據類型：Object
• 在JS中除了基本數據類型以外的都是對象，數據是對象，函數是對象，正則表達式是對象

引用類型
Object	對象

2.3 類型轉換

• 強制類型轉換

函數	作用
Number()	強制轉爲Number類型
Boolean()	強制轉爲Boolean類型

2.4 判斷數據類型

• 判斷數據類型：typeof 類型

3. 特殊的關係運算符

運算符	作用
==	值一致即可
===	需要類型與值一致

【注意】：null == undefined //返回true

4. 數組聲明

1. var arr = new Array(); //聲明一個空數組對象
2. var arr = new Array(length) //聲明一個指定長度的數組
3. var arr = [元素] //聲明數組(最常用);

【注意】：js中的數組聲明不用指定長度，js的數組長度是不固定的，會隨着元素的數量改變而改變。

5. 對象聲明

1. var 對象名 = new Object();

var obj1 = new Object();
obj1.attr = "obj1";
obj1.fun = function () {
	console.log("obj1");
}

2. var 對象名 = {};

var obj2 = {
    attr: "obj2",
    fun: function () {
        console.log("obj2");
    }
}

3. function 類名() {this.屬性名=屬性值; … }

function Obj3() {
    this.attr = "obj3";
    this.fun = function () {
        console.log("obj3");
    }
}

4. Object.create()

var obj4 = Object.create({
    attr: "obj4",
    fun: function () {
        console.log("obj4");
    }
});

6. 內置對象

6.1 String

函數	作用
concat()	連接
indeoxOf(str[,start])	查找或指定位置開始查詢
lastIndexOf(str[,start])	從最後開始查找或指定位置開始查詢
charAt(index)	返回此索引的值
replace(str,newStr)	替換
trim()	清除左右兩邊的空格
split©	切割
toLowerCase()	轉爲小寫
toUpperCase()	轉爲大寫
substring([start][,end])	截取start~end
slice(start[,end])	截取，end可爲負值(代表從後面開始)
substr(start[,length])	截取，可指定長度

6.2 Array

函數	作用
join(str)	將數組中的每一個元素都和str連接,最後將所有元素進行組合，變成字符串。
pop()	將數組中最後一個元素刪除並且返回
push(str)	向數組末尾添加一個或多個元素，並且返回新長度
shift()	刪除並返回數組中的首個元素
unshift([items])	向數組開頭添加一個或多個items元素
slice(start[,end])	獲取start到end的元素
splice(start[,end][,items])	刪除start到end的元素，且添加一個或多個items元素
sort()	正序排序
reverse()	將數組倒序排序

6.3 Math

函數	作用
ceil(num)	向上取整
floor(num)	向下取整
min(num)	獲取最小值
max(num)	獲取最大值
pow(num,a)	num的a次方
random()	0-1的隨機數
round(num)	四捨五入
sqrt(num)	開平方

6.4 Date

函數	作用
getFullYear()	獲取年
getMonth()	獲取月(0-11)
getDate()	獲取日(1-31)
getDay()	獲取星期幾(0-6)
getTime()	獲取當前時間(1970.1.1開始)
getHours()	獲取小時(0-23)
getMinutes()	獲取分鐘(0-59)
getSeconds()	獲取秒數(0-59)

6.5 Global

函數	作用
eval()	將字符串轉爲可以執行js代碼
isNaN(“123”)	isNaN判斷是否值爲NaN,會自動做一次Number()強轉
parseFloat(str2)	獲取以浮點開頭的字符串,返回string類型
parseInt(str1)	獲取以整形開頭的字符串,返回string類型

7. BOM

• 概述：BOM瀏覽器對象模型，是規範瀏覽器對js語言的支持(js調用瀏覽器本身的功能)。

7.1 window

• Tips：“window.alert()”，可以省略“window”，則“alert()”

window	作用
alert()	警告框
confirm()	確認框; 返回true/false
prompt()	提示框; 返回輸入的值

window	作用
setTimeout(函數對象,時間)	指定的時間後執行指定的函數，返回 ID 值
setInterval(函數對象,時間)	每間隔指定的時間執行指定的函數，返回 ID 值
clearTimeout(函數對象ID)	用來停止指定的定時器
clearInterval(函數對象ID)	用來停止指定的間隔器

window	作用
window.open()	打開頁面
window.opener	子頁面調用父頁面的函數
window.close()	關閉頁面

7.2 history

history	作用
forward()	頁面資源前進，歷史記錄的前進
back()	頁面資源後退，歷史記錄後退
go(index)	跳轉到指定的歷史記錄資源

7.3 location

location	作用
href	獲取URL
port	獲取端口號
reload()	重新加載頁面資源

7.4 navigator

navigator	作用
appName	返回瀏覽器名稱
appVersion	返回瀏覽器的平臺的版本信息
cookieEnabled	返回指明瀏覽器中是否啓用cookie
platform	返回運行瀏覽器的操作系統平臺
userAgent	查看瀏覽器配置屬性

7.5 screen

screen	作用
availHeight	返回瀏覽器顯示屏幕的高度
availWidth	返回瀏覽器顯示屏幕的寬度
height	返回顯示器屏幕的高度
width	返回顯示器屏幕的寬度

8. DOM

8.1 Document

• 概述：瀏覽器對外提供的支持js的用來操作HTML文檔的一個對象，此對象封存的HTML文檔的所有信息。

函數	獲取HTML元素對象
getElementById()	通過id
getElementsByName()	通過name屬性值
getElementsByTagName()	通過標籤名
getElementsByClassName()	通過class屬性值
querySelector()	通過選擇器
querySelectorAll()	通過選擇器

8.2 Element

• 概述：Element 對象表示 HTML 元素。Element 對象可以擁有類型爲元素節點、文本節點、註釋節點的子節點。

8.2.1 屬性操作

函數	作用
setAttribute(attriName,value)	設置屬性
getAttribute(attriName)	獲取屬性
style	設置或返回元素的 style 屬性

8.2.2 元素內容

函數	作用
innerHTML	返回或設置元素的內容
innerText	返回或設置元素的純文本

8.2.3 節點操作

• 節點類型（nodeType）

返回值	類型
1	元素節點
2	屬性節點
3	文本節點

• 節點名稱（nodeName）

返回值	名稱
標籤名	元素節點
屬性名	屬性節點

• 創建節點

函數	作用
document.createElement()	創建元素
document.createAttribute()	創建屬性
document.createTextNode()	創建文本節點
setAttributeNode()	設置屬性節點

• 獲取節點

函數	作用
parentNode	獲取父節點
childNodes	獲取子節點
nextElementSibling	獲取當前節點的下一個節點
previousSibling	獲取同一級別的前一個元素節點

• 獲取節點（不包括文本節點和註釋）

函數	作用
childElementCount	返回子元素的個數
firstElementChild	指向第一個子元素
lastElementChild	指向最後一個子元素
previousElementSibling	指向前一個同輩元素
nextElementSibling	指向前一個同輩元素
children	返回子元素的HTMLCollection集合

• 刪除節點

函數	作用
removeChild()	刪除子節點

• 追加節點

函數	作用
appendChild()	追加子節點

9. js事件

事件	代碼
單擊事件	onclick()
雙擊事件	ondblclick()
鼠標事件[懸停在某個元素上時]	onmouseover()
鼠標事件[在某個元素上移動時]	onmousemove()
鼠標事件[在某個元素上移出時]	onmouseout()
鍵盤事件[彈起時]	onkeyup()
鍵盤事件[下壓時]	onkeydown()
焦點事件[聚焦]	onfocus()
焦點事件[離焦]	onblur()
頁面加載事件	onload()

• 注意：
  1. 一個事件可以監聽多個函數的執行，但是要有分號隔開。
  2. 給HTML元素添加多個事件時，注意事件之間的衝突，例如：單雙擊事件一起使用
  3. 事件的阻斷(決定事件是否執行)，true和false
  4. 超鏈接調用js函數 href=“javascript:函數名()”