js
1什么是js
1JS起源
Javascript是一種由Netscape(網景)的LiveScript發展而來的原型化繼承的面向對象的動態類型的區分大小寫的客戶端腳本語言JS是一種運行于瀏覽器端上的小腳本語句,可以實現網頁如文本內容動,數據動態變化和動畫特效等,JS有 如下特點
-
腳本語言
- JavaScript是一種解釋型的腳本語言。不同于C、C++、Java等語言先編譯后執行, JavaScript不會產生編譯出來的字節碼文件，而是在程序的運行過程中對源文件逐行進行解釋。
-
基于對象
- JavaScript是一種基于對象的腳本語言，它不僅可以創建對象，也能使用現有的對象。但是面向對象的三大特性：『封裝』、『繼承』、『多態』中，JavaScript能夠實現封裝，可以模擬繼承，不支持多態，所以它不是一門面向對象的編程語言。
-
弱類型
- JavaScript中也有明確的數據類型，但是聲明一個變量后它可以接收任何類型的數據，并且會在程序執行過程中根據上下文自動轉換類型。
-
事件驅動
- JavaScript是一種采用事件驅動的腳本語言，它不需要經過Web服務器就可以對用戶的輸入做出響應。
-
跨平臺性
- JavaScript腳本語言不依賴于操作系統，僅需要瀏覽器的支持。因此一個JavaScript腳本在編寫后可以帶到任意機器上使用，前提是機器上的瀏覽器支持JavaScript腳本語言。目前JavaScript已被大多數的瀏覽器所支持。
2 JS 組成部分
ECMA
- ECMA-262第11版，也成為ES11、ES2020，發布于2020年6月。這次修訂增加了String 的 matchAll 方法、動態導入語句 import()、import.meta、export * as ns from 'module'、Promise.allSettled、GlobalThis、Nullish coalescing Operator、Optional Chaining以及一種新的數據類型BigInt，在此之后JavaScript正式迎來第8位數據類型。
BOM編程
-
BOM是Browser Object Model的簡寫，即瀏覽器對象模型。
-
BOM有一系列對象組成，是訪問、控制、修改瀏覽器的屬性和方法
-
BOM沒有統一的標準(每種客戶端都可以自定標準)。
-
BOM編程是將瀏覽器窗口的各個組成部分抽象成各個對象,通過各個對象的API操作組件行為的一種編程
-
BOM編程的對象結構如下
- window 頂級對象,代表整個瀏覽器窗口
- location對象 window對象的屬性之一,代表瀏覽器的地址欄
- history對象 window對象的屬性之一,代表瀏覽器的訪問歷史
- screen對象 window對象的屬性之一,代表屏幕
- navigator對象 window對象的屬性之一,代表瀏覽器軟件本身
- document對象 window對象的屬性之一,代表瀏覽器窗口目前解析的html文檔
- window 頂級對象,代表整個瀏覽器窗口
DOM編程
- 簡單來說:DOM編程就是使用document對象的API完成對網頁HTML文檔進行動態修改,以實現網頁數據和樣式動態變化效果的編程.
- document對象代表整個html文檔，可用來訪問頁面中的所有元素，是最復雜的一個dom對象，可以說是學習好dom編程的關鍵所在。
- 根據HTML代碼結構特點,document對象本身是一種樹形結構的文檔對象。
- 上面的代碼生成的樹如下
- DOM編程其實就是用window對象的document屬性的相關API完成對頁面元素的控制的編程
3 JS的引入方式
內部腳本方式引入
-
說明
- 在頁面中,通過一對script標簽引入JS代碼
- script代碼放置位置具備一定的隨意性,一般放在head標簽中居多
-
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小標題</title>
<style>
/* 通過選擇器確定樣式的作用范圍 */
.btn1 {
display: block;
width: 150px;
height: 40px;
background-color: rgb(245, 241, 129);
color: rgb(238, 31, 31);
border: 3px solid rgb(238, 23, 66);
font-size: 22px;
font-family: '隸書';
line-height: 30px;
border-radius: 5px;
}
</style>
<script>
function suprise(){
alert("Hello,我是驚喜")
}
</script>
</head>
<body>
<button class="btn1" onclick="suprise()">點我有驚喜</button>
</body>
</html>
- 效果
外部腳本方式引入
- 說明
- 內部腳本僅能在當前頁面上使用,代碼復用度不高
- 可以將腳本放在獨立的js文件中,通過script標簽引入外部腳本文件
- 一對script標簽要么用于定義內部腳本,要么用于引入外部js文件,不能混用
- 一個html文檔中,可以有多個script標簽
- 抽取腳本代碼到獨立的js文件中
- 在html文件中,通過script標簽引入外部腳本文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小標題</title>
<style>
/* 通過選擇器確定樣式的作用范圍 */
.btn1 {
display: block;
width: 150px;
height: 40px;
background-color: rgb(245, 241, 129);
color: rgb(238, 31, 31);
border: 3px solid rgb(238, 23, 66);
font-size: 22px;
font-family: '隸書';
line-height: 30px;
border-radius: 5px;
}
</style>
<script src="js/button.js" type="text/javascript"></script>
</head>
<body>
<button class="btn1" onclick="suprise()">點我有驚喜</button>
</body>
</html>
2 JS的數據類型和運算符
1 JS的數據類型
數值類型
- 數值類型統一為 number,不區分整數和浮點數
字符串類型
- 字符串類型為 string 和JAVA中的String相似,JS中不嚴格區分單雙引號,都可以用于表示字符串
布爾類型
- 布爾類型為boolean 和Java中的boolean相似,但是在JS的if語句中,非空字符串會被轉換為'真',非零數字也會被認為是'真'
引用數據類型
- 引用數據類型對象是Object類型, 各種對象和數組在JS中都是Object類型
function類型
- JS中的各種函數屬于function數據類型
命名未賦值
- js為弱類型語言,統一使用 var 聲明對象和變量,在賦值時才確定真正的數據類型,變量如果只聲明沒有賦值的話,數據類型為undefined
賦予NULL值
- 在JS中,如果給一個變量賦值為null,其數據類型是Object, 可以通過typeof關鍵字判斷數據類型
2 JS的變量
JS中的變量具有如下特征
-
1 弱類型變量,可以統一聲明成var
-
2 var聲明的變量可以再次聲明
-
3 變量可以使用不同的數據類型多次賦值
-
4 JS的語句可以以; 結尾,也可以不用;結尾
-
5 變量標識符嚴格區分大小寫
-
6 標識符的命名規則參照JAVA
-
7 如果使用了 一個沒有聲明的變量,那么運行時會報
uncaught ReferenceError: *** is not defined at index.html:行號:列號 -
8 如果一個變量只聲明,沒賦值,那么值是undefined
3 JS的運算符
算數運算符 + - * / %
- 其中需要注意的是 / 和 %
- / 在除0時,結果是Infinity ,而不是報錯
- %在模0時,結果是NaN,意思為 not a number ,而不是報錯
復合算數運算符 ++ -- += -= *= /= %=
- 符合算數運算符基本和JAVA一致,同樣需要注意 /=和%=
- 在/=0時,結果是Infinity ,而不是報錯
- 在%=0時,結果是NaN,意思為 not a number ,而不是報錯
關系運算符 > < >= <= == === !=
- 需要注意的是 == 和 === 差別
- == 符號,如果兩端的數據類型不一致,會嘗試將兩端的數據轉換成number,再對比number大小
- '123' 這種字符串可以轉換成數字
- true會被轉換成1 false會被轉換成0
- === 符號,如果兩端數據類型不一致,直接返回false,數據類型一致在比較是否相同
- == 符號,如果兩端的數據類型不一致,會嘗試將兩端的數據轉換成number,再對比number大小
邏輯運算符 || &&
- 幾乎和JAVA中的一樣,需要注意的是,這里直接就是短路的邏輯運算符,單個的 | 和 & 以及 ^ 是位運算符
條件運算符 條件? 值1 : 值2
- 幾乎和JAVA中的一樣
位運算符 | & ^ << >> >>>
- 和 java中的類似(了解)
3 JS的流程控制和函數
1 JS分支結構
if結構
-
這里的if結構幾乎和JAVA中的一樣,需要注意的是
- if()中的非空字符串會被認為是true
- if()中的非零數字會被認為是true
-
代碼
if('false'){// 非空字符串 if判斷為true
console.log(true)
}else{
console.log(false)
}
if(''){// 長度為0字符串 if判斷為false
console.log(true)
}else{
console.log(false)
}
if(1){// 非零數字 if判斷為true
console.log(true)
}else{
console.log(false)
}
if(0){
console.log(true)
}else{
console.log(false)
}
- 結果
switch結構
-
幾乎和JAVA的語法一致
-
代碼
var monthStr=prompt("請輸入月份","例如: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;
case 9:
case 10:
case 11:
console.log("秋季");
break;
case 1:
case 2:
case 12:
console.log("冬季");
break;
default :
console.log("月份有誤")
}
- 效果
2 JS循環結構
while結構
-
幾乎和JAVA一致
-
代碼
/* 打印99 乘法表 */
var i = 1;
while(i <= 9){
var j = 1;
while(j <= i){
document.write(j+"*"+i+"="+i*j+" ");
j++;
}
document.write("<hr/>");
i++;
}
- 效果
for循環
-
幾乎和JAVA一致
-
代碼
/* 打印99 乘法表 */
for( var i = 1;i <= 9; i++){
for(var j = 1;j <= i;j++){
document.write(j+"*"+i+"="+i*j+" ");
}
document.write("<hr/>");
}
- 效果
foreach循環
-
迭代數組時,和java不一樣
- 括號中的臨時變量表示的是元素的索引,不是元素的值,
- ()中也不在使用: 分隔,而是使用 in 關鍵字
-
代碼
var cities =["北京","上海","深圳","武漢","西安","成都"]
document.write("<ul>")
for(var index in cities){
document.write("<li>"+cities[index]+"</li>")
}
document.write("</ul>")
- 效果
4 JS函數聲明
JS中的方法,多稱為函數,函數的聲明語法和JAVA中有較大區別
- 函數說明
- 函數沒有權限控制符
- 不用聲明函數的返回值類型,需要返回在函數體中直接return即可,也無需void關鍵字
- 參數列表中,無需數據類型
- 調用函數時,實參和形參的個數可以不一致
- 聲明函數時需要用function關鍵字
- J函數沒有異常列表
- 代碼
/*
語法1
function 函數名 (參數列表){函數體}
*/
function sum(a, b){
return a+b;
}
var result =sum(10,20);
console.log(result)
/*
語法2
var 函數名 = function (參數列表){函數體}
*/
var add = function(a, b){
return a+b;
}
var result = add(1,2);
console.log(result);
- 調用測試
5 JS的對象和JSON
1 JS聲明對象的語法
語法1 通過new Object()直接創建對象
- 代碼
var person =new Object();
// 給對象添加屬性并賦值
person.name="張小明";
person.age=10;
person.foods=["蘋果","橘子","香蕉","葡萄"];
// 給對象添加功能函數
person.eat= function (){
console.log(this.age+"歲的"+this.name+"喜歡吃:")
for(var i = 0;i<this.foods.length;i++){
console.log(this.foods[i])
}
}
//獲得對象屬性值
console.log(person.name)
console.log(person.age)
//調用對象方法
person.eat();
- 效果
語法2 通過 {}形式創建對象
- 語法為 var person =
- 代碼
var person ={
"name":"張小明",
"age":10,
"foods":["蘋果","香蕉","橘子","葡萄"],
"eat":function (){
console.log(this.age+"歲的"+this.name+"喜歡吃:")
for(var i = 0;i<this.foods.length;i++){
console.log(this.foods[i])
}
}
}
//獲得對象屬性值
console.log(person.name)
console.log(person.age)
//調用對象方法
person.eat();
- 效果
2 JSON格式
JSON（JavaScript Object Notation, JS對象簡譜）是一種輕量級的數據交換格式,JSON 就是一種字符串格式,這種格式無論是在前端還是在后端,都可以很容易的轉換成對象,所以常用于前后端數據傳遞
-
說明
-
JSON的語法
? var obj="{'屬性名':'屬性值','屬性名':{'屬性名':'屬性值'},'屬性名':['值1','值1','值3']}"
-
JSON字符串一般用于傳遞數據,所以字符串中的函數就顯得沒有意義,在此不做研究
-
通過JSON.parse()方法可以將一個JSON串轉換成對象
-
通過JSON.stringify()方法可以將一個對象轉換成一個JSON格式的字符串
-
-
代碼
/* 定義一個JSON串 */
var personStr ='{"name":"張小明","age":20,"girlFriend":{"name":"鐵鈴","age":23},"foods":["蘋果","香蕉","橘子","葡萄"],"pets":[{"petName":"大黃","petType":"dog"},{"petName":"小花","petType":"cat"}]}'
console.log(personStr)
console.log(typeof personStr)
/* 將一個JSON串轉換為對象 */
var person =JSON.parse(personStr);
console.log(person)
console.log(typeof person)
/* 獲取對象屬性值 */
console.log(person.name)
console.log(person.age)
console.log(person.girlFriend.name)
console.log(person.foods[1])
console.log(person.pets[1].petName)
console.log(person.pets[1].petType)
/* 定義一個對象 */
var person={
'name':'張小明',
'age':20,
'girlFriend':{
'name':'鐵鈴',
'age':23
},
'foods':['蘋果','香蕉','橘子','葡萄'],
'pets':[
{
'petName':'大黃',
'petType':'dog'
},
{
'petName':'小花',
'petType':'cat'
}
]
}
/* 獲取對象屬性值 */
console.log(person.name)
console.log(person.age)
console.log(person.girlFriend.name)
console.log(person.foods[1])
console.log(person.pets[1].petName)
console.log(person.pets[1].petType)
/* 將對象轉換成JSON字符串 */
var personStr =JSON.stringify(person)
console.log(personStr)
console.log(typeof personStr)
- 前后端傳遞數據
3 JS常見對象
1 數組
創建數組的四種方式
- new Array() 創建空數組
- new Array(5) 創建數組時給定長度
- new Array(ele1,ele2,ele3,... ... ,elen); 創建數組時指定元素值
- [ele1,ele2,ele3,... ... ,elen]; 相當于第三種語法的簡寫
數組的常見API
- 在JS中,數組屬于Object類型,其長度是可以變化的,更像JAVA中的集合
| 方法 | 描述 |
|---|---|
| concat() | 連接兩個或更多的數組，并返回結果。 |
| copyWithin() | 從數組的指定位置拷貝元素到數組的另一個指定位置中。 |
| entries() | 返回數組的可迭代對象。 |
| every() | 檢測數值元素的每個元素是否都符合條件。 |
| fill() | 使用一個固定值來填充數組。 |
| filter() | 檢測數值元素，并返回符合條件所有元素的數組。 |
| find() | 返回符合傳入測試（函數）條件的數組元素。 |
| findIndex() | 返回符合傳入測試（函數）條件的數組元素索引。 |
| forEach() | 數組每個元素都執行一次回調函數。 |
| from() | 通過給定的對象中創建一個數組。 |
| includes() | 判斷一個數組是否包含一個指定的值。 |
| indexOf() | 搜索數組中的元素，并返回它所在的位置。 |
| isArray() | 判斷對象是否為數組。 |
| join() | 把數組的所有元素放入一個字符串。 |
| keys() | 返回數組的可迭代對象，包含原始數組的鍵(key)。 |
| lastIndexOf() | 搜索數組中的元素，并返回它最后出現的位置。 |
| map() | 通過指定函數處理數組的每個元素，并返回處理后的數組。 |
| pop() | 刪除數組的最后一個元素并返回刪除的元素。 |
| push() | 向數組的末尾添加一個或更多元素，并返回新的長度。 |
| reduce() | 將數組元素計算為一個值（從左到右）。 |
| reduceRight() | 將數組元素計算為一個值（從右到左）。 |
| reverse() | 反轉數組的元素順序。 |
| shift() | 刪除并返回數組的第一個元素。 |
| slice() | 選取數組的一部分，并返回一個新數組。 |
| some() | 檢測數組元素中是否有元素符合指定條件。 |
| sort() | 對數組的元素進行排序。 |
| splice() | 從數組中添加或刪除元素。 |
| toString() | 把數組轉換為字符串，并返回結果。 |
| unshift() | 向數組的開頭添加一個或更多元素，并返回新的長度。 |
| valueOf() | 返回數組對象的原始值。 |
| Array.of() | 將一組值轉換為數組。 |
| Array.at() | 用于接收一個整數值并返回該索引對應的元素，允許正數和負數。負整數從數組中的最后一個元素開始倒數。 |
| Array.flat() | 創建一個新數組，這個新數組由原數組中的每個元素都調用一次提供的函數后的返回值組成。 |
| Array.flatMap() | 使用映射函數映射每個元素，然后將結果壓縮成一個新數組。 |
2 Boolean對象
boolean對象的方法比較簡單
| 方法 | 描述 |
|---|---|
| toString() | 把布爾值轉換為字符串，并返回結果。 |
| valueOf() | 返回 Boolean 對象的原始值。 |
3 Date對象
和JAVA中的Date類比較類似
| 方法 | 描述 |
|---|---|
| getDate() | 從 Date 對象返回一個月中的某一天 (1 ~ 31)。 |
| getDay() | 從 Date 對象返回一周中的某一天 (0 ~ 6)。 |
| getFullYear() | 從 Date 對象以四位數字返回年份。 |
| getHours() | 返回 Date 對象的小時 (0 ~ 23)。 |
| getMilliseconds() | 返回 Date 對象的毫秒(0 ~ 999)。 |
| getMinutes() | 返回 Date 對象的分鐘 (0 ~ 59)。 |
| getMonth() | 從 Date 對象返回月份 (0 ~ 11)。 |
| getSeconds() | 返回 Date 對象的秒數 (0 ~ 59)。 |
| getTime() | 返回 1970 年 1 月 1 日至今的毫秒數。 |
| getTimezoneOffset() | 返回本地時間與格林威治標準時間 (GMT) 的分鐘差。 |
| getUTCDate() | 根據世界時從 Date 對象返回月中的一天 (1 ~ 31)。 |
| getUTCDay() | 根據世界時從 Date 對象返回周中的一天 (0 ~ 6)。 |
| getUTCFullYear() | 根據世界時從 Date 對象返回四位數的年份。 |
| getUTCHours() | 根據世界時返回 Date 對象的小時 (0 ~ 23)。 |
| getUTCMilliseconds() | 根據世界時返回 Date 對象的毫秒(0 ~ 999)。 |
| getUTCMinutes() | 根據世界時返回 Date 對象的分鐘 (0 ~ 59)。 |
| getUTCMonth() | 根據世界時從 Date 對象返回月份 (0 ~ 11)。 |
| getUTCSeconds() | 根據世界時返回 Date 對象的秒鐘 (0 ~ 59)。 |
| getYear() | 已廢棄。 請使用 getFullYear() 方法代替。 |
| parse() | 返回1970年1月1日午夜到指定日期（字符串）的毫秒數。 |
| setDate() | 設置 Date 對象中月的某一天 (1 ~ 31)。 |
| setFullYear() | 設置 Date 對象中的年份（四位數字）。 |
| setHours() | 設置 Date 對象中的小時 (0 ~ 23)。 |
| setMilliseconds() | 設置 Date 對象中的毫秒 (0 ~ 999)。 |
| setMinutes() | 設置 Date 對象中的分鐘 (0 ~ 59)。 |
| setMonth() | 設置 Date 對象中月份 (0 ~ 11)。 |
| setSeconds() | 設置 Date 對象中的秒鐘 (0 ~ 59)。 |
| setTime() | setTime() 方法以毫秒設置 Date 對象。 |
| setUTCDate() | 根據世界時設置 Date 對象中月份的一天 (1 ~ 31)。 |
| setUTCFullYear() | 根據世界時設置 Date 對象中的年份（四位數字）。 |
| setUTCHours() | 根據世界時設置 Date 對象中的小時 (0 ~ 23)。 |
| setUTCMilliseconds() | 根據世界時設置 Date 對象中的毫秒 (0 ~ 999)。 |
| setUTCMinutes() | 根據世界時設置 Date 對象中的分鐘 (0 ~ 59)。 |
| setUTCMonth() | 根據世界時設置 Date 對象中的月份 (0 ~ 11)。 |
| setUTCSeconds() | setUTCSeconds() 方法用于根據世界時 (UTC) 設置指定時間的秒字段。 |
| setYear() | 已廢棄。請使用 setFullYear() 方法代替。 |
| toDateString() | 把 Date 對象的日期部分轉換為字符串。 |
| toGMTString() | 已廢棄。請使用 toUTCString() 方法代替。 |
| toISOString() | 使用 ISO 標準返回字符串的日期格式。 |
| toJSON() | 以 JSON 數據格式返回日期字符串。 |
| toLocaleDateString() | 根據本地時間格式，把 Date 對象的日期部分轉換為字符串。 |
| toLocaleTimeString() | 根據本地時間格式，把 Date 對象的時間部分轉換為字符串。 |
| toLocaleString() | 根據本地時間格式，把 Date 對象轉換為字符串。 |
| toString() | 把 Date 對象轉換為字符串。 |
| toTimeString() | 把 Date 對象的時間部分轉換為字符串。 |
| toUTCString() | 根據世界時，把 Date 對象轉換為字符串。實例：var today = new Date(); var UTCstring = today.toUTCString(); |
| UTC() | 根據世界時返回 1970 年 1 月 1 日 到指定日期的毫秒數。 |
| valueOf() | 返回 Date 對象的原始值。 |
4 Math
和JAVA中的Math類比較類似
| 方法 | 描述 |
|---|---|
| abs(x) | 返回 x 的絕對值。 |
| acos(x) | 返回 x 的反余弦值。 |
| asin(x) | 返回 x 的反正弦值。 |
| atan(x) | 以介于 -PI/2 與 PI/2 弧度之間的數值來返回 x 的反正切值。 |
| atan2(y,x) | 返回從 x 軸到點 (x,y) 的角度（介于 -PI/2 與 PI/2 弧度之間）。 |
| ceil(x) | 對數進行上舍入。 |
| cos(x) | 返回數的余弦。 |
| exp(x) | 返回 Ex 的指數。 |
| floor(x) | 對 x 進行下舍入。 |
| log(x) | 返回數的自然對數（底為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 之間的隨機數。 |
| round(x) | 四舍五入。 |
| sin(x) | 返回數的正弦。 |
| sqrt(x) | 返回數的平方根。 |
| tan(x) | 返回角的正切。 |
| tanh(x) | 返回一個數的雙曲正切函數值。 |
| trunc(x) | 將數字的小數部分去掉，只保留整數部分。 |
5 Number
Number中準備了一些基礎的數據處理函數
| 方法 | 描述 |
|---|---|
| isFinite | 檢測指定參數是否為無窮大。 |
| isInteger | 檢測指定參數是否為整數。 |
| isNaN | 檢測指定參數是否為 NaN。 |
| isSafeInteger | 檢測指定參數是否為安全整數。 |
| toExponential(x) | 把對象的值轉換為指數計數法。 |
| toFixed(x) | 把數字轉換為字符串，結果的小數點后有指定位數的數字。 |
| toLocaleString(locales, options) | 返回數字在特定語言環境下的表示字符串。 |
| toPrecision(x) | 把數字格式化為指定的長度。 |
| toString() | 把數字轉換為字符串，使用指定的基數。 |
| valueOf() | 返回一個 Number 對象的基本數字值。 |
6 String
和JAVA中的String類似
| 方法 | 描述 |
|---|---|
| charAt() | 返回在指定位置的字符。 |
| charCodeAt() | 返回在指定的位置的字符的 Unicode 編碼。 |
| concat() | 連接兩個或更多字符串，并返回新的字符串。 |
| endsWith() | 判斷當前字符串是否是以指定的子字符串結尾的（區分大小寫）。 |
| fromCharCode() | 將 Unicode 編碼轉為字符。 |
| indexOf() | 返回某個指定的字符串值在字符串中首次出現的位置。 |
| includes() | 查找字符串中是否包含指定的子字符串。 |
| lastIndexOf() | 從后向前搜索字符串，并從起始位置（0）開始計算返回字符串最后出現的位置。 |
| match() | 查找找到一個或多個正則表達式的匹配。 |
| repeat() | 復制字符串指定次數，并將它們連接在一起返回。 |
| replace() | 在字符串中查找匹配的子串，并替換與正則表達式匹配的子串。 |
| replaceAll() | 在字符串中查找匹配的子串，并替換與正則表達式匹配的所有子串。 |
| search() | 查找與正則表達式相匹配的值。 |
| slice() | 提取字符串的片斷，并在新的字符串中返回被提取的部分。 |
| split() | 把字符串分割為字符串數組。 |
| startsWith() | 查看字符串是否以指定的子字符串開頭。 |
| substr() | 從起始索引號提取字符串中指定數目的字符。 |
| substring() | 提取字符串中兩個指定的索引號之間的字符。 |
| toLowerCase() | 把字符串轉換為小寫。 |
| toUpperCase() | 把字符串轉換為大寫。 |
| trim() | 去除字符串兩邊的空白。 |
| toLocaleLowerCase() | 根據本地主機的語言環境把字符串轉換為小寫。 |
| toLocaleUpperCase() | 根據本地主機的語言環境把字符串轉換為大寫。 |
| valueOf() | 返回某個字符串對象的原始值。 |
| toString() | 返回一個字符串。 |
6 事件的綁定
1 什么是事件
HTML 事件可以是瀏覽器行為，也可以是用戶行為。 當這些一些行為發生時,可以自動觸發對應的JS函數的運行,我們稱之為事件發生.JS的事件驅動指的就是行為觸發代碼運行的這種特點
2 常見事件
1 鼠標事件
| 屬性 | 描述 |
|---|---|
| onclick | 當用戶點擊某個對象時調用的事件句柄。 |
| oncontextmenu | 在用戶點擊鼠標右鍵打開上下文菜單時觸發 |
| ondblclick | 當用戶雙擊某個對象時調用的事件句柄。 |
| onmousedown | 鼠標按鈕被按下。 |
| onmouseenter | 當鼠標指針移動到元素上時觸發。 |
| onmouseleave | 當鼠標指針移出元素時觸發 |
| onmousemove | 鼠標被移動。 |
| onmouseover | 鼠標移到某元素之上。 |
| onmouseout | 鼠標從某元素移開。 |
| onmouseup | 鼠標按鍵被松開。 |
2 鍵盤事件
| 屬性 | 描述 |
|---|---|
| onkeydown | 某個鍵盤按鍵被按下。 |
| onkeypress | 某個鍵盤按鍵被按下并松開。 |
| onkeyup | 某個鍵盤按鍵被松開。 |
3 表單事件
| 屬性 | 描述 |
|---|---|
| onblur | 元素失去焦點時觸發 |
| onchange | 該事件在表單元素的內容改變時觸發( , |
浙公網安備 33010602011771號