---

JS是什么？

制作動(dòng)態(tài)頁面 腳本語言 弱類型

TS 強(qiáng)類型

---

一、JS導(dǎo)入

1.HTML內(nèi)部包裹 但是只能單頁面使用

        <script>function suprise(){alert("Hello JS")}</script>

2. 引入外部JS文件

<script src="js/button.js" type="text/javascript"></script>

二、數(shù)據(jù)類型 變量 運(yùn)算符

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

• 數(shù)值類型統(tǒng)一為 number , 不區(qū)分整數(shù)和浮點(diǎn)數(shù)
• 字符串類型為 string 和JAVA中的String相似,JS中不嚴(yán)格區(qū)分單雙引號(hào),都可以用于表示字符串
• 布爾類型為boolean 和Java中的boolean相似,但是在JS的if語句中,
  • 非空字符串會(huì)被轉(zhuǎn)換為’真’;非零數(shù)字也會(huì)被認(rèn)為是’真’
• 引用數(shù)據(jù)類型對(duì)象是Object類型, 各種對(duì)象和數(shù)組在JS中都是Object類型
• JS中的各種函數(shù)屬于function數(shù)據(jù)類型
• js為弱類型語言,統(tǒng)一使用 var 聲明對(duì)象和變量,在賦值時(shí)才確定真正的數(shù)據(jù)類型,變量如果只聲明沒有賦值的話,數(shù)據(jù)類型為undefined
• 在JS中,如果給一個(gè)變量賦值為null,其數(shù)據(jù)類型是Object, 可以通過typeof關(guān)鍵字判斷數(shù)據(jù)類型

---

2.2 變量

• 弱類型變量,可以統(tǒng)一聲明成var
• var聲明的變量可以再次聲明
• 變量可以使用不同的數(shù)據(jù)類型多次賦值
• JS的語句可以以; 結(jié)尾,也可以不用;結(jié)尾
• 變量標(biāo)識(shí)符嚴(yán)格區(qū)分大小寫
• 如果使用了 一個(gè)沒有聲明的變量,那么運(yùn)行時(shí)會(huì)報(bào)
  • uncaught ReferenceError: *** is not defined at index.html:行號(hào):列號(hào) 錯(cuò)
• 如果一個(gè)變量只聲明,沒賦值,那么值是undefined

---

2.3 運(yùn)算符

算數(shù)運(yùn)算符 + - * / %

其中需要注意的是 / 和 %

• /在除0時(shí),結(jié)果是Infinity ,而不是報(bào)錯(cuò)
• %在模0時(shí),結(jié)果是NaN,意思為 not a number ,而不是報(bào)錯(cuò)

復(fù)合算數(shù)運(yùn)算符 ++ – += -= *= /= %=

同樣需要注意 /=和%= 結(jié)果與上同

關(guān)系運(yùn)算符 > < >= <= == === !=

需要注意的是 == 和 === 差別

• == 符號(hào),如果兩端的數(shù)據(jù)類型不一致,會(huì)嘗試將兩端的數(shù)據(jù)轉(zhuǎn)換成number,再對(duì)比number大小
  • ‘123’ 這種字符串可以轉(zhuǎn)換成數(shù)字
  • true會(huì)被轉(zhuǎn)換成1 false會(huì)被轉(zhuǎn)換成0
• === 符號(hào),如果兩端數(shù)據(jù)類型不一致,直接返回false,數(shù)據(jù)類型一致在比較是否相同

邏輯運(yùn)算符 || &&

條件運(yùn)算符 條件? 值1 : 值2

三、流程控制

3.1 IF

• if()中的非空字符串會(huì)被認(rèn)為是true
• if()中的非零數(shù)字會(huì)被認(rèn)為是true
  舉例：

if('false'){// 非空字符串 if判斷為trueconsole.log(true)
}else{console.log(false)
}
if(''){// 長(zhǎng)度為0字符串 if判斷為falseconsole.log(true)
}else{console.log(false)
}
if(1){// 非零數(shù)字 if判斷為trueconsole.log(true)
}else{console.log(false)
}
if(0){console.log(true)
}else{console.log(false)
}

---

3.2 Switch
與JAVA一致

var monthStr = prompt("請(qǐng)輸入月份：", "例如：10");
var month = Number.parseInt(monthStr);switch (month) {case 3:case 4:case 5 :console.log("春季");break;case 6 :case 7:case 8 :console.log("夏季");break;default :console.log("輸入有誤！");
}

---

3.3 循環(huán)

1. while

/* 打印99 乘法表 */
let i = 1;
while(i <= 9){let j = 1;while(j <= i){document.write(j + "*" + i + "=" + j * i + "&nbsp;&nbsp;&nbsp;&nbsp;");j++;}document.write("<hr/>");i++;
}

2. for

for (let i = 1; i <= 9; i++) {for (let j = 1; j <= i; j++) {document.write(j + "*" + i + "=" + j * i + "&nbsp;&nbsp;&nbsp;&nbsp;");}document.write("<hr/>")
}

3. foreach

var cities = ["北京","上海","深圳","武漢","西安","成都"];
document.write("<ul>");
for (var index in cities) {document.write("<li>"+cities[index]+"</li>")
}
document.write("</ul>");

四、函數(shù)

• 函數(shù)沒有權(quán)限控制符
• 不用聲明函數(shù)的返回值類型,需要返回在函數(shù)體中直接return即可,也無需void關(guān)鍵字
• 參數(shù)列表中,無需數(shù)據(jù)類型
• 調(diào)用函數(shù)時(shí),實(shí)參和形參的個(gè)數(shù)可以不一致
• 聲明函數(shù)時(shí)需要用function關(guān)鍵字
• 函數(shù)沒有異常列表

