JavaScript基礎(chǔ)語法

var a = [1, 2, 5]; for(var k in a){console.log(k); // k 為當(dāng)前元素的下標(biāo) } for(var m of a){console.log(m); // m 為當(dāng)前元素的值 } VM215:3 0 VM215:3 1 VM215:3 2 VM215:6 1 VM215:6 2 VM215:6 5

變量聲明

• var 聲明一個(gè)變量，可賦一個(gè)初始值。
• let 聲明一個(gè)塊作用域的局部變量，可賦一個(gè)初始值。
• const 聲明一個(gè)塊作用域的只讀命名的常量。
• 變量的名字又叫做“標(biāo)識符”，必須以字母、下劃線（_）或者美元符號（$）開頭，并且區(qū)分大小寫。
• 若沒有為變量賦初始值，則值默認(rèn)為undefined
• 若沒有聲明變量而直接使用，拋出ReferenceError錯(cuò)誤
• 當(dāng)變量值為undefined時(shí)，布爾值環(huán)境當(dāng)做false
• 當(dāng)變量值為null時(shí)，布爾值環(huán)境當(dāng)做false

數(shù)據(jù)類型

• Boolean布爾值，true和false
• null對大小寫敏感
• undefined空類型，變量未定義時(shí)候的值
• Number數(shù)值類型
• String字符串類型
• Symbol（ES6新增）表示一種唯一且不可變的數(shù)據(jù)

字面量

• 字面量是用來表示如何表達(dá)這個(gè)值
• 變量賦值時(shí)右邊的都是字面量
• 數(shù)組字面量
• 布爾字面量
• 浮點(diǎn)數(shù)字面量
• 對象字面量
• 整數(shù)字面量
• 正則字面量
• 字符串字面量

全局變量

代碼：

// ES5var a = 'web';window.a; // 'web'// ES6let b = 'web';window.b; // undefined

注釋

代碼：

// 單行注釋/*多行注釋*/

變量作用域

• 全局變量：即聲明在函數(shù)之外，當(dāng)前文檔所有地方都可以訪問
• 局部遍歷：即聲明在函數(shù)內(nèi)部，僅在當(dāng)前函數(shù)內(nèi)可以訪問

代碼：

// ES5及之前console.log(a); // undefinedvar a = 1;console.log(a); // 1// ES6開始console.log(b); // Uncaught ReferenceError: b1 is not definedlet b = 2;console.log(b); // 2

函數(shù)聲明有兩種方式

代碼：

// 函數(shù)聲明f(); // 'web'function(){console.log('web');}; // 函數(shù)表達(dá)式g(); // Uncaught TypeError: g is not a functionvar g = function(){ // 換成 let 聲明也一樣console.log('web');}

常量

• 使用const來聲明一個(gè)只讀的常量
• const聲明的變量不能直接修改值，但是對于對象和數(shù)組，卻是不受保護(hù)可以修改的

一個(gè)完整的javascript實(shí)現(xiàn)由3個(gè)部分組成：核心ECMAScript，文檔對象模型DOM,瀏覽器對象模型BOM。

JavaScript是一種直譯式腳本語言，是一種動態(tài)類型，弱類型，基于原型的語言，內(nèi)置支持類型。

JavaScript具有特點(diǎn)：一種解釋性腳本語言，主要用于向HTML頁面添加交互行為，可以直接嵌入HTML頁面，但寫成單獨(dú)的js文件有利于結(jié)構(gòu)和行為的分離，

跨平臺特性，在絕大多數(shù)瀏覽器的支持下，可以在多種平臺下運(yùn)行。

JavaScript語法區(qū)別：區(qū)分大小寫，變量是弱類型，結(jié)尾的分號可有可無，解釋與java，c和php語言中的注解是相同的，大括號表示代碼塊。

示例{}包含的內(nèi)容表示一個(gè)代碼塊

代碼：

if(test1=="red") {test1 = "blue";alert(test1); }

JavaScript關(guān)鍵字：

break,else,new,var case,finally,return,void catch,for,switch,while continue,function,this,with default,if,throw delete,in,try do,instanceof,typeof

JavaScript的變量

在javascript中，變量是存儲信息的容器，變量存在兩種類型的值，即為原始值和引用值。

JavaScript的原始類型，即Undefined，Null，Boolean，Number和String型。

字符串String是JavaScript的基本數(shù)據(jù)類型。

數(shù)據(jù)類型表示數(shù)據(jù)的類型，JavaScript語言的每個(gè)值都屬于某一種數(shù)據(jù)類型。

JavaScript的數(shù)據(jù)類型分兩類：值類型（原始值），引用數(shù)據(jù)類型（引用值）。

值類型：字符串string，數(shù)字number,布爾boolean，對空null，未定義undefined，symbol為es6引入的一鐘新的原始數(shù)據(jù)類型，表示獨(dú)一無二的值。

引用數(shù)據(jù)類型：對象object，數(shù)組array，函數(shù)function。

JavaScript提供typeof運(yùn)算符用于判斷一個(gè)值是否在某種類型的范圍內(nèi)。

Undefined類型只有一個(gè)值，即為undefined。

當(dāng)聲明的變量未初始化時(shí)，該變量的默認(rèn)值是undefined。

Null類型只有一個(gè)值為null，值undefined實(shí)際上是從值null派生來的，所以JavaScript將他們定義為相等的。

null與undefined表示這兩個(gè)值相等，但含義不同。

undefined是聲明了變量但未對其初始化時(shí)賦予該變量的值，null表示尚未存在的對象。

代碼：

console.log( null == undefined); // true

Boolean類型的兩個(gè)值是true和false。

Number類型，所有數(shù)學(xué)運(yùn)算返回的都是十進(jìn)制的結(jié)果。

Number.MAX_VVALUE和Number.MIN_VALUE，它們定義了Number值集合的外邊界。

如果生成的數(shù)值結(jié)果大于Number.MAX_VALUE時(shí)，將被賦予值Number.POSITIVE_INFINITY，表示不再有Number值。生成的數(shù)值小于Number.MIN_VALUE，會被賦予值Number.NEGATIVE_INFINITY，表示不再有Number值。

有表示無窮大的值為Infinity。

Number.POSITIVE_INFINITY的值為Infinity，Number.NEGATIVE_INFINITY的值為-Infinity。

使用isFinite()方法判斷參數(shù)值是否是有窮的。

特殊的NaN，表示非數(shù)。與無窮大一樣，NaN也不能用于算術(shù)計(jì)算。注意,NaN與自身不相等。

示例：

console.log(NaN == NaN) // false console.log(isNaN("66")); // false

String類型，是唯一沒有固定大小的原始類型，字符串字面量是用雙引號或者單引號聲明。

類型判斷

typeof操作符，用于獲取一個(gè)變量或者表達(dá)式的類型。

返回值：

undefined，變量是Undefined類型 boolean，變量是Boolean類型的 number，變量是Number類型的 string，變量是String類型的 object，變量是一種引用類型或者Null類型

示例：

console.log(typeof 12); // number

typeof運(yùn)算符對null的值返回Object。

instanceof操作符，用于判斷一個(gè)引用類型屬于哪種類型。

示例：

<script>var a = new Array();if(a instanceof Array) {console.log('a是一個(gè)數(shù)組類型');}else{console.log('a不是一個(gè)數(shù)組類型');} </script>

類型轉(zhuǎn)換

Number變量，將變量轉(zhuǎn)化為數(shù)字類型。

String變量，將變量轉(zhuǎn)化為字符串類型。

Boolean變量，將變量轉(zhuǎn)化為布爾值類型。

parseFloat變量，將變量轉(zhuǎn)化為浮點(diǎn)類型。

parseInt變量，將變量轉(zhuǎn)化為整數(shù)類型。

運(yùn)算符

運(yùn)算符：賦值運(yùn)算符，算數(shù)運(yùn)算符，比較運(yùn)算符，邏輯運(yùn)算符，一元運(yùn)算符，二元運(yùn)算符，三元運(yùn)算符。

名稱操作符含義

賦值	x = y	x = y
加法賦值	x += y	x = x + y
減法賦值	x -= y	x = x - y
乘法賦值	x *= y	x = x * y
除法賦值	x /= y	x = x / y
求余賦值	x %= y	x = x % y
求冪賦值	x **= y	x = x ** y
左移位賦值	x <<= y	x = x << y
右移位賦值	x >>= y	x = x >> y
無符號右移位賦值	x >>>= y	x = x >>> y
按位與賦值	x &= y	x = x & y
按位異或賦值	x ^= y	x = x ^ y

示例：

賦值運(yùn)算符的符號為=算數(shù)運(yùn)算符：+，-，*，/，%比較運(yùn)算符：>，>=，<，<=，!=，==，===，！==邏輯運(yùn)算符： &&，邏輯與，表示表達(dá)式前后全為true才能返回true||，邏輯或，表示表達(dá)式前后只要有一個(gè)true就返回true!，邏輯取反，表示表達(dá)式后若為true，則返回false，否則反之。

++自增長，每執(zhí)行一次自身加1,--自減，每執(zhí)行一次自身減1.

i++，值先參與外部表達(dá)式的運(yùn)算，然后再將自身的值加1。

++i，i先自身的值加1，再參與外部表達(dá)式的運(yùn)算。

+=，a+=3等于a=a+3。同理類似。

三元運(yùn)算符的表達(dá)式格式為：條件？正：假

運(yùn)算符優(yōu)先級：算數(shù)運(yùn)算符>比較運(yùn)算符>邏輯運(yùn)算符>賦值運(yùn)算符。

• 算數(shù)運(yùn)算符
• 比較運(yùn)算符
• 邏輯運(yùn)算符
• 賦值運(yùn)算符

分支循環(huán)

if-else條件判斷語句

switch-case選擇語句

for循環(huán)語句

for-in遍歷語句

while循環(huán)語句

do-while循環(huán)語句

示例：

if(條件 1) {當(dāng)條件1為true時(shí)執(zhí)行的代碼 }else if(條件 2){當(dāng)條件2為true時(shí)執(zhí)行的代碼 }else{當(dāng)條件1和條件2都不為true時(shí)執(zhí)行的代碼 }

示例：

switch(n){case1:執(zhí)行代碼塊1break;case2:執(zhí)行代碼塊2break;default:... }

示例：

for(語句1;語句2;語句3){被執(zhí)行的代碼塊 }

continue表示為越過本次循環(huán)，繼續(xù)下一次循環(huán)

break表示跳出整個(gè)循環(huán)，循環(huán)結(jié)束

遍歷

for in語句循環(huán)遍歷對象的屬性，多用于對象，數(shù)組等復(fù)合類型，以遍歷其中的屬性和方法。

示例：

for(鍵 in 對象) {代碼塊 }

while，只有表達(dá)式為真，就可以進(jìn)入循環(huán)。

示例：

while(表達(dá)式){代碼塊 }

do-while

示例：

do {代碼 }while(表達(dá)式)

數(shù)組

數(shù)組的屬性和方法：

方法說明

concat()	連接兩個(gè)或者更多的數(shù)組，并返回結(jié)果
join()	把數(shù)組的所有元素放入一個(gè)字符串，元素通過指定的分隔符進(jìn)行分隔
pop()	刪除并返回?cái)?shù)組的最后一個(gè)元素
push()	向數(shù)組的末尾添加一個(gè)或者多個(gè)元素，并返回新的長度
reverse()	顛倒數(shù)組中元素的順序
shift()	刪除并返回?cái)?shù)組的第一個(gè)元素
slice()	從某個(gè)已有的數(shù)組返回選定的元素
sort()	對數(shù)組的元素進(jìn)行排序
splice()	刪除元素，并向數(shù)組添加新元素
toSource()	返回該對象的源代碼
toString()	將數(shù)組轉(zhuǎn)換為字符串，并返回結(jié)果
toLocalString()	將數(shù)組轉(zhuǎn)換為本地?cái)?shù)組，并返回結(jié)果
unshift()	向數(shù)組的開頭添加一個(gè)或者更多元素，并返回新的長度
valueOf()	返回?cái)?shù)組對象的原始值
indexOf()	在數(shù)組中搜索指定元素并返回第一個(gè)匹配的索引
lastIndexOf()	在數(shù)組中搜索指定元素并返回最后一個(gè)匹配的索引

concat()

連接兩個(gè)或更多的數(shù)組，并返回一個(gè)新數(shù)組。

語法:

arr.concat(a1, a2, ..., an)

參數(shù):

arr：目標(biāo)數(shù)組

a1,a2,...,an：需要合并的元素

join()

使用指定分隔符，連接兩個(gè)或多個(gè)數(shù)組的元素，返回一個(gè)字符串。

數(shù)組定義

使用new關(guān)鍵字創(chuàng)建一個(gè)array對象，可以在內(nèi)存中創(chuàng)建一個(gè)數(shù)組空間，添加元素。

使用new關(guān)鍵字創(chuàng)建一個(gè)array對象的同時(shí)為數(shù)組賦予n個(gè)初始值。

不用new，直接用[]聲明一個(gè)數(shù)組，可以直接賦予初始值。

數(shù)組操作

添加元素

刪除元素，pop方法，shift方法，splice方法。

遍歷數(shù)組

插入元素，unshift方法，splice方法插入。

合并數(shù)組

數(shù)組轉(zhuǎn)字符串

數(shù)組元素倒序

• pop方法，從尾部刪除，刪除后元素從數(shù)組上剝離并返回。
• shift方法，從頭部刪除元素，并返回。
• splice方法，從指定位置刪除指定的元素。
• unshift方法，從頭部插入。
• splice方法，從指定位置插入指定個(gè)數(shù)的元素。
• concat方法將多個(gè)數(shù)組連接成一個(gè)數(shù)組。
• join方法將數(shù)組中的元素合并成一個(gè)用指定分隔符合并起來的字符串。
• reverse方法可以將數(shù)組中的元素倒序排列，而且直接改變原來的數(shù)組，不會創(chuàng)建新的數(shù)組。
• sort方法可以將數(shù)組中的元素按照一定的規(guī)則自動排序（默認(rèn)的是按照字符的ASCII碼順序排序）。