/*
語法1 : function 函數(shù)名 (參數(shù)列表){函數(shù)體}*/
function sum(a, b) {return a + b;
}var result = sum(1,2);
console.log(result);/*
語法2 : var 函數(shù)名 = function (參數(shù)列表){函數(shù)體}*/
var add = function (c,d) {return c*d;
}let result2 = add(1,2);
console.log(result2);

五、對(duì)象 與 JSON

5.1 對(duì)象

// 語法1 通過new Object()直接創(chuàng)建對(duì)象
let person = new Object();
// 添加屬性并且賦值
person.name = "Gavin";
person.age = 20;
person.foods=["橘子","樹莓","香蕉"];
//對(duì)象添加函數(shù)
person.eat = function () {console.log(this.age+" "+this.name+"吃:");for (let i = 0; i < this.foods.length; i++) {console.log(this.foods[i]);}
}
//調(diào)用對(duì)象屬性值
console.log(person.name);
console.log(person.age);
//調(diào)用對(duì)象方法
person.eat();

/*
* 語法2 通過 {}形式創(chuàng)建對(duì)象
* 語法為  var person ={
* "屬性名":"屬性值","屬性名","屬性值","函數(shù)名":函數(shù)}
* */
var person = {"name" : "Doug","age" : 25,"foods" : ["橘子","樹莓","香蕉"],"eat" : function () {console.log(this.age+" "+this.name+"吃:");for (let i = 0; i < this.foods.length; i++) {console.log(this.foods[i]);}}
}
//調(diào)用對(duì)象屬性值
console.log(person.name);
console.log(person.age);
//調(diào)用對(duì)象方法
person.eat();

5.2 JSON

一種字符串格式，可以轉(zhuǎn)換成對(duì)象，用于前后端傳輸數(shù)據(jù)。

• 通過JSON.parse()方法可以將一個(gè)JSON串轉(zhuǎn)換成對(duì)象

• 通過JSON.stringify()方法可以將一個(gè)對(duì)象轉(zhuǎn)換成一個(gè)JSON格式的字符串

• JSON的語法

  • var obj=“{‘屬性名’:‘屬性值’,‘屬性名’:{‘屬性名’:‘屬性值’},‘屬性名’:[‘值1’,‘值1’,‘值3’]}”

/* 定義一個(gè)JSON串 */
var guyStr = '{"name":"道格","age":26,"Friend":{"name":"維克","age":"24"},"food":["蘋果","香蕉","樹莓"],"pets":[{"type":"Dog","name":"刀疤"},{"type":"Cat","name":"喪彪"}]}';
/* 將一個(gè)JSON串轉(zhuǎn)換為對(duì)象 */
var guy = JSON.parse(guyStr);
console.log(guy);
console.log(typeof guy);// object
/* 獲取對(duì)象屬性值 */
console.log(guy.name);
console.log(guy.Friend.name);
console.log(guy.food[0]);
console.log(guy.pets[1].type);

/* 定義一個(gè)對(duì)象 */
var student = {"name" : "道格","age" : 26,"Friend" : {"name" : "維克","age" : "24"},"food" : ["蘋果","香蕉","樹莓"],"pets" : [{"type" : "Dog" , "name" : "刀疤"},{"type" : "Cat" , "name" : "喪彪"}]
}
/* 獲取對(duì)象屬性值 */
console.log(student.name);
console.log(student.age);
console.log(student.Friend.name);
for (let i = 0; i < student.food.length; i++) {console.log(student.food[i]);
}
console.log(student.pets[0].type);
/* 將對(duì)象轉(zhuǎn)換成JSON字符串 */
var stuStrForJSON = JSON.stringify(student);
console.log(stuStrForJSON);
console.log(typeof  stuStrForJSON);

5.3 常見對(duì)象

1. 數(shù)組

創(chuàng)建數(shù)組四種方式：

• new Array() 創(chuàng)建空數(shù)組
• new Array(5) 創(chuàng)建數(shù)組時(shí)給定長(zhǎng)度
• new Array(ele1,ele2,ele3,… … ,elen); 創(chuàng)建數(shù)組時(shí)指定元素值
• [ele1,ele2,ele3,… … ,elen]; 相當(dāng)于第三種語法的簡(jiǎn)寫

數(shù)組常見API：
JS數(shù)組屬于Object類型,其長(zhǎng)度是可以變化的,更像JAVA中的集合