pop()和push()

pop(): 刪除并返回?cái)?shù)組最后一個(gè)元素，改變原數(shù)組。

push(item): 向數(shù)組末尾添加一個(gè)或多個(gè)元素，改變原數(shù)組，返回新的數(shù)組長度。

shift()和unshift()

shift(): 刪除并返回?cái)?shù)組第一個(gè)元素，改變原數(shù)組。

unshift(item): 向數(shù)組頭部添加一個(gè)或多個(gè)元素，改變原數(shù)組，返回新的數(shù)組長度。

示例：

let arr = [1, 2, 3, 5, 6]; let a1 = arr.slice(2); // [3, 5, 6] let a2 = arr.slice(2,3); // [3]let arr = [1, 2, 3, 4]; let a = arr.splice(1, 2, "web", "a"); // a => [2, 3] // arr => [1, "web", "a", 4]

forEach()

代碼：

let a = [1,3,5,7]; a.forEach(function(val, index, arr){arr[index] = val * 2 }) a ; // [2, 6, 10, 14]

代碼：

arr.every(callback)測試數(shù)組的所有元素是否都通過了指定函數(shù)的測試。some()測試數(shù)組中的某些元素是否通過由提供的函數(shù)實(shí)現(xiàn)的測試。

filter()

示例：

let a = [1, "", "aa", 2, 6]; let res = a.filter(function(val, index, arr){return typeof val == "number"; }) res;//[1, 2, 6]

map()

對每個(gè)元素執(zhí)行此方法，并返回一個(gè)執(zhí)行后的數(shù)組。

示例：

let a = [1, 3, 5]; let b = a.map(function(val, index, arr){return val + 1; }) b; //[2, 4, 6]

拓展運(yùn)算符

拓展運(yùn)算符使用(...)

示例：

console.log(...[1, 2, 3]); // 1 2 3 console.log(1, ...[2,3], 4); // 1 2 3 4 // 通常情況 淺拷貝 let a1 = [1, 2]; let a2 = a1; a2[0] = 3; console.log(a1,a2); // [3,2] [3,2]// 拓展運(yùn)算符 深拷貝 let a1 = [1, 2]; let a2 = [...a1]; // let [...a2] = a1; // 作用相同 a2[0] = 3; console.log(a1,a2); // [1,2] [3,2] let [a, ...b] = [1, 2, 3, 4]; // a => 1 b => [2,3,4]let [a, ...b] = []; // a => undefined b => []let [a, ...b] = ["abc"]; // a => "abc" b => []

fill()

用于用指定值填充一個(gè)數(shù)組

用來初始化空數(shù)組，并抹去數(shù)組中已有的元素

fill()的第二個(gè)和第三個(gè)參數(shù)指定填充的起始位置和結(jié)束位置

new Array(3).fill('a'); // ['a','a','a'] [1,2,3].fill('a'); // ['a','a','a'] [1,2,3].fill('a',1,2);// [1, "a", 3]

entries(),keys(),values()

entries()對鍵值對遍歷

keys()對鍵名遍歷

values()對鍵值遍歷。

includes()

includes()用于表示數(shù)組是否包含給定的值

第二個(gè)參數(shù)為起始位置，默認(rèn)為0，如果負(fù)數(shù)，則表示倒數(shù)的位置，如果大于數(shù)組長度，則重置為0開始。

代碼：

[1,2,3].includes(3,3); // false [1,2,3].includes(3,4); // false [1,2,3].includes(3,-1); // true [1,2,3].includes(3,-4); // true

flat(),flatMap()

示例：

var arr1 = [1, 2, [3, 4]]; arr1.flat(); // [1, 2, 3, 4]var arr2 = [1, 2, [3, 4, [5, 6]]]; arr2.flat(); // [1, 2, 3, 4, [5, 6]]var arr3 = [1, 2, [3, 4, [5, 6]]]; arr3.flat(2); // [1, 2, 3, 4, 5, 6] var arr4 = [1, 2, , 4, 5]; arr4.flat(); // [1, 2, 4, 5]

語法

var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {// return element for new_array }[, thisArg]) var arr1 = [1, 2, 3, 4];arr1.map(x => [x * 2]); // [[2], [4], [6], [8]]arr1.flatMap(x => [x * 2]); // [2, 4, 6, 8]// only one level is flattened arr1.flatMap(x => [[x * 2]]); // [[2], [4], [6], [8]] let arr1 = ["it's Sunny in", "", "California"];arr1.map(x => x.split(" ")); // [["it's","Sunny","in"],[""],["California"]]arr1.flatMap(x => x.split(" ")); // ["it's","Sunny","in", "", "California"]

Array.prototype.reduce()

reduce() 方法對數(shù)組中的每個(gè)元素執(zhí)行一個(gè)由您提供的reducer函數(shù)(升序執(zhí)行)，將其結(jié)果匯總為單個(gè)返回值。

var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {return accumulator + currentValue; }, 0); // 和為 6var total = [ 0, 1, 2, 3 ].reduce(( acc, cur ) => acc + cur,0 );

語法

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])initialValue可選作為第一次調(diào)用 callback函數(shù)時(shí)的第一個(gè)參數(shù)的值。 如果沒有提供初始值，則將使用數(shù)組中的第一個(gè)元素。 在沒有初始值的空數(shù)組上調(diào)用 reduce 將報(bào)錯(cuò)。

字符串對象屬性

字符串對象屬性

屬性說明

constructor	對創(chuàng)建該對象的函數(shù)的引用
length	字符串的長度
prototype	允許向?qū)ο筇砑訉傩院头椒?/td>

字符串對象方法

字符串對象方法

屬性說明

anchor()	創(chuàng)建HTML錨
big()	用大號字體顯示字符串
blink()	顯示閃動字符串
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)換為大寫
toString()	返回字符串
valueOf()	返回某個(gè)字符串對象的原始值
toSource()	代表對象的源代碼

字符串搜索

indexOf()，lastIndexOf()，search()和match()。

indexOf()，indexOf(搜索詞，起始索引位置)，第2個(gè)參數(shù)不寫則默認(rèn)從0開始搜索。indexOf()用于檢索指定的字符串值在字符串中首次出現(xiàn)的位置。

lastIndexOf()，lastIndexOf(搜索詞，起始索引位置)，從后向前檢索，返回的是一個(gè)指定的子字符串值最后出現(xiàn)的位置。

search()，語法為字符串，search(搜索詞)或者字符串search(正則表達(dá)式)。

match()，語法為字符串。match()可在字符串內(nèi)檢索指定的值，或者找到一個(gè)或者多個(gè)正則表達(dá)式的匹配。沒有匹配到結(jié)果，就返回null。有匹配到，會返回一個(gè)數(shù)組，數(shù)組的第0個(gè)元素存放的是匹配文本。

字符串截取

3種字符串截取方法：substring(),slice(),substr()

substring()，語法為字符串，substring(截取開始位置，截取結(jié)束位置)，substring()是常用的字符串截取方法，接收兩個(gè)參數(shù)，不能為負(fù)值，將返回一個(gè)新的字符串。

slice()，語法為字符串,slice(截取開始位置，截取結(jié)束位置)，slice()中的參數(shù)可以為負(fù)值，如果參數(shù)是負(fù)值，則該參數(shù)從字符串的尾部開始算起的位置。-1是指字符串的最后一個(gè)字符。

substr()，substr(截取開始位置，length)，在字符串中抽取從截取開始位置下標(biāo)開始的指定數(shù)目的字符。返回一個(gè)字符串如果截取的開始位置為負(fù)數(shù)，則表示從字符串尾部開始算起。

字符串替換

replace()，replace(正則表達(dá)式/要被替換的字符串，要替換成為的子字符串)。

字符串切割

split()用于將一個(gè)字符串分割成字符串?dāng)?shù)組，語法為字符串。split(用于分割的子字符串，返回?cái)?shù)組的最大長度)，返回?cái)?shù)組的最大長度一般情況下不設(shè)置。

JS事件三個(gè)階段

事件流：

事件冒泡流

事件捕獲流

事件的處理過程主要有三個(gè)階段：捕獲階段，目標(biāo)階段，冒泡階段
事件流包含三個(gè)階段：事件捕獲階段，處于目標(biāo)階段和事件冒泡階段。

• 捕獲，事件由頁面元素接收，逐級向下，到具體的元素
• 目標(biāo)，具體的元素本身
• 冒泡，元素本身，逐級向上，到頁面元素

事件捕獲，當(dāng)使用事件捕獲時(shí)，父級元素先觸發(fā)，子元素后觸發(fā)。

事件冒泡，當(dāng)使用事件冒泡時(shí)，子級元素先觸發(fā)，父元素后觸發(fā)。

事件冒泡和事件捕獲

事件發(fā)生會產(chǎn)生事件流

DOM事件流：DOM結(jié)構(gòu)是一個(gè)樹形結(jié)構(gòu)，當(dāng)一個(gè)HTML元素產(chǎn)生一個(gè)事件時(shí)，該事件會在元素節(jié)點(diǎn)與根節(jié)點(diǎn)之間按特定的順序傳播，路徑所經(jīng)過的節(jié)點(diǎn)都會收到該事件。

事件流順序有兩種類型：事件冒泡和事件捕獲。

事件觸發(fā)方式

代碼：

addEventListener("click","doSomething","true")

第三個(gè)參數(shù)為true，表示采用事件捕獲，若false，表示采用事件冒泡。

<!DOCTYPE html> <html lang="en> <head> <meta charset="UTF-8"> <title>Document</title> <style> html,body{width:100%;height:100%; } </style> <script>window.onload=function(){d1 = document.getElementById("d1");d2 = document.getElementById("d2");d3 = document.getElementById("d3");// true 表示在捕獲階段響應(yīng)// false 表示在冒泡階段響應(yīng)d1.addEventListener("click",function(event){console.log("d1")},"true");d2.addEventListener("click",function(event){console.log("d2")},"true")d3.addEventListener("click",function(event){console.log("d3")},"true")} </script> </head> <body> <div id="d1" style="background: #0000ff; width: 500px; height: 500px"> <div id="d2" style="background: #00ff00; width: 400px; height: 400px"> <div id="d3" style="background: #ff0000; width: 200px; height: 200px"> </div> </div> </div> </body> </html>

addEventListener網(wǎng)頁，點(diǎn)擊跳轉(zhuǎn)：addEventListener.html

事件委托

一個(gè)響應(yīng)事件委托到另一個(gè)元素。

<ul id="btn"><li id="btn1">按鈕1</li><li id="btn2">按鈕2</li><li id="btn3">按鈕3</li> </ul>var btn1 = document.getElementById('btn1'); var btn2 = document.getElementById('btn2'); var btn3 = document.getElementById('btn3');webbtn.myAddFun(btn1, 'click', function(event){alert('1點(diǎn)擊'); });webbtn.myAddFun(btn2, 'click', function(event){alert('2點(diǎn)擊'); });webbtn.myAddFun(btn3, 'click', function(event){alert('3點(diǎn)擊'); });

添加一個(gè)事件處理函數(shù)，來做事件委托

var btn = document.getElementById('btn'); webbtn.myAddFun(btn, 'click', function(event){event = webbtn.getMyEvent(event);var target = webbtn.getMyTarget(event);switch(target.id){case "btn1":alert('1點(diǎn)擊');break;case "btn2":alert('2點(diǎn)擊');break;case "btn3":alert('3點(diǎn)擊');break;} });

鍵盤事件

鍵盤事件就是有關(guān)鍵盤操作所觸發(fā)的世界。

鍵盤事件：

方法說明

keydown	當(dāng)用戶按下鍵盤上的任意鍵時(shí)觸發(fā)。按住不放，會重復(fù)觸發(fā)
keypress	當(dāng)用戶按下鍵盤上的字符鍵時(shí)觸發(fā)。按住不放，會重復(fù)觸發(fā)
keyup	當(dāng)用戶釋放鍵盤上的鍵時(shí)觸發(fā)