方法	描述
concat()	連接兩個(gè)或更多的數(shù)組，并返回結(jié)果。
copyWithin()	從數(shù)組的指定位置拷貝元素到數(shù)組的另一個(gè)指定位置中。
entries()	返回?cái)?shù)組的可迭代對(duì)象。
every()	檢測(cè)數(shù)值元素的每個(gè)元素是否都符合條件。
fill()	使用一個(gè)固定值來填充數(shù)組。
filter()	檢測(cè)數(shù)值元素，并返回符合條件所有元素的數(shù)組。
find()	返回符合傳入測(cè)試（函數(shù)）條件的數(shù)組元素。
findIndex()	返回符合傳入測(cè)試（函數(shù)）條件的數(shù)組元素索引。
forEach()	數(shù)組每個(gè)元素都執(zhí)行一次回調(diào)函數(shù)。
from()	通過給定的對(duì)象中創(chuàng)建一個(gè)數(shù)組。
includes()	判斷一個(gè)數(shù)組是否包含一個(gè)指定的值。
indexOf()	搜索數(shù)組中的元素，并返回它所在的位置。
isArray()	判斷對(duì)象是否為數(shù)組。
join()	把數(shù)組的所有元素放入一個(gè)字符串。
keys()	返回?cái)?shù)組的可迭代對(duì)象，包含原始數(shù)組的鍵(key)。
lastIndexOf()	搜索數(shù)組中的元素，并返回它最后出現(xiàn)的位置。
map()	通過指定函數(shù)處理數(shù)組的每個(gè)元素，并返回處理后的數(shù)組。
pop()	刪除數(shù)組的最后一個(gè)元素并返回刪除的元素。
push()	向數(shù)組的末尾添加一個(gè)或更多元素，并返回新的長(zhǎng)度。
reduce()	將數(shù)組元素計(jì)算為一個(gè)值（從左到右）。
reduceRight()	將數(shù)組元素計(jì)算為一個(gè)值（從右到左）。
reverse()	反轉(zhuǎn)數(shù)組的元素順序。
shift()	刪除并返回?cái)?shù)組的第一個(gè)元素。
slice()	選取數(shù)組的一部分，并返回一個(gè)新數(shù)組。
some()	檢測(cè)數(shù)組元素中是否有元素符合指定條件。
sort()	對(duì)數(shù)組的元素進(jìn)行排序。
splice()	從數(shù)組中添加或刪除元素。
toString()	把數(shù)組轉(zhuǎn)換為字符串，并返回結(jié)果。
unshift()	向數(shù)組的開頭添加一個(gè)或更多元素，并返回新的長(zhǎng)度。
valueOf()	返回?cái)?shù)組對(duì)象的原始值。
Array.of()	將一組值轉(zhuǎn)換為數(shù)組。
Array.at()	用于接收一個(gè)整數(shù)值并返回該索引對(duì)應(yīng)的元素，允許正數(shù)和負(fù)數(shù)。負(fù)整數(shù)從數(shù)組中的最后一個(gè)元素開始倒數(shù)。
Array.flat()	創(chuàng)建一個(gè)新數(shù)組，這個(gè)新數(shù)組由原數(shù)組中的每個(gè)元素都調(diào)用一次提供的函數(shù)后的返回值組成。
Array.flatMap()	使用映射函數(shù)映射每個(gè)元素，然后將結(jié)果壓縮成一個(gè)新數(shù)組。

2. Boolean對(duì)象

toString()	把布爾值轉(zhuǎn)換為字符串，并返回結(jié)果。
valueOf()	返回 Boolean 對(duì)象的原始值。

3. Date對(duì)象

方法	描述
getDate()	從 Date 對(duì)象返回一個(gè)月中的某一天 (1 ~ 31)。
getDay()	從 Date 對(duì)象返回一周中的某一天 (0 ~ 6)。
getFullYear()	從 Date 對(duì)象以四位數(shù)字返回年份。
getHours()	返回 Date 對(duì)象的小時(shí) (0 ~ 23)。
getMilliseconds()	返回 Date 對(duì)象的毫秒(0 ~ 999)。
getMinutes()	返回 Date 對(duì)象的分鐘 (0 ~ 59)。
getMonth()	從 Date 對(duì)象返回月份 (0 ~ 11)。
getSeconds()	返回 Date 對(duì)象的秒數(shù) (0 ~ 59)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒數(shù)。
getTimezoneOffset()	返回本地時(shí)間與格林威治標(biāo)準(zhǔn)時(shí)間 (GMT) 的分鐘差。
getUTCDate()	根據(jù)世界時(shí)從 Date 對(duì)象返回月中的一天 (1 ~ 31)。
getUTCDay()	根據(jù)世界時(shí)從 Date 對(duì)象返回周中的一天 (0 ~ 6)。
getUTCFullYear()	根據(jù)世界時(shí)從 Date 對(duì)象返回四位數(shù)的年份。
getUTCHours()	根據(jù)世界時(shí)返回 Date 對(duì)象的小時(shí) (0 ~ 23)。
getUTCMilliseconds()	根據(jù)世界時(shí)返回 Date 對(duì)象的毫秒(0 ~ 999)。
getUTCMinutes()	根據(jù)世界時(shí)返回 Date 對(duì)象的分鐘 (0 ~ 59)。
getUTCMonth()	根據(jù)世界時(shí)從 Date 對(duì)象返回月份 (0 ~ 11)。
getUTCSeconds()	根據(jù)世界時(shí)返回 Date 對(duì)象的秒鐘 (0 ~ 59)。
getYear()	已廢棄。 請(qǐng)使用 getFullYear() 方法代替。
parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒數(shù)。
setDate()	設(shè)置 Date 對(duì)象中月的某一天 (1 ~ 31)。
setFullYear()	設(shè)置 Date 對(duì)象中的年份（四位數(shù)字）。
setHours()	設(shè)置 Date 對(duì)象中的小時(shí) (0 ~ 23)。
setMilliseconds()	設(shè)置 Date 對(duì)象中的毫秒 (0 ~ 999)。
setMinutes()	設(shè)置 Date 對(duì)象中的分鐘 (0 ~ 59)。
setMonth()	設(shè)置 Date 對(duì)象中月份 (0 ~ 11)。
setSeconds()	設(shè)置 Date 對(duì)象中的秒鐘 (0 ~ 59)。
setTime()	setTime() 方法以毫秒設(shè)置 Date 對(duì)象。
setUTCDate()	根據(jù)世界時(shí)設(shè)置 Date 對(duì)象中月份的一天 (1 ~ 31)。
setUTCFullYear()	根據(jù)世界時(shí)設(shè)置 Date 對(duì)象中的年份（四位數(shù)字）。
setUTCHours()	根據(jù)世界時(shí)設(shè)置 Date 對(duì)象中的小時(shí) (0 ~ 23)。
setUTCMilliseconds()	根據(jù)世界時(shí)設(shè)置 Date 對(duì)象中的毫秒 (0 ~ 999)。
setUTCMinutes()	根據(jù)世界時(shí)設(shè)置 Date 對(duì)象中的分鐘 (0 ~ 59)。
setUTCMonth()	根據(jù)世界時(shí)設(shè)置 Date 對(duì)象中的月份 (0 ~ 11)。
setUTCSeconds()	setUTCSeconds() 方法用于根據(jù)世界時(shí) (UTC) 設(shè)置指定時(shí)間的秒字段。
setYear()	已廢棄。請(qǐng)使用 setFullYear() 方法代替。
toDateString()	把 Date 對(duì)象的日期部分轉(zhuǎn)換為字符串。
toGMTString()	已廢棄。請(qǐng)使用 toUTCString() 方法代替。
toISOString()	使用 ISO 標(biāo)準(zhǔn)返回字符串的日期格式。
toJSON()	以 JSON 數(shù)據(jù)格式返回日期字符串。
toLocaleDateString()	根據(jù)本地時(shí)間格式，把 Date 對(duì)象的日期部分轉(zhuǎn)換為字符串。
toLocaleTimeString()	根據(jù)本地時(shí)間格式，把 Date 對(duì)象的時(shí)間部分轉(zhuǎn)換為字符串。
toLocaleString()	根據(jù)本地時(shí)間格式，把 Date 對(duì)象轉(zhuǎn)換為字符串。
toString()	把 Date 對(duì)象轉(zhuǎn)換為字符串。
toTimeString()	把 Date 對(duì)象的時(shí)間部分轉(zhuǎn)換為字符串。
toUTCString()	根據(jù)世界時(shí)，把 Date 對(duì)象轉(zhuǎn)換為字符串。實(shí)例：var today = new Date(); var UTCstring = today.toUTCString();
UTC()	根據(jù)世界時(shí)返回 1970 年 1 月 1 日 到指定日期的毫秒數(shù)。
valueOf()	返回 Date 對(duì)象的原始值。

4. Math

方法	描述
abs(x)	返回 x 的絕對(duì)值。
acos(x)	返回 x 的反余弦值。
asin(x)	返回 x 的反正弦值。
atan(x)	以介于 -PI/2 與 PI/2 弧度之間的數(shù)值來返回 x 的反正切值。
atan2(y,x)	返回從 x 軸到點(diǎn) (x,y) 的角度（介于 -PI/2 與 PI/2 弧度之間）。
ceil(x)	對(duì)數(shù)進(jìn)行上舍入。
cos(x)	返回?cái)?shù)的余弦。
exp(x)	返回 Ex 的指數(shù)。
floor(x)	對(duì) x 進(jìn)行下舍入。
log(x)	返回?cái)?shù)的自然對(duì)數(shù)（底為e）。
max(x,y,z,…,n)	返回 x,y,z,…,n 中的最高值。
min(x,y,z,…,n)	返回 x,y,z,…,n中的最低值。
pow(x,y)	返回 x 的 y 次冪。
random()	返回 0 ~ 1 之間的隨機(jī)數(shù)。
round(x)	四舍五入。
sin(x)	返回?cái)?shù)的正弦。
sqrt(x)	返回?cái)?shù)的平方根。
tan(x)	返回角的正切。
tanh(x)	返回一個(gè)數(shù)的雙曲正切函數(shù)值。
trunc(x)	將數(shù)字的小數(shù)部分去掉，只保留整數(shù)部分。

5. Number

方法	描述
isFinite	檢測(cè)指定參數(shù)是否為無窮大。
isInteger	檢測(cè)指定參數(shù)是否為整數(shù)。
isNaN	檢測(cè)指定參數(shù)是否為 NaN。
isSafeInteger	檢測(cè)指定參數(shù)是否為安全整數(shù)。
toExponential(x)	把對(duì)象的值轉(zhuǎn)換為指數(shù)計(jì)數(shù)法。
toFixed(x)	把數(shù)字轉(zhuǎn)換為字符串，結(jié)果的小數(shù)點(diǎn)后有指定位數(shù)的數(shù)字。
toLocaleString(locales, options)	返回?cái)?shù)字在特定語言環(huán)境下的表示字符串。
toPrecision(x)	把數(shù)字格式化為指定的長(zhǎng)度。
toString()	把數(shù)字轉(zhuǎn)換為字符串，使用指定的基數(shù)。
valueOf()	返回一個(gè) Number 對(duì)象的基本數(shù)字值。

6. String