鼠標(biāo)拖拽效果

鼠標(biāo)綁定onmousedown()，onmousemove()，onmouseup()事件。

mouse網(wǎng)頁，點(diǎn)擊跳轉(zhuǎn)：mouse.html

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>mouse</title><style>html,body{width: 100%;height: 100%;}#dd {width: 120px;height: 120px;background: #00ff00;position: absolute;}</style><script>var dd;var mflag = false;function ondown() {dd = document.getElementById('dd');mflag = true;}function onmove(e){if(mflag) {dd.style.left = e.clientX - 60 + "px";dd.style.top = e.clientY - 60 + "px";}}function onup() {mflag = false;}</script></head><body onmousemove="onmove(event)"><div id="dd" onmousedown="ondown()" onmouseup="onup()" style="left: 80px;top: 120px;"</body> </html>

鼠標(biāo)事件

鼠標(biāo)事件：

方法說明

click	用戶單擊鼠標(biāo)左鍵或者按下Enter鍵觸發(fā)
dbclick	用戶雙擊鼠標(biāo)觸發(fā)
mousedown	在用戶按下任意鼠標(biāo)按鈕時(shí)觸發(fā)
mouseenter	在鼠標(biāo)光標(biāo)從元素外部首次移動到元素范圍內(nèi)時(shí)觸發(fā)，不冒泡
mouseleave	元素上方的光標(biāo)移動到元素范圍之外時(shí)觸發(fā)，不冒泡
mousemove	光標(biāo)在元素的內(nèi)部不斷移動時(shí)觸發(fā)
mouseover	用戶指針位于一個(gè)元素外部，然后用戶將首次移動到另一個(gè)元素邊界之內(nèi)時(shí)觸發(fā)
mouseout	用戶將光標(biāo)從一個(gè)元素上方移動到另一個(gè)元素時(shí)觸發(fā)
mouseup	在用戶釋放鼠標(biāo)時(shí)觸發(fā)
mousewheel	滾輪滾動時(shí)觸發(fā)

示例：

function web(e) {mouseX = e.clientX;mouseY = e.clientY;console.log("x:"+mouseX + "," + "y:"+mouseY) }<body onclick="web(event)">

鼠標(biāo)懸停是onmouseover

鼠標(biāo)離開是onmouseout

窗口事件

窗口事件：

load

unload

abort

error

select

resize

scroll

load事件，表示當(dāng)頁面完全加載完之后，就會觸發(fā)window上面的load事件。包含所有的圖像，js文件，css文件等外部資源。

示例：

window.onload=function(){}

當(dāng)頁面完全加載完之后執(zhí)行其中的函數(shù)。

示例：

<script>window.onload = function() {var mydiv = document.getElementById("mydiv");console.log(mydiv.innerText);} </script><body><div id="mydiv"></div> </body>

示例：

function imgLoad() {myimg = document.getElementById("myimg");// 圖片加載完成后，給圖片加載框myimg.style.border = "9px solid $00ff00"; }<img id="myimg src="" onload="imgLoad()">

resize事件

當(dāng)調(diào)整瀏覽器的窗口到一個(gè)新的寬度或者高度時(shí)，會觸發(fā)resize事件。

示例：

document.body.clientWidth和document.body.clientHeight獲得窗口的寬和高。

html,body {width: 100%;height: 100%; }<script>function winChange() {winWidth = document.body.clientWidth;winHeight = document.body.clientHeight;} </script><body onresize="winChange()"> </body>

scrol事件，文檔或者瀏覽器窗口被滾動時(shí)觸發(fā)scroll事件

示例：

<script>function scrollChange() {srpos = document.getElementById("srpos");srpos.innerText = document.documentElement.scrollTop;srpos.style.top = docuemnt.documentElement.scrollTop+"px";} </script><body onscroll="scrollChange()"><div style="height:300%;"><br/><font id="srpos" style="position: relative;top: 0px">滾動條滾動到0px</font></div> </body>

焦點(diǎn)事件

方法說明

blur	在元素失去焦點(diǎn)時(shí)觸發(fā)，所有瀏覽器都支持
focus	在元素獲得焦點(diǎn)時(shí)觸發(fā)，所有瀏覽器都支持

示例：

<script> var note; function myfocus(fname,notename) {note = document.getElementById(notename);note.innerText = fname+'獲得焦點(diǎn)'; }function myblur(fname,notename) {note = document.getElementById(notename);note.innerText = fname + '失去焦點(diǎn)'; } </script><body><form name="myform"><input type="text" name="uname" onfocus="myfocus('uname','unote')" onblur="myblur('uname','unote')"/><font id="unote"></font><br/><input type="text" name="pwd" onfocus="myfocus('pwd','pnot')" onblur="myblur('pwd','pnote')"/><font id="pnote"></font></form></body>

事件介紹

事件方法

方法說明

onabort	圖像加載被中斷
onblur	元素失去焦點(diǎn)
onchange	用戶改變域的內(nèi)容
onclick	鼠標(biāo)單擊某個(gè)對象
ondblclick	鼠標(biāo)雙擊某個(gè)對象
onerror	當(dāng)加載文檔或圖像時(shí)發(fā)生某個(gè)錯(cuò)誤
onfocus	元素獲得焦點(diǎn)
onkeydown	某個(gè)鍵盤的鍵被按下
onkeypress	某個(gè)鍵盤的鍵被按下或者按住
onkeyup	某個(gè)鍵盤的鍵被松開
onload	某個(gè)頁面或者圖像被完成加載
onmousedown	某個(gè)鼠標(biāo)按鍵被按下
onmousemove	鼠標(biāo)被移動
onmouseout	鼠標(biāo)從某元素移開
onmouseover	鼠標(biāo)被移到某元素之上
onmouseup	某個(gè)鼠標(biāo)按鍵被松開
onreset	重置按鈕被單擊
onresize	窗口或者框架被調(diào)整尺寸
onselect	文本被選定
onsubmit	提交按鈕被單擊
onunload	用戶退出頁面

窗口事件

load事件

resize事件

scroll事件

焦點(diǎn)事件

鼠標(biāo)事件

獲取鼠標(biāo)單擊位置

鼠標(biāo)懸停和離開

鼠標(biāo)拖拽

鍵盤事件與事件冒泡，獲取

JavaScript內(nèi)置對象

window對象

document對象

location對象

navigator對象

screen對象

history對象

JavaScript的DOM操作，包含獲取節(jié)點(diǎn)，獲取，設(shè)置元素的屬性值，創(chuàng)建，添加節(jié)點(diǎn)，刪除節(jié)點(diǎn)，屬性操作。

DOM對象

當(dāng)網(wǎng)頁被加載時(shí)，瀏覽器會創(chuàng)建頁面的文檔對象模型，Document Object Model，文檔對象模型屬于BOM的一部分，用于對BOM中的核心對象document進(jìn)行操作。

html dom模型被構(gòu)造為對象的樹。

DOM操作

獲取節(jié)點(diǎn)的方法：

標(biāo)簽id獲取：

document.getElementById(idName)

標(biāo)簽name屬性獲取：返回元素?cái)?shù)組

document.getElementsByName(name)

類別名稱獲取：返回元素?cái)?shù)組

document.getElementsByClassName(className)

標(biāo)簽名稱獲取：返回元素?cái)?shù)組

document.getElementsByTagName(tagName)

獲取，設(shè)置元素的屬性值

getAttribute(attributeName)方法，//括號出入輸入名，返回對應(yīng)屬性的屬性值

setAttribute(attributeName,attributeValue)方法，//傳入屬性名以及設(shè)置的值

示例：

<script> window.onload=function(){mytable = document.getElementById('mytable');// 獲取mytable中標(biāo)簽名為tr的字節(jié)點(diǎn)trs = mytable.getElementsByTagName("tr");len = trs.length;flag = true;for(i=0;i<len;i++){if(flag){trs[i].setAttribute('bgcolor','#cccccc');flag = false;}else{flag = true;}}ww = mytable.getAttribute('width'); } </script><body> <table id="mytable' align='center' width="80%" border="1"> <tr bgcolor = "#cccccc"><td>aaa</td><td>bbb</td><td>ccc</td> </tr> </table> </body>

創(chuàng)建，添加節(jié)點(diǎn)

創(chuàng)建節(jié)點(diǎn)：

代碼：

// 創(chuàng)建節(jié)點(diǎn)：document.createElement("h1"); document.createTextNode(String); document.createAttribute("class");

添加節(jié)點(diǎn)：

代碼：

element.appendChild(Node);element.insertBefore(newNode, existingNode);

刪除節(jié)點(diǎn)

代碼：

element.removeChild(Node)

屬性操作：獲取當(dāng)前元素的父節(jié)點(diǎn)，獲取當(dāng)前元素的子節(jié)點(diǎn)，獲取當(dāng)前元素的同級元素，獲取當(dāng)前元素的文本，獲取當(dāng)前節(jié)點(diǎn)的節(jié)點(diǎn)類型，設(shè)置樣式。

• 獲取當(dāng)前元素的父節(jié)點(diǎn)

代碼：

element.parentNode

• 獲取當(dāng)前元素的子節(jié)點(diǎn)

代碼：

element.chlidren

• 獲取當(dāng)前元素的同級元素

代碼：

element.nextElementSiblingelement.previousElementSibling

• 獲取當(dāng)前元素的文本

代碼：

element.innerHTMLelement.innerText

• 獲取當(dāng)前節(jié)點(diǎn)的節(jié)點(diǎn)類型

代碼：

node.nodeType

BOM對象

BOM對象，稱為內(nèi)置對象，是瀏覽器對象模型，也是JavaScript的重要組成部分。

window-》document,location,navigator,screen,history

window對象表示瀏覽器窗口

window.innerHeight獲取瀏覽器窗口的內(nèi)部高度,window.innerWidth獲取瀏覽器窗口的內(nèi)部寬度。

document.documentElement.clientHeight，document.documentElement.clientWidth；document.body.clientHeight，document.body.clientWidth。

打開新窗口，window.open(url)。

關(guān)閉當(dāng)前窗口，window.close()。

調(diào)整當(dāng)前窗口的尺寸，window.resizeTo(寬，高)

document對象

document屬性和方法：

屬性和方法說明

document.bgColor	設(shè)置頁面背景顏色
document.fgColor	設(shè)置前景色
document.linkColor	未點(diǎn)擊過的鏈接顏色
document.alinkCOlor	激活鏈接的顏色
document.vlinkColor	已點(diǎn)擊過的鏈接顏色
document.URL	設(shè)置url屬性，從而在同一窗口打開另一網(wǎng)頁
document.cookie	設(shè)置或讀出cookie
document.write()	動態(tài)地向頁面寫入內(nèi)容
document.createElement(Tag)	創(chuàng)建一個(gè)HTML標(biāo)簽對象
document.getElementById(ID)	獲得指定id值的對象
document.getElementsByName(Name)	獲得指定name值的對象
document.body	指定文檔主體的開始和結(jié)束
document.location.href	完整url
document.location.reload()	刷新當(dāng)前網(wǎng)頁
document.location.reload(url)	打開新的網(wǎng)頁

location對象

location屬性和方法：

屬性和方法說明

location.href	顯示當(dāng)前網(wǎng)頁的url鏈接
location.port	顯示當(dāng)前網(wǎng)頁鏈接的端口
location.reload()	重新刷新當(dāng)前頁面

navigator 對象

navigator對象包含有關(guān)瀏覽器的信息

屬性說明

appName	返回瀏覽器的名稱
appVersion	返回瀏覽器的平臺和版本信息
cookieEnabled	返回指明瀏覽器的是否啟用cookie的布爾值
platform	返回運(yùn)行瀏覽器的操作系統(tǒng)平臺

screen對象

每個(gè)window對象的screen屬性都引用一個(gè)scrren對象。

screen對象中存放有關(guān)顯示瀏覽器屏幕的信息。

screen對象的屬性：

屬性說明

availHeight	返回顯示屏幕的高度
availWidth	返回顯示屏幕的寬度
bufferDepth	設(shè)置或者返回調(diào)色板的比特深度
Height	返回顯示器屏幕的高度
Width	返回顯示器屏幕的寬度

history對象

history對象包含用戶訪問過url。

history對象的屬性：

屬性說明

history.length	返回瀏覽器歷史列表中的url數(shù)量
history.back()	加載history列表中的前一個(gè)url
history.forward()	加載history列表中的下一個(gè)url
history.go()	加載history列表中的某個(gè)具體頁面

內(nèi)置函數(shù)

字符串函數(shù)

數(shù)組函數(shù)

數(shù)學(xué)函數(shù)

日期函數(shù)

數(shù)學(xué)函數(shù)

屬性說明

ceil	大于或等于該數(shù)的最小整數(shù)，向上取整
floor	小于或等于該數(shù)的最大整數(shù)，向下取整
min(參數(shù)1，參數(shù)2)	返回最小值
max(參數(shù)1，參數(shù)2)	返回最大值
pow(參數(shù)1,參數(shù)2)	返回?cái)?shù)值1的數(shù)值2次方
random()	返回隨機(jī)數(shù)
round(數(shù)值)	四舍五入
sqrt(數(shù)值)	開平方根