方法	描述
charAt()	返回在指定位置的字符。
charCodeAt()	返回在指定的位置的字符的 Unicode 編碼。
concat()	連接兩個(gè)或更多字符串，并返回新的字符串。
endsWith()	判斷當(dāng)前字符串是否是以指定的子字符串結(jié)尾的（區(qū)分大小寫）。
fromCharCode()	將 Unicode 編碼轉(zhuǎn)為字符。
indexOf()	返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置。
includes()	查找字符串中是否包含指定的子字符串。
lastIndexOf()	從后向前搜索字符串，并從起始位置（0）開始計(jì)算返回字符串最后出現(xiàn)的位置。
match()	查找找到一個(gè)或多個(gè)正則表達(dá)式的匹配。
repeat()	復(fù)制字符串指定次數(shù)，并將它們連接在一起返回。
replace()	在字符串中查找匹配的子串，并替換與正則表達(dá)式匹配的子串。
replaceAll()	在字符串中查找匹配的子串，并替換與正則表達(dá)式匹配的所有子串。
search()	查找與正則表達(dá)式相匹配的值。
slice()	提取字符串的片斷，并在新的字符串中返回被提取的部分。
split()	把字符串分割為字符串?dāng)?shù)組。
startsWith()	查看字符串是否以指定的子字符串開頭。
substr()	從起始索引號(hào)提取字符串中指定數(shù)目的字符。
substring()	提取字符串中兩個(gè)指定的索引號(hào)之間的字符。
toLowerCase()	把字符串轉(zhuǎn)換為小寫。
toUpperCase()	把字符串轉(zhuǎn)換為大寫。
trim()	去除字符串兩邊的空白。
toLocaleLowerCase()	根據(jù)本地主機(jī)的語言環(huán)境把字符串轉(zhuǎn)換為小寫。
toLocaleUpperCase()	根據(jù)本地主機(jī)的語言環(huán)境把字符串轉(zhuǎn)換為大寫。
valueOf()	返回某個(gè)字符串對(duì)象的原始值。
toString()	返回一個(gè)字符串。

六、事件

事件就是與瀏覽器交互的行為事件，比如點(diǎn)擊按鈕 發(fā)生相應(yīng)的事件，也就是執(zhí)行函數(shù)功能，點(diǎn)擊調(diào)用方法。

6.1 常用方法

1. 鼠標(biāo)事件

屬性	描述
onclick	當(dāng)用戶點(diǎn)擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。
oncontextmenu	在用戶點(diǎn)擊鼠標(biāo)右鍵打開上下文菜單時(shí)觸發(fā)
ondblclick	當(dāng)用戶雙擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。
onmousedown	鼠標(biāo)按鈕被按下。
onmouseenter	當(dāng)鼠標(biāo)指針移動(dòng)到元素上時(shí)觸發(fā)。
onmouseleave	當(dāng)鼠標(biāo)指針移出元素時(shí)觸發(fā)
onmousemove	鼠標(biāo)被移動(dòng)。
onmouseover	鼠標(biāo)移到某元素之上。
onmouseout	鼠標(biāo)從某元素移開。
onmouseup	鼠標(biāo)按鍵被松開。

2. 鍵盤事件

屬性	描述
onkeydown	某個(gè)鍵盤按鍵被按下。
onkeypress	某個(gè)鍵盤按鍵被按下并松開。
onkeyup	某個(gè)鍵盤按鍵被松開。

3. 表單事件

屬性	描述
onblur	元素失去焦點(diǎn)時(shí)觸發(fā)
onchange	該事件在表單元素的內(nèi)容改變時(shí)觸發(fā)( , , , 和 )
onfocus	元素獲取焦點(diǎn)時(shí)觸發(fā)
onfocusin	元素即將獲取焦點(diǎn)時(shí)觸發(fā)
onfocusout	元素即將失去焦點(diǎn)時(shí)觸發(fā)
oninput	元素獲取用戶輸入時(shí)觸發(fā)
onreset	表單重置時(shí)觸發(fā)
onsearch	用戶向搜索域輸入文本時(shí)觸發(fā) ( <input=“search”>)
onselect	用戶選取文本時(shí)觸發(fā) ( 和 )
onsubmit	表單提交時(shí)觸發(fā)

6.2 事件的綁定

1. 通過屬性綁定

<head><meta charset="UTF-8"><title>Title</title><script>function testDown1(){console.log("down1")}function testDown2(){console.log("down2")}function testFocus(){console.log("獲得焦點(diǎn)")}function testBlur(){console.log("失去焦點(diǎn)")}function testChange(input){console.log("內(nèi)容改變")console.log(input.value);}function testMouseOver(){console.log("鼠標(biāo)懸停")}function testMouseLeave(){console.log("鼠標(biāo)離開")}function testMouseMove(){console.log("鼠標(biāo)移動(dòng)")}</script>
</head>
<body>
<input type="text"oncontextmenu="testDown2()"ondblclick="testFocus()"onmouseup="testBlur()"onmousedown="testDown1()"onmouseenter="testMouseOver()"onmousemove="testMouseMove()"onmouseleave="testMouseLeave()"onkeydown="testDown1(),testDown2()"onchange="testChange(this)"
/>
<button onclick="testDown1()">按鈕</button>
</body>

• 通過事件屬性綁定函數(shù),在行為發(fā)生時(shí)會(huì)自動(dòng)執(zhí)行函數(shù)
• 一個(gè)事件可以同時(shí)綁定多個(gè)函數(shù)
• 一個(gè)元素可以同時(shí)綁定多個(gè)事件
• 方法中可以傳入 this對(duì)象,代表當(dāng)前元素

2.通過DOM編程綁定 與 觸發(fā)

<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>// 頁面加載完畢事件,瀏覽器加載完整個(gè)文檔行為window.onload = function () {var inpId = document.getElementById("testInp");// 通過DOM編程綁定事件inpId.onchange = testChange;var byId = document.getElementById("btn1");byId.onclick = function () {console.log("被點(diǎn)了");// 調(diào)用事件方法觸發(fā)事件inpId.onchange();}}function testChange() {console.log("內(nèi)容改變");console.log(event.target.value);}</script>
</head>
<body>
<input type="text" id="testInp"/>
<button id="btn1">按鈕</button>
</body>
</html>

七、BOM編程

BOM是Browser Object Model的簡(jiǎn)寫，即瀏覽器對(duì)象模型。
通過window對(duì)象及屬性的一系列方法 控制瀏覽器行為的一種編程

BOM編程的對(duì)象結(jié)構(gòu)如下 :