日期函數(shù)

• set：用于設(shè)置Date對象的日期和時(shí)間的值。
• get：用去獲取Date對象的日期和時(shí)間的值。
• to：用于返回Date對象的字符串格式的值。
• parse和UTC：用于解析Date字符串。

屬性說明

getFullYear()	獲取完整的年份
getMonth()	獲取當(dāng)前月份
getDate()	獲取當(dāng)前日
getDay()	獲取當(dāng)前星期幾
getTime()	獲取當(dāng)前時(shí)間（從1970.1.1開始)
getHours()	獲取當(dāng)前小時(shí)數(shù)
getMinutes()	獲取當(dāng)前分?jǐn)?shù)
getSeconds()	獲取當(dāng)前秒數(shù)
toLocalDateString()	獲取當(dāng)前日期
toLocalTimeString()	獲取當(dāng)前時(shí)間
toLocalString()	獲取日期與時(shí)間

秒/分： 0 - 59；

時(shí)： 0 - 23；

星期： 0(周日) - 6(周六)

日期： 1 - 31

月份： 0(一月) - 11(十二月)

年份： 從1900開始的年數(shù)

定時(shí)器函數(shù)

setInterval()，按照指定的周期調(diào)用函數(shù)或者計(jì)算表達(dá)式。

setTimeout()，在指定的毫秒數(shù)后調(diào)用函數(shù)或者計(jì)算表達(dá)式。

區(qū)別：setTimeout()只運(yùn)行一次，setInterval()是循環(huán)執(zhí)行的。

函數(shù)

函數(shù)由函數(shù)名，參數(shù)，函數(shù)體，返回值4部分組成的。

代碼：

function 函數(shù)名(參數(shù)){函數(shù)體return 返回值 }

函數(shù)聲明3種：通過函數(shù)名聲明，在程序調(diào)用時(shí)才能執(zhí)行；通過將匿名函數(shù)賦值給變量，調(diào)用時(shí)可以執(zhí)行；通過new的方式來聲明，不需要調(diào)用，直接執(zhí)行。

代碼：

function web1 () {document.write("1"); } web1();var web2 = function(){document.write("2") } web2();// 無須調(diào)用，直接執(zhí)行，此方法不常用 var web3 = new function(document.write("3") );

函數(shù)返回值，函數(shù)執(zhí)行完可以有返回值，也可以沒有。

函數(shù)的調(diào)用：傳值調(diào)用，傳址調(diào)用，傳函數(shù)調(diào)用。

閉包函數(shù)

• 內(nèi)部函數(shù)只能在外部函數(shù)中訪問
• 內(nèi)部函數(shù)形成閉包
• 可以訪問外部函數(shù)的參數(shù)和變量
• 外部函數(shù)卻不能使用這個(gè)內(nèi)部函數(shù)的參數(shù)和變量
• 閉包可以給內(nèi)部函數(shù)的變量提供一定的安全保障

在js中一個(gè)函數(shù)在另一個(gè)函數(shù)中定義，就可以訪問到父函數(shù)的成員，內(nèi)部的函數(shù)就稱為閉合函數(shù)。

閉合是詞法閉包的簡稱，是引用了自由變量的函數(shù)。

閉包函數(shù)的特點(diǎn)：

閉包作為與函數(shù)成對的數(shù)據(jù)，在函數(shù)執(zhí)行過程中屬于激活狀態(tài)。

閉包運(yùn)行結(jié)束后，保持運(yùn)行過程中的最終數(shù)據(jù)狀態(tài)

閉包（英語：Closure），又稱詞法閉包（Lexical Closure）或函數(shù)閉包（function closures）

閉包在實(shí)現(xiàn)上是一個(gè)結(jié)構(gòu)體，它存儲了一個(gè)函數(shù)（通常是其入口地址）和一個(gè)關(guān)聯(lián)的環(huán)境（相當(dāng)于一個(gè)符號查找表）。

詞法作用域

代碼：

function init() {var name = "web"; // name 是一個(gè)被 init 創(chuàng)建的局部變量function displayName() { // displayName() 是內(nèi)部函數(shù)，一個(gè)閉包alert(name); // 使用了父函數(shù)中聲明的變量}displayName(); } init();

init() 創(chuàng)建了一個(gè)局部變量 name 和一個(gè)名為 displayName() 的函數(shù)。

displayName() 是定義在 init() 里的內(nèi)部函數(shù)，并且僅在 init() 函數(shù)體內(nèi)可用。

displayName() 沒有自己的局部變量。然而，因?yàn)樗梢栽L問到外部函數(shù)的變量，所以 displayName() 可以使用父函數(shù) init() 中聲明的變量 name 。

displayName() 函數(shù)內(nèi)的 alert() 語句成功顯示出了變量 name 的值（該變量在其父函數(shù)中聲明）。

這個(gè)詞法作用域的例子描述了分析器如何在函數(shù)嵌套的情況下解析變量名。

詞法指，詞法作用域根據(jù)源代碼中聲明變量的位置來確定該變量在何處可用。嵌套函數(shù)可訪問聲明于它們外部作用域的變量。

閉包是一個(gè)擁有許多變量和綁定了這些變量的環(huán)境的表達(dá)式（通常是一個(gè)函數(shù)），因而這些變量也是該表達(dá)式的一部分。

JavaScript中所有的function都是一個(gè)閉包。不過一般來說，嵌套的function所產(chǎn)生的閉包更為強(qiáng)大，也是大部分時(shí)候我們所謂的“閉包”。

閉包的作用

在a執(zhí)行完并返回后，閉包使得Javascript的垃圾回收機(jī)制GC不會收回a所占用的資源，因?yàn)閍的內(nèi)部函數(shù)b的執(zhí)行需要依賴a中的變量。

函數(shù)的執(zhí)行環(huán)境(excution context)

活動對象(call object)

作用域(scope)

作用域鏈(scope chain)

定時(shí)器和閉包

代碼如下：

for(var i = 0 ; i<10; i++){setTimeout(function(){console.log(i);},100); }

返回的是10個(gè)10。

解決：

使用ES6新增的let。

使用閉包

for(var i = 0; i<10 ; i++){(function(i){setTimeout(function(){console.log(i);}, i*100);})(i); }