• window 頂級(jí)對(duì)象,代表整個(gè)瀏覽器窗口
  • location對(duì)象 window對(duì)象的屬性之一,代表瀏覽器的地址欄
  • history對(duì)象 window對(duì)象的屬性之一,代表瀏覽器的訪問歷史
  • screen對(duì)象 window對(duì)象的屬性之一,代表屏幕
  • navigator對(duì)象 window對(duì)象的屬性之一,代表瀏覽器軟件本身
  • document對(duì)象 window對(duì)象的屬性之一,代表瀏覽器窗口目前解析的html文檔
  • console對(duì)象 window對(duì)象的屬性之一,代表瀏覽器開發(fā)者工具的控制臺(tái)
  • localStorage對(duì)象 window對(duì)象的屬性之一,代表瀏覽器的本地?cái)?shù)據(jù)持久化存儲(chǔ)
  • sessionStorage對(duì)象 window對(duì)象的屬性之一,代表瀏覽器的本地?cái)?shù)據(jù)會(huì)話級(jí)存儲(chǔ)
    

7.1 BOM控制瀏覽器行為演示

1. 三種彈窗方法：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function testAlert() {//普通信息彈窗window.alert("提示信息")}function testConfirm() {//  確認(rèn)框var con = confirm("確認(rèn)刪除？")if(con){alert("確認(rèn)")}else{alert("NO")}}function testPrompt(){//信息輸入 對(duì)話框var res = prompt("請(qǐng)輸入名稱","例如：道格");alert("您輸入的是：" + res);}</script>
</head>
<body><input type="button" value="提示框" onclick="testAlert()"/> <br><input type="button" value="確認(rèn)框" onclick="testConfirm()"/> <br><input type="button" value="對(duì)話框" onclick="testPrompt()"/> <br>
</body>
</html>

2. 頁面跳轉(zhuǎn)

<head><meta charset="UTF-8"><title>Title</title><script>function goGitHub() {var flag = confirm("即將切換到GitHub！")if(flag){//    通過BOM地址欄切換URLwindow.location.href = "https://github.com/knellwake";}}</script>
</head>
<body><button onclick="goGitHub()">跳轉(zhuǎn)頁面</button>
</body>
</html>

7.2 BOM實(shí)現(xiàn)會(huì)話級(jí)和持久級(jí)數(shù)據(jù)存儲(chǔ)

• 會(huì)話級(jí)數(shù)據(jù) : 內(nèi)存型數(shù)據(jù),是瀏覽器在內(nèi)存上臨時(shí)存儲(chǔ)的數(shù)據(jù),瀏覽器關(guān)閉后,數(shù)據(jù)失去,通過window的sessionStorge屬性實(shí)現(xiàn)
• 持久級(jí)數(shù)據(jù) : 磁盤型數(shù)據(jù),是瀏覽器在磁盤上持久存儲(chǔ)的數(shù)據(jù),瀏覽器關(guān)閉后,數(shù)據(jù)仍在,通過window的localStorge實(shí)現(xiàn)
• 可以用于將來存儲(chǔ)一些服務(wù)端響應(yīng)回來的數(shù)據(jù),比如:token令牌,或者一些其他功能數(shù)據(jù),根據(jù)數(shù)據(jù)的業(yè)務(wù)范圍我們可以選擇數(shù)據(jù)存儲(chǔ)的會(huì)話/持久 級(jí)別

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function saveItem(){//  存儲(chǔ)會(huì)話 臨時(shí)window.sessionStorage.setItem("sessionMsg","sessionValue");//  存儲(chǔ)持久window.localStorage.setItem("localMsg","localValue");console.log("ok!")}function removeItem() {//  刪除數(shù)據(jù)sessionStorage.removeItem("sessionMsg");localStorage.removeItem("localMsg");}function readItem() {//  讀取數(shù)據(jù)console.log("開始讀取：")console.log("session:" + sessionStorage.getItem("sessionMsg"));console.log("local:" + localStorage.getItem("localMsg"));}</script>
</head>
<body><input type="button" value="存儲(chǔ)數(shù)據(jù)" onclick="saveItem()"><input type="button" value="讀取數(shù)據(jù)" onclick="readItem()"><input type="button" value="刪除數(shù)據(jù)" onclick="removeItem()">
</body>
</html>

結(jié)果：

1. 會(huì)話 數(shù)據(jù) 關(guān)閉瀏覽器再打開 讀取后為Null
2. 持久 存儲(chǔ)的 存在 ， 刪除后也為 Null
   

八、DOM編程

DOM(Document Object Model)編程就是使用document對(duì)象的API完成對(duì)網(wǎng)頁HTML文檔進(jìn)行動(dòng)態(tài)修改,以實(shí)現(xiàn)網(wǎng)頁數(shù)據(jù)和樣式動(dòng)態(tài)變化效果的編程.

• document對(duì)象代表整個(gè)html文檔，可用來訪問頁面中的所有元素
• 根據(jù)HTML代碼結(jié)構(gòu)特點(diǎn),document對(duì)象本身是一種樹形結(jié)構(gòu)的文檔對(duì)象。
  
  以上代碼的生成樹結(jié)構(gòu)
  
  DOM編程其實(shí)就是用window對(duì)象的document屬性的相關(guān)API完成對(duì)頁面元素的控制的編程
  
  DOM樹中節(jié)點(diǎn)的類型
• node 節(jié)點(diǎn),所有結(jié)點(diǎn)的父類型
  • element 元素節(jié)點(diǎn),node的子類型之一,代表一個(gè)完整標(biāo)簽
  • attribute 屬性節(jié)點(diǎn),node的子類型之一,代表元素的屬性
  • text 文本節(jié)點(diǎn),node的子類型之一,代表雙標(biāo)簽中間的文本

8.1 獲取頁面元素的幾種方式

1. 在整個(gè)文檔范圍內(nèi)查找元素結(jié)點(diǎn)

功能	API	返回值
根據(jù)id值查詢	document.getElementById(“id值”)	一個(gè)具體的元素節(jié)
根據(jù)標(biāo)簽名查詢	document.getElementsByTagName(“標(biāo)簽名”)	元素節(jié)點(diǎn)數(shù)組
根據(jù)name屬性值查詢	document.getElementsByName(“name值”)	元素節(jié)點(diǎn)數(shù)組
根據(jù)類名查詢	document.getElementsByClassName(“類名”)	元素節(jié)點(diǎn)數(shù)組

2. 在具體元素節(jié)點(diǎn)范圍內(nèi)查找子節(jié)點(diǎn)

功能	API	返回值
查找子標(biāo)簽	element.children	返回子標(biāo)簽數(shù)組
查找第一個(gè)子標(biāo)簽	element.firstElementChild	標(biāo)簽對(duì)象
查找最后一個(gè)子標(biāo)簽	element.lastElementChild	節(jié)點(diǎn)對(duì)象

3. 查找指定子元素節(jié)點(diǎn)的父節(jié)點(diǎn)

功能	API	返回值
查找指定元素節(jié)點(diǎn)的父標(biāo)簽	element.parentElement	標(biāo)簽對(duì)象

4. 查找指定元素節(jié)點(diǎn)的兄弟節(jié)點(diǎn)

功能	API	返回值
查找前一個(gè)兄弟標(biāo)簽	node.previousElementSibling	標(biāo)簽對(duì)象
查找后一個(gè)兄弟標(biāo)簽	node.nextElementSibling	標(biāo)簽對(duì)象

<head><meta charset="UTF-8"><title>Title</title><script>/*
1 獲得document  dom樹window.document
2 從document中獲取要操作的元素1. 直接獲取var el1 =document.getElementById("username") // 根據(jù)元素的id值獲取頁面上唯一的一個(gè)元素var els =document.getElementsByTagName("input") // 根據(jù)元素的標(biāo)簽名獲取多個(gè)同名元素var els =document.getElementsByName("Doug") // 根據(jù)元素的name屬性值獲得多個(gè)元素var els =document.getElementsByClassName("calssA") // 根據(jù)元素的class屬性值獲得多個(gè)元素2. 間接獲取var cs=div01.children // 通過父元素獲取全部的子元素var firstChild =div01.firstElementChild  // 通過父元素獲取第一個(gè)子元素var lastChild = div01.lastElementChild   // 通過父元素獲取最后一個(gè)子元素var parent = pinput.parentElement  // 通過子元素獲取父元素var pElement = pinput.previousElementSibling // 獲取前面的第一個(gè)元素var nElement = pinput.nextElementSibling // 獲取后面的第一個(gè)元素
*/function fun1(){//1 獲得document//2 通過document獲得元素var el1 = document.getElementById("username"); // 根據(jù)元素的id值獲取頁面上唯一的一個(gè)元素console.log(el1);}function fun2(){var els = document.getElementsByTagName("input"); // 根據(jù)元素的標(biāo)簽名獲取多個(gè)同名元素for(var i = 0 ; i < els.length ; i++){console.log(els[i]);}}function fun3(){var els = document.getElementsByName("Doug") // 根據(jù)元素的name屬性值獲得多個(gè)元素console.log(els)for(var i = 0;i < els.length;i++){console.log(els[i])}}function fun4(){var els =document.getElementsByClassName("classA") // 根據(jù)元素的class屬性值獲得多個(gè)元素for(var i = 0 ; i < els.length ; i++){console.log(els[i])}}function fun5(){// 先獲取父元素var div01 = document.getElementById("div01")// 獲取所有子元素var cs=div01.children // 通過父元素獲取全部的子元素for(var i =0;i< cs.length;i++){console.log(cs[i])}console.log(div01.firstElementChild)  // 通過父元素獲取第一個(gè)子元素console.log(div01.lastElementChild)   // 通過父元素獲取最后一個(gè)子元素}function fun6(){// 獲取子元素var pinput = document.getElementById("password")console.log(pinput.parentElement) // 通過子元素獲取父元素}function fun7(){// 獲取子元素var pinput = document.getElementById("password")console.log(pinput.previousElementSibling) // 獲取前面的第一個(gè)元素console.log(pinput.nextElementSibling) // 獲取后面的第一個(gè)元素}</script>
</head>
<body>
<div id="div01"><input type="text" class="classA" id="username" name="Doug"/><input type="text" class="classB" id="password" name="Doug"/><input type="text" class="classA" id="email"/><input type="text" class="classC" id="address"/>
</div>
<input type="text" class="classA"/><br><hr>
<input type="button" value="通過父元素獲取子元素" onclick="fun5()" id="btn05"/>
<input type="button" value="通過子元素獲取父元素" onclick="fun6()" id="btn06"/>
<input type="button" value="通過當(dāng)前元素獲取兄弟元素" onclick="fun7()" id="btn07"/>
<hr><input type="button" value="根據(jù)id獲取指定元素" onclick="fun1()" id="btn01"/>
<input type="button" value="根據(jù)標(biāo)簽名獲取多個(gè)元素" onclick="fun2()" id="btn02"/>
<input type="button" value="根據(jù)name屬性值獲取多個(gè)元素" onclick="fun3()" id="btn03"/>
<input type="button" value="根據(jù)class屬性值獲得多個(gè)元素" onclick="fun4()" id="btn04"/>
</body>
</html>

8.2 操作元素的屬性值

1. 屬性操作

需求	操作方式
讀取屬性值	元素對(duì)象.屬性名
修改屬性值	元素對(duì)象.屬性名=新的屬性值

2. 內(nèi)部文本操作

需求	操作方式
獲取或者設(shè)置標(biāo)簽體的文本內(nèi)容	element.innerText
獲取或者設(shè)置標(biāo)簽體的內(nèi)容	element.innerHTML

<head><meta charset="UTF-8"><title>Title</title><script>/*對(duì)元素進(jìn)行操作1. 操作元素的屬性   元素名.屬性名=""2. 操作元素的樣式   元素名.style.樣式名=""  樣式名"-" 要進(jìn)行駝峰轉(zhuǎn)換3. 操作元素的文本   元素名.innerText   只識(shí)別文本元素名.innerHTML   同時(shí)可以識(shí)別html代碼*/function changeAttribute() {var in1 = document.getElementById("in1")// 語法 元素.屬性名=""// 獲得屬性值console.log(in1.type)console.log(in1.value)// 修改屬性值in1.type = "button"in1.value = "嗨"}function changeStyle() {var in1 = document.getElementById("in1")// 語法  元素.style.樣式名=""   原始樣式名中的"-"符號(hào) 要轉(zhuǎn)換駝峰式  background-color > backgroundColorin1.style.color = "green"in1.style.borderRadius = "5px"}function changeText() {var div01 = document.getElementById("div01")/*語法  元素名.innerText   只識(shí)別文本元素名.innerHTML   同時(shí)可以識(shí)別html代碼*/console.log(div01.innerText)div01.innerHTML = "<h1>嗨</h1>"}</script><style>#in1 {color: red;}</style>
</head>
<body><input id="in1" type="text" value="hello">
<div id="div01">hello
</div><hr>
<button onclick="changeAttribute()">操作屬性</button>
<button onclick="changeStyle()">操作樣式</button>
<button onclick="changeText()">操作文本</button></body>
</html>

8.3 增刪元素

對(duì)頁面的元素進(jìn)行增刪操作

API	功能
document.createElement(“標(biāo)簽名”)	創(chuàng)建元素節(jié)點(diǎn)并返回，但不會(huì)自動(dòng)添加到文檔中
document.createTextNode(“文本值”)	創(chuàng)建文本節(jié)點(diǎn)并返回，但不會(huì)自動(dòng)添加到文檔中
element.appendChild(ele)	將ele添加到element所有子節(jié)點(diǎn)后面
parentEle.insertBefore(newEle,targetEle)	將newEle插入到targetEle前面
parentEle.replaceChild(newEle, oldEle)	用新節(jié)點(diǎn)替換原有的舊子節(jié)點(diǎn)
element.remove()	刪除某個(gè)標(biāo)簽

<head><meta charset="UTF-8"><title>Title</title><script>/*    增刪元素var element =document.createElement("元素名") // 創(chuàng)建元素父元素.appendChild(子元素)               // 在父元素中追加子元素父元素.insertBefore(新元素,參照元素)     // 在某個(gè)元素前增加元素父元素.replaceChild(新元素,被替換的元素) // 用新的元素替換某個(gè)子子元素元素.remove()                            // 刪除當(dāng)前元素*/function addFz() {// 獲取父元素 IDvar cityUl = document.getElementById("city");// 創(chuàng)建新元素 <li></li>var fzLi = document.createElement("li");// 設(shè)置新元素 id 屬性 文本 <li id="cs">福州</li>fzLi.id = "fz";fzLi.innerText = "福州";//在父元素中追加子元素cityUl.appendChild(fzLi);}function addCsBeforeSz() {// 獲取父var cityUl = document.getElementById("city");// 獲取前面的var szLi = document.getElementById("sz");// 創(chuàng)建新的var csLi = document.createElement("li");csLi.id = "cs";csLi.innerText = "長(zhǎng)沙";//插入到szLi前面cityUl.insertBefore(csLi,szLi);}function replaceSz() {// 獲取父var cityUl = document.getElementById("city");// 獲取var szLi = document.getElementById("sz");// 創(chuàng)建新的var xmLi = document.createElement("li");xmLi.id = "xm";xmLi.innerText = "廈門";//插入到szLi前面cityUl.replaceChild(xmLi,szLi);}function removeGz(){var gzLi = document.getElementById("gz");gzLi.remove();}function clearCity(){var cityUl = document.getElementById("city");cityUl.remove();}</script>
</head>
<body>
<ul id="city"><li id="bj">北京</li><li id="sh">上海</li><li id="sz">深圳</li><li id="gz">廣州</li>
</ul><hr>
<!-- 目標(biāo)1 在城市列表的最后添加一個(gè)子標(biāo)簽  <li id="fz">長(zhǎng)沙</li>  -->
<button onclick="addFz()">增加福州</button>
<!-- 目標(biāo)2 在城市列表的深圳前添加一個(gè)子標(biāo)簽  <li id="cs">長(zhǎng)沙</li>  -->
<button onclick="addCsBeforeSz()">在深圳前插入長(zhǎng)沙</button>
<!-- 目標(biāo)3  將城市列表的深圳替換為  <li id="xm">廈門</li>  -->
<button onclick="replaceSz()">替換深圳為廈門</button>
<!-- 目標(biāo)4  將城市列表刪除廣州  -->
<button onclick="removeGz()">刪除廣州</button>
<!-- 目標(biāo)5  清空城市列表  -->
<button onclick="clearCity()">清空</button></body>
</html>

---

總結(jié)

關(guān)于前后端傳送數(shù)據(jù)：