ES6之前，使用var聲明變量會變量提升問題：

for(var i = 0 ; i<10; i++) {console.log(i) };console.log(i); // 變量提升 返回10

對象

聲明一個(gè)對象有兩種方法：通過new Object()和{}實(shí)現(xiàn)。

示例：

// 1 var Person = function(id,name){this.id = di;this.name = name; } var user1 = new Person(1,"web");// 2 var web1 = {id:1,name:"web"}; var web2 = Object.create({id:2,name:"web"});

正則表達(dá)式太難了

創(chuàng)建正則表達(dá)式

使用一個(gè)正則表達(dá)式字面量：

let reg = /ab+c/; let reg = /^[a-zA-z]/gi;

記不住，記不住，記不住。

正則表達(dá)式是由普通字符以及特殊字符組成的文字模式。

正則表達(dá)式中包含匹配符，定位符，限定符，轉(zhuǎn)義符等。

正則表達(dá)式中有兩種方法：字符串方法，正則對象方法。

字符串方法

屬性說明

search()	檢索與正則表達(dá)式相匹配的值
match()	找到一個(gè)或者多個(gè)正則表達(dá)式的匹配
replace()	替換與正則表達(dá)式的字符串
split()	把字符串分割為字符串?dāng)?shù)組

正則對象方法

RegExp對象方法

屬性說明

test()	用于檢測一個(gè)字符串是否匹配某個(gè)模式
exec()	該方法用于檢索字符串中的正則表達(dá)式的匹配,該函數(shù)返回一個(gè)數(shù)組

[a-z] 匹配小寫字母從a到z中的任意一個(gè)字符 [A-Z] 匹配大寫字母從a到z中的任意一個(gè)字符 [0-9] 匹配數(shù)字0到9中任意一個(gè)字符，等于 \d [0-9a-z] 匹配數(shù)字0到9或者小寫字母a到z中任意一個(gè)字符。 [0-9a-zA-Z] 匹配數(shù)字0到9或小寫a到z或大寫A到Z中任意一個(gè)字符 [abcd] 匹配字符abcd中的任意一個(gè)字符 [^a-z] 匹配除小寫字母a到z外的任意一個(gè)字符 [^0-9] 匹配除數(shù)字0到9外的任意一個(gè)字符 [^abcd] 匹配除abcd外的任意一個(gè)字符

元字符是擁有特殊含義的字符：

. 查找單個(gè)字符，除了換行和行結(jié)束符。 \w 查找單詞字符。 \W 查找非單詞字符。 \d 查找數(shù)字。 \D 查找非數(shù)字字符。 \s 查找空白字符。 \S 查找非空白字符。 \0 查找 NUL 字符。 \n 查找換行符。 \f 查找換頁符。 \r 查找回車符。 \t 查找制表符。 \v 查找垂直制表符。 \xxx 查找以八進(jìn)制數(shù) xxx 規(guī)定的字符。 \xdd 查找以十六進(jìn)制數(shù) dd 規(guī)定的字符。 \uxxxx 查找以十六進(jìn)制數(shù) xxxx 規(guī)定的 Unicode 字符。

量詞

量詞描述

量詞描述

n+	至少一個(gè) n 的字符串。
n*	零個(gè)或多個(gè) n 的字符串。
n?	零個(gè)或一個(gè) n 的字符串。
n{X}	X 個(gè) n 的序列的字符串。
n{X,Y}	X 至 Y 個(gè) n 的序列的字符串。
n{X,}	至少 X 個(gè) n 的序列的字符串。
n$	匹配任何結(jié)尾為 n 的字符串。
^n	匹配任何開頭為 n 的字符串。
?=n	匹配任何其后緊接指定字符串 n 的字符串。
?!n	匹配任何其后沒有緊接指定字符串 n 的字符串。

.定位符定位符可以將一個(gè)正則表達(dá)式固定在一行的開始或者結(jié)束，也可以創(chuàng)建只在單詞內(nèi)或者只在單詞的開始或者結(jié)尾處出現(xiàn)的正則表達(dá)式。 ^匹配輸入字符串的開始位置 $匹配輸入字符串的結(jié)束位置 \b匹配一個(gè)單詞邊界 \B匹配非單詞邊界 /^[\d]{4}-[\d]{1,2}-[\d]{1,2}${1,2}$]/ 日期字符 轉(zhuǎn)義符使用轉(zhuǎn)義符（反斜杠\)進(jìn)行轉(zhuǎn)義

new RegExp(str[, attr])接收2個(gè)參數(shù)，str是一個(gè)字符串，指定正則表達(dá)式匹配規(guī)則，attr可選，表示匹配模式，值有g(shù)(全局匹配),i(區(qū)分大小寫的匹配)和m(多行匹配)。

表達(dá)式：g,i,mg 表示全局模式應(yīng)用于所有字符串，而非在發(fā)現(xiàn)第一個(gè)匹配項(xiàng)就停止i 表示不區(qū)分大小寫模式m 表示多行模式繼續(xù)查找下一行中是否存在模式匹配的項(xiàng) 修飾符描述

i	執(zhí)行對大小寫不敏感的匹配。
g	執(zhí)行全局匹配。
m	執(zhí)行多行匹配。

arguments對象

函數(shù)的實(shí)際參數(shù)會被保存在一個(gè)類數(shù)組對象 arguments 對象中，通過索引訪問具體的參數(shù)：

var a = arguments[i]

使用arguments.length來獲取實(shí)際傳入?yún)?shù)的數(shù)量

arguments對象來獲取每個(gè)參數(shù)

文本框失去焦點(diǎn)事件、獲得焦點(diǎn)事件

onBlur:當(dāng)失去輸入焦點(diǎn)后產(chǎn)生該事件

onFocus:當(dāng)輸入獲得焦點(diǎn)后，產(chǎn)生該文件

Onchange:當(dāng)文字值改變時(shí)，產(chǎn)生該事件

Onselect:當(dāng)文字加亮后，產(chǎn)生該文件

記憶力最好的三個(gè)時(shí)間段

睡覺前2個(gè)小時(shí)

起床后的一個(gè)小時(shí)

上午8-10點(diǎn)

??感謝大家

1.如果本文對你有幫助，就點(diǎn)個(gè)贊支持下吧，你的「贊」是我創(chuàng)作的動力。

2.添加微信【xiaoda0423】，拉你進(jìn)技術(shù)交流群一起學(xué)習(xí)。

總結(jié)

以上是生活随笔為你收集整理的【思维导图】前端开发JavaScript-巩固你的JavaScript知识体系的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。