柚子快報激活碼778899分享：javascript 03
柚子快報激活碼778899分享：javascript 03
文章目錄
第三章 JavaScript一 JS簡介1.1 JS起源JavaScript是一種基于對象的腳本語言，它不僅可以創(chuàng)建對象，也能使用現(xiàn)有的對象。但是面向?qū)ο蟮娜筇匦裕骸悍庋b』、『繼承』、『多態(tài)』中，JavaScript能夠?qū)崿F(xiàn)封裝，可以模擬繼承，不支持多態(tài)，所以它不是一門面向?qū)ο蟮木幊陶Z言。1.2 JS 組成部分1.3 JS的引入方式
二 JS的數(shù)據(jù)類型和運算符2.1 JS的數(shù)據(jù)類型2.2 JS的變量2.3 JS的運算符
三 JS的流程控制和函數(shù)3.1 JS分支結(jié)構(gòu)3.2 JS循環(huán)結(jié)構(gòu)3.3 JS函數(shù)聲明
四 JS的對象和JSON4.1 JS聲明對象的語法4.2 JSON格式4.3 JS常見對象4.3.1 數(shù)組4.3.2 Boolean對象4.3.3 Date對象4.3.4 Math4.3.5 Number4.3.6 String
五 事件的綁定5.1 什么是事件5.2 常見事件5.3 事件的綁定5.4 事件的觸發(fā)
六 BOM編程6.1 什么是BOM6.2 window對象的常見屬性(了解)6.3 window對象的常見方法(了解)6.4 通過BOM編程控制瀏覽器行為演示6.5 通過BOM編程實現(xiàn)會話級和持久級數(shù)據(jù)存儲
七 DOM編程7.1 什么是DOM編程7.2 獲取頁面元素的幾種方式7.2.1 在整個文檔范圍內(nèi)查找元素結(jié)點7.2.2 在具體元素節(jié)點范圍內(nèi)查找子節(jié)點7.2.3 查找指定子元素節(jié)點的父節(jié)點7.2.4 查找指定元素節(jié)點的兄弟節(jié)點
7.3 操作元素屬性值7.3.1 屬性操作7.3.2 內(nèi)部文本操作
7.4 增刪元素7.4.1 對頁面的元素進行增刪操作
八 正則表達式8.1 正則表達式簡介8.2 正則表達式體驗8.2.1 驗證8.2.2 匹配8.2.3 替換8.2.4 全文查找8.2.5 忽略大小寫8.2.6 元字符使用8.2.7 字符集合的使用8.2.8 常用正則表達式
九 案例開發(fā)-日程管理-第一期9.1 登錄頁及校驗9.2 注冊頁及校驗
第三章 JavaScript
一 JS簡介
1.1 JS起源
Javascript是一種由Netscape(網(wǎng)景)的LiveScript發(fā)展而來的原型化繼承的面向?qū)ο蟮膭討B(tài)類型的區(qū)分大小寫的客戶端腳本語言，主要目的是為了解決服務(wù)器端語言，遺留的速度問題，為客戶提供更流暢的瀏覽效果。當(dāng)時服務(wù)端需要對數(shù)據(jù)進行驗證，由于網(wǎng)絡(luò)速度相當(dāng)緩慢,只有28.8kbps，驗證步驟浪費的時間太多。于是Netscape的瀏覽器Navigator加入了Javascript，提供了數(shù)據(jù)驗證的基本功能。ECMA-262 是正式的 JavaScript 標準。這個標準基于 JavaScript (Netscape) 和 JScript (Microsoft)。ECMA-262 的開發(fā)始于 1996 年，在 1997 年 7 月，ECMA 會員大會采納了它的首個版本。這個標準由 ECMA 組織發(fā)展和維護。JavaScript 的正式名稱是 “ECMAScript”。JavaScript的組成包含ECMAScript、DOM、BOM。JS是一種運行于瀏覽器端上的小腳本語句,可以實現(xiàn)網(wǎng)頁如文本內(nèi)容動,數(shù)據(jù)動態(tài)變化和動畫特效等,JS有 如下特點
腳本語言 JavaScript是一種解釋型的腳本語言。不同于C、C++、Java等語言先編譯后執(zhí)行, JavaScript不會產(chǎn)生編譯出來的字節(jié)碼文件，而是在程序的運行過程中對源文件逐行進行解釋。 基于對象
JavaScript是一種基于對象的腳本語言，它不僅可以創(chuàng)建對象，也能使用現(xiàn)有的對象。但是面向?qū)ο蟮娜筇匦裕骸悍庋b』、『繼承』、『多態(tài)』中，JavaScript能夠?qū)崿F(xiàn)封裝，可以模擬繼承，不支持多態(tài)，所以它不是一門面向?qū)ο蟮木幊陶Z言。 弱類型
JavaScript中也有明確的數(shù)據(jù)類型，但是聲明一個變量后它可以接收任何類型的數(shù)據(jù)，并且會在程序執(zhí)行過程中根據(jù)上下文自動轉(zhuǎn)換類型。 事件驅(qū)動
JavaScript是一種采用事件驅(qū)動的腳本語言，它不需要經(jīng)過Web服務(wù)器就可以對用戶的輸入做出響應(yīng)。 跨平臺性
JavaScript腳本語言不依賴于操作系統(tǒng)，僅需要瀏覽器的支持。因此一個JavaScript腳本在編寫后可以帶到任意機器上使用，前提是機器上的瀏覽器支持JavaScript腳本語言。目前JavaScript已被大多數(shù)的瀏覽器所支持。
1.2 JS 組成部分
ECMA 及版本變化
是一種由歐洲計算機制造商協(xié)會（ECMA）通過ECMA-262標準化的腳本程序語言,ECMAScript描述了語法、類型、語句、關(guān)鍵字、保留字、運算符和對象。它就是定義了腳本語言的所有屬性、方法和對象。 ECMA-262第1版本質(zhì)上跟網(wǎng)景的JavaScript 1.1相同，刪除了瀏覽器特定代碼和少量細微的修改.ECMA-262要求支持Unicode標準（以支持多語言）且對象要與平臺無關(guān) ECMA-262第2版只是做了一些編校工作，主要是為了嚴格符合ISO/IEC-16262的要求，并沒有增減或改變?nèi)魏翁匦浴? ECMA-262第3版第一次真正對ECMAScript進行更新，更新了字符串處理、錯誤定義和數(shù)值輸出，增加了對正則表達式、新的控制語句、try/catch異常處理的支持。 ECMA-262第4版是對這門語言的一次徹底修訂。開發(fā)者開始修訂ECMAScript以滿足全球Web開發(fā)日益增長的需求。 第4版包括強類型變量、新語句和數(shù)據(jù)結(jié)構(gòu)、真正的類和經(jīng)典的繼承，以及操作數(shù)據(jù)的新手段。 ECMA-262第5版是ECMA-262第3版的小幅改進，于2009年12月3日正式發(fā)布。第5版致力于厘清第3版存在的歧義，也增加了新功能。新功能包括原生的解析和序列化JSON數(shù)據(jù)的JSON對象、方便繼承和高級屬性定義的方法、新的增強ECMAScript引擎解釋和執(zhí)行代碼能力的嚴格模式。 ECMA-262第6版俗稱ES6、ES2015或ES Harmony（和諧版），于2015年6月發(fā)布。**這一版包含了大概這個規(guī)范有史以來最重要的一批增強特性。**ES6正式支持了類、模塊、迭代器、生成器、箭頭函數(shù)、期約、反射、代理和眾多新的數(shù)據(jù)類型。但是并不是所有的瀏覽器都全面支持了ES6,很多情況下我們需要將ES6的語法通過工具轉(zhuǎn)換成5以后運行 ECMA-262第7版也稱為ES7或ES2016，于2016年6月發(fā)布。這次修訂只包含少量語法層面的增強，如Array.prototype.includes和指數(shù)操作符。 ECMA-262第8版也稱為ES8、ES2017，完成于2017年6月。這一版主要增加了異步函數(shù)（async/await）、SharedArrayBuffer及Atomics API、Object.values()/Object.entries()/Object.getOwnProperty- Descriptors()和字符串填充方法，另外明確支持對象字面量最后的逗號。 ECMA-262第9版也稱為ES9、ES2018，發(fā)布于2018年6月。這次修訂包括異步迭代、剩余和擴展屬性、一組新的正則表達式特性、Promise finally()以及模板字面量修訂。 ECMA-262第10版也稱為ES10、ES2019，發(fā)布于2019年6月。這次修訂增加了Array.prototype.flat()/flatMap()、String.prototype.trimStart()/trimEnd()、Object.fromEntries()方法以及Symbol.prototype.description屬性，明確定義了Function.prototype.toString()的返回值并固定了Array.prototype.sort()的順序。另外，這次修訂解決了與JSON字符串兼容的問題，并定義了catch子句的可選綁定。 ECMA-262第11版，也成為ES11、ES2020，發(fā)布于2020年6月。這次修訂增加了String 的 matchAll 方法、動態(tài)導(dǎo)入語句 import()、import.meta、export * as ns from ‘module’、Promise.allSettled、GlobalThis、Nullish coalescing Operator、Optional Chaining以及一種新的數(shù)據(jù)類型BigInt，在此之后JavaScript正式迎來第8位數(shù)據(jù)類型。
BOM編程
BOM是Browser Object Model的簡寫，即瀏覽器對象模型。 BOM有一系列對象組成，是訪問、控制、修改瀏覽器的屬性和方法 BOM沒有統(tǒng)一的標準(每種客戶端都可以自定標準)。 BOM編程是將瀏覽器窗口的各個組成部分抽象成各個對象,通過各個對象的API操作組件行為的一種編程 BOM編程的對象結(jié)構(gòu)如下
window 頂級對象,代表整個瀏覽器窗口
location對象 window對象的屬性之一,代表瀏覽器的地址欄history對象 window對象的屬性之一,代表瀏覽器的訪問歷史screen對象 window對象的屬性之一,代表屏幕navigator對象 window對象的屬性之一,代表瀏覽器軟件本身document對象 window對象的屬性之一,代表瀏覽器窗口目前解析的html文檔
DOM編程
簡單來說:DOM編程就是使用document對象的API完成對網(wǎng)頁HTML文檔進行動態(tài)修改,以實現(xiàn)網(wǎng)頁數(shù)據(jù)和樣式動態(tài)變化效果的編程. document對象代表整個html文檔，可用來訪問頁面中的所有元素，是最復(fù)雜的一個dom對象，可以說是學(xué)習(xí)好dom編程的關(guān)鍵所在。 根據(jù)HTML代碼結(jié)構(gòu)特點,document對象本身是一種樹形結(jié)構(gòu)的文檔對象。 上面的代碼生成的樹如下
DOM編程其實就是用window對象的document屬性的相關(guān)API完成對頁面元素的控制的編程
1.3 JS的引入方式
內(nèi)部腳本方式引入
說明
在頁面中,通過一對script標簽引入JS代碼script代碼放置位置具備一定的隨意性,一般放在head標簽中居多 代碼
效果
外部腳本方式引入
說明
內(nèi)部腳本僅能在當(dāng)前頁面上使用,代碼復(fù)用度不高可以將腳本放在獨立的js文件中,通過script標簽引入外部腳本文件一對script標簽要么用于定義內(nèi)部腳本,要么用于引入外部js文件,不能混用一個html文檔中,可以有多個script標簽 抽取腳本代碼到獨立的js文件中
在html文件中,通過script標簽引入外部腳本文件
二 JS的數(shù)據(jù)類型和運算符
2.1 JS的數(shù)據(jù)類型
數(shù)值類型
數(shù)值類型統(tǒng)一為 number,不區(qū)分整數(shù)和浮點數(shù)
字符串類型
字符串類型為 string 和JAVA中的String相似,JS中不嚴格區(qū)分單雙引號,都可以用于表示字符串
布爾類型
布爾類型為boolean 和Java中的boolean相似,但是在JS的if語句中,非空字符串會被轉(zhuǎn)換為’真’,非零數(shù)字也會被認為是’真’
引用數(shù)據(jù)類型
引用數(shù)據(jù)類型對象是Object類型, 各種對象和數(shù)組在JS中都是Object類型
function類型
JS中的各種函數(shù)屬于function數(shù)據(jù)類型
未定義
js為弱類型語言,統(tǒng)一使用 var 聲明對象和變量,在賦值時才確定真正的數(shù)據(jù)類型,變量如果只聲明沒有賦值的話,數(shù)據(jù)類型為undefined
賦予NULL值
在JS中,如果給一個變量賦值為null,其數(shù)據(jù)類型是Object, 可以通過typeof關(guān)鍵字判斷數(shù)據(jù)類型
2.2 JS的變量
JS中的變量具有如下特征
1 弱類型變量,可以統(tǒng)一聲明成var2 var聲明的變量可以再次聲明3 變量可以使用不同的數(shù)據(jù)類型多次賦值4 JS的語句可以以; 結(jié)尾,也可以不用;結(jié)尾5 變量標識符嚴格區(qū)分大小寫6 標識符的命名規(guī)則參照JAVA7 如果使用了 一個沒有聲明的變量,那么運行時會報ncaught ReferenceError: *** is not defined at index.html:行號:列號8 如果一個變量只聲明,沒賦值,那么值是undefined
2.3 JS的運算符
算數(shù)運算符 + - * / %
其中需要注意的是 / 和 %
/ 在除0時,結(jié)果是Infinity ,而不是報錯%在模0時,結(jié)果是NaN,意思為 not a number ,而不是報錯
復(fù)合算數(shù)運算符 ++ – += -= *= /= %=
符合算數(shù)運算符基本和JAVA一致,同樣需要注意 /=和%=
在/=0時,結(jié)果是Infinity ,而不是報錯在%=0時,結(jié)果是NaN,意思為 not a number ,而不是報錯
關(guān)系運算符 > < >= <= == === !=
需要注意的是 == 和 === 差別
== 符號,如果兩端的數(shù)據(jù)類型不一致,會嘗試將兩端的數(shù)據(jù)轉(zhuǎn)換成number,再對比number大小
‘123’ 這種字符串可以轉(zhuǎn)換成數(shù)字true會被轉(zhuǎn)換成1 false會被轉(zhuǎn)換成0 === 符號,如果兩端數(shù)據(jù)類型不一致,直接返回false,數(shù)據(jù)類型一致在比較是否相同
邏輯運算符 || &&
幾乎和JAVA中的一樣,需要注意的是,這里直接就是短路的邏輯運算符,單個的 | 和 & 以及 ^ 是位運算符
條件運算符 條件? 值1 : 值2
幾乎和JAVA中的一樣
位運算符 | & ^ << >> >>>
和 java中的類似(了解)
三 JS的流程控制和函數(shù)
3.1 JS分支結(jié)構(gòu)
if結(jié)構(gòu)
這里的if結(jié)構(gòu)幾乎和JAVA中的一樣,需要注意的是
if()中的非空字符串會被認為是trueif()中的非零數(shù)字會被認為是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){// 非零數(shù)字 if判斷為true
console.log(true)
}else{
console.log(false)
}
if(0){
console.log(true)
}else{
console.log(false)
}
結(jié)果
switch結(jié)構(gòu)
幾乎和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("月份有誤")
}
效果
3.2 JS循環(huán)結(jié)構(gòu)
while結(jié)構(gòu)
幾乎和JAVA一致 代碼
/* 打印99 乘法表 */
var i = 1;
while(i <= 9){
var j = 1;
while(j <= i){
document.write(j+"*"+i+"="+i*j+" ");
j++;
}
document.write("
");
i++;
}
效果
for循環(huán)
幾乎和JAVA一致 代碼
/* 打印99 乘法表 */
for( var i = 1;i <= 9; i++){
for(var j = 1;j <= i;j++){
document.write(j+"*"+i+"="+i*j+" ");
}
document.write("
");
}
效果
foreach循環(huán)
迭代數(shù)組時,和java不一樣
括號中的臨時變量表示的是元素的索引,不是元素的值,()中也不在使用: 分隔,而是使用 in 關(guān)鍵字 代碼
var cities =["北京","上海","深圳","武漢","西安","成都"]
document.write("
- ")
- "+cities[index]+" ")
for(var index in cities){
document.write("
}
document.write("
效果
3.3 JS函數(shù)聲明
JS中的方法,多稱為函數(shù),函數(shù)的聲明語法和JAVA中有較大區(qū)別
函數(shù)說明
函數(shù)沒有權(quán)限控制符不用聲明函數(shù)的返回值類型,需要返回在函數(shù)體中直接return即可,也無需void關(guān)鍵字參數(shù)列表中,無需數(shù)據(jù)類型調(diào)用函數(shù)時,實參和形參的個數(shù)可以不一致聲明函數(shù)時需要用function關(guān)鍵字J函數(shù)沒有異常列表 代碼
/*
語法1
function 函數(shù)名 (參數(shù)列表){函數(shù)體}
*/
function sum(a, b){
return a+b;
}
var result =sum(10,20);
console.log(result)
/*
語法2
var 函數(shù)名 = function (參數(shù)列表){函數(shù)體}
*/
var add = function(a, b){
return a+b;
}
var result = add(1,2);
console.log(result);
調(diào)用測試
四 JS的對象和JSON
4.1 JS聲明對象的語法
語法1 通過new Object()直接創(chuàng)建對象
代碼
var person =new Object();
// 給對象添加屬性并賦值
person.name="張小明";
person.age=10;
person.foods=["蘋果","橘子","香蕉","葡萄"];
// 給對象添加功能函數(shù)
person.eat= function (){
console.log(this.age+"歲的"+this.name+"喜歡吃:")
for(var i = 0;i console.log(this.foods[i]) } } //獲得對象屬性值 console.log(person.name) console.log(person.age) //調(diào)用對象方法 person.eat(); 效果 語法2 通過 {}形式創(chuàng)建對象 語法為 var person ={“屬性名”:“屬性值”,“屬性名”:“屬性值”,“函數(shù)名”:函數(shù)}代碼 var person ={ "name":"張小明", "age":10, "foods":["蘋果","香蕉","橘子","葡萄"], "eat":function (){ console.log(this.age+"歲的"+this.name+"喜歡吃:") for(var i = 0;i console.log(this.foods[i]) } } } //獲得對象屬性值 console.log(person.name) console.log(person.age) //調(diào)用對象方法 person.eat(); 效果 4.2 JSON格式 JSON（JavaScript Object Notation, JS對象簡譜）是一種輕量級的數(shù)據(jù)交換格式。它基于ECMAScript（European Computer Manufacturers Association, 歐洲計算機協(xié)會的一個子集，采用完全獨立于編程語言的文本格式來存儲和表示數(shù)據(jù)。簡潔和清晰的層次結(jié)構(gòu)使得 JSON 成為理想的數(shù)據(jù)交換語言。 易于人閱讀和編寫，同時也易于機器解析和生成，并有效地提升網(wǎng)絡(luò)傳輸效率 簡單來說,JSON 就是一種字符串格式,這種格式無論是在前端還是在后端,都可以很容易的轉(zhuǎn)換成對象,所以常用于前后端數(shù)據(jù)傳遞 說明 JSON的語法 ? var obj=“{‘屬性名’:‘屬性值’,‘屬性名’:{‘屬性名’:‘屬性值’},‘屬性名’:[‘值1’,‘值1’,‘值3’]}” JSON字符串一般用于傳遞數(shù)據(jù),所以字符串中的函數(shù)就顯得沒有意義,在此不做研究 通過JSON.parse()方法可以將一個JSON串轉(zhuǎn)換成對象 通過JSON.stringify()方法可以將一個對象轉(zhuǎn)換成一個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串轉(zhuǎn)換為對象 */ 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) /* 將對象轉(zhuǎn)換成JSON字符串 */ var personStr =JSON.stringify(person) console.log(personStr) console.log(typeof personStr) 前后端傳遞數(shù)據(jù) 4.3 JS常見對象 4.3.1 數(shù)組 創(chuàng)建數(shù)組的四種方式 new Array() 創(chuàng)建空數(shù)組new Array(5) 創(chuàng)建數(shù)組時給定長度new Array(ele1,ele2,ele3,… … ,elen); 創(chuàng)建數(shù)組時指定元素值[ele1,ele2,ele3,… … ,elen]; 相當(dāng)于第三種語法的簡寫 數(shù)組的常見API 在JS中,數(shù)組屬于Object類型,其長度是可以變化的,更像JAVA中的集合 方法描述concat()連接兩個或更多的數(shù)組，并返回結(jié)果。copyWithin()從數(shù)組的指定位置拷貝元素到數(shù)組的另一個指定位置中。entries()返回數(shù)組的可迭代對象。every()檢測數(shù)值元素的每個元素是否都符合條件。fill()使用一個固定值來填充數(shù)組。filter()檢測數(shù)值元素，并返回符合條件所有元素的數(shù)組。find()返回符合傳入測試（函數(shù)）條件的數(shù)組元素。findIndex()返回符合傳入測試（函數(shù)）條件的數(shù)組元素索引。forEach()數(shù)組每個元素都執(zhí)行一次回調(diào)函數(shù)。from()通過給定的對象中創(chuàng)建一個數(shù)組。includes()判斷一個數(shù)組是否包含一個指定的值。indexOf()搜索數(shù)組中的元素，并返回它所在的位置。isArray()判斷對象是否為數(shù)組。join()把數(shù)組的所有元素放入一個字符串。keys()返回數(shù)組的可迭代對象，包含原始數(shù)組的鍵(key)。lastIndexOf()搜索數(shù)組中的元素，并返回它最后出現(xiàn)的位置。map()通過指定函數(shù)處理數(shù)組的每個元素，并返回處理后的數(shù)組。pop()刪除數(shù)組的最后一個元素并返回刪除的元素。push()向數(shù)組的末尾添加一個或更多元素，并返回新的長度。reduce()將數(shù)組元素計算為一個值（從左到右）。reduceRight()將數(shù)組元素計算為一個值（從右到左）。reverse()反轉(zhuǎn)數(shù)組的元素順序。shift()刪除并返回數(shù)組的第一個元素。slice()選取數(shù)組的一部分，并返回一個新數(shù)組。some()檢測數(shù)組元素中是否有元素符合指定條件。sort()對數(shù)組的元素進行排序。splice()從數(shù)組中添加或刪除元素。toString()把數(shù)組轉(zhuǎn)換為字符串，并返回結(jié)果。unshift()向數(shù)組的開頭添加一個或更多元素，并返回新的長度。valueOf()返回數(shù)組對象的原始值。Array.of()將一組值轉(zhuǎn)換為數(shù)組。Array.at()用于接收一個整數(shù)值并返回該索引對應(yīng)的元素，允許正數(shù)和負數(shù)。負整數(shù)從數(shù)組中的最后一個元素開始倒數(shù)。Array.flat()創(chuàng)建一個新數(shù)組，這個新數(shù)組由原數(shù)組中的每個元素都調(diào)用一次提供的函數(shù)后的返回值組成。Array.flatMap()使用映射函數(shù)映射每個元素，然后將結(jié)果壓縮成一個新數(shù)組。 4.3.2 Boolean對象 boolean對象的方法比較簡單 方法描述toString()把布爾值轉(zhuǎn)換為字符串，并返回結(jié)果。valueOf()返回 Boolean 對象的原始值。 4.3.3 Date對象 和JAVA中的Date類比較類似 方法描述getDate()從 Date 對象返回一個月中的某一天 (1 ~ 31)。getDay()從 Date 對象返回一周中的某一天 (0 ~ 6)。getFullYear()從 Date 對象以四位數(shù)字返回年份。getHours()返回 Date 對象的小時 (0 ~ 23)。getMilliseconds()返回 Date 對象的毫秒(0 ~ 999)。getMinutes()返回 Date 對象的分鐘 (0 ~ 59)。getMonth()從 Date 對象返回月份 (0 ~ 11)。getSeconds()返回 Date 對象的秒數(shù) (0 ~ 59)。getTime()返回 1970 年 1 月 1 日至今的毫秒數(shù)。getTimezoneOffset()返回本地時間與格林威治標準時間 (GMT) 的分鐘差。getUTCDate()根據(jù)世界時從 Date 對象返回月中的一天 (1 ~ 31)。getUTCDay()根據(jù)世界時從 Date 對象返回周中的一天 (0 ~ 6)。getUTCFullYear()根據(jù)世界時從 Date 對象返回四位數(shù)的年份。getUTCHours()根據(jù)世界時返回 Date 對象的小時 (0 ~ 23)。getUTCMilliseconds()根據(jù)世界時返回 Date 對象的毫秒(0 ~ 999)。getUTCMinutes()根據(jù)世界時返回 Date 對象的分鐘 (0 ~ 59)。getUTCMonth()根據(jù)世界時從 Date 對象返回月份 (0 ~ 11)。getUTCSeconds()根據(jù)世界時返回 Date 對象的秒鐘 (0 ~ 59)。getYear()已廢棄。 請使用 getFullYear() 方法代替。parse()返回1970年1月1日午夜到指定日期（字符串）的毫秒數(shù)。setDate()設(shè)置 Date 對象中月的某一天 (1 ~ 31)。setFullYear()設(shè)置 Date 對象中的年份（四位數(shù)字）。setHours()設(shè)置 Date 對象中的小時 (0 ~ 23)。setMilliseconds()設(shè)置 Date 對象中的毫秒 (0 ~ 999)。setMinutes()設(shè)置 Date 對象中的分鐘 (0 ~ 59)。setMonth()設(shè)置 Date 對象中月份 (0 ~ 11)。setSeconds()設(shè)置 Date 對象中的秒鐘 (0 ~ 59)。setTime()setTime() 方法以毫秒設(shè)置 Date 對象。setUTCDate()根據(jù)世界時設(shè)置 Date 對象中月份的一天 (1 ~ 31)。setUTCFullYear()根據(jù)世界時設(shè)置 Date 對象中的年份（四位數(shù)字）。setUTCHours()根據(jù)世界時設(shè)置 Date 對象中的小時 (0 ~ 23)。setUTCMilliseconds()根據(jù)世界時設(shè)置 Date 對象中的毫秒 (0 ~ 999)。setUTCMinutes()根據(jù)世界時設(shè)置 Date 對象中的分鐘 (0 ~ 59)。setUTCMonth()根據(jù)世界時設(shè)置 Date 對象中的月份 (0 ~ 11)。setUTCSeconds()setUTCSeconds() 方法用于根據(jù)世界時 (UTC) 設(shè)置指定時間的秒字段。setYear()已廢棄。請使用 setFullYear() 方法代替。toDateString()把 Date 對象的日期部分轉(zhuǎn)換為字符串。toGMTString()已廢棄。請使用 toUTCString() 方法代替。toISOString()使用 ISO 標準返回字符串的日期格式。toJSON()以 JSON 數(shù)據(jù)格式返回日期字符串。toLocaleDateString()根據(jù)本地時間格式，把 Date 對象的日期部分轉(zhuǎn)換為字符串。toLocaleTimeString()根據(jù)本地時間格式，把 Date 對象的時間部分轉(zhuǎn)換為字符串。toLocaleString()根據(jù)本地時間格式，把 Date 對象轉(zhuǎn)換為字符串。toString()把 Date 對象轉(zhuǎn)換為字符串。toTimeString()把 Date 對象的時間部分轉(zhuǎn)換為字符串。toUTCString()根據(jù)世界時，把 Date 對象轉(zhuǎn)換為字符串。實例：var today = new Date(); var UTCstring = today.toUTCString();UTC()根據(jù)世界時返回 1970 年 1 月 1 日 到指定日期的毫秒數(shù)。valueOf()返回 Date 對象的原始值。 4.3.4 Math 和JAVA中的Math類比較類似 方法描述abs(x)返回 x 的絕對值。acos(x)返回 x 的反余弦值。asin(x)返回 x 的反正弦值。atan(x)以介于 -PI/2 與 PI/2 弧度之間的數(shù)值來返回 x 的反正切值。atan2(y,x)返回從 x 軸到點 (x,y) 的角度（介于 -PI/2 與 PI/2 弧度之間）。ceil(x)對數(shù)進行上舍入。cos(x)返回數(shù)的余弦。exp(x)返回 Ex 的指數(shù)。floor(x)對 x 進行下舍入。log(x)返回數(shù)的自然對數(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 之間的隨機數(shù)。round(x)四舍五入。sin(x)返回數(shù)的正弦。sqrt(x)返回數(shù)的平方根。tan(x)返回角的正切。tanh(x)返回一個數(shù)的雙曲正切函數(shù)值。trunc(x)將數(shù)字的小數(shù)部分去掉，只保留整數(shù)部分。 4.3.5 Number Number中準備了一些基礎(chǔ)的數(shù)據(jù)處理函數(shù) 方法描述isFinite檢測指定參數(shù)是否為無窮大。isInteger檢測指定參數(shù)是否為整數(shù)。isNaN檢測指定參數(shù)是否為 NaN。isSafeInteger檢測指定參數(shù)是否為安全整數(shù)。toExponential(x)把對象的值轉(zhuǎn)換為指數(shù)計數(shù)法。toFixed(x)把數(shù)字轉(zhuǎn)換為字符串，結(jié)果的小數(shù)點后有指定位數(shù)的數(shù)字。toLocaleString(locales, options)返回數(shù)字在特定語言環(huán)境下的表示字符串。toPrecision(x)把數(shù)字格式化為指定的長度。toString()把數(shù)字轉(zhuǎn)換為字符串，使用指定的基數(shù)。valueOf()返回一個 Number 對象的基本數(shù)字值。 4.3.6 String 和JAVA中的String類似 方法描述charAt()返回在指定位置的字符。charCodeAt()返回在指定的位置的字符的 Unicode 編碼。concat()連接兩個或更多字符串，并返回新的字符串。endsWith()判斷當(dāng)前字符串是否是以指定的子字符串結(jié)尾的（區(qū)分大小寫）。fromCharCode()將 Unicode 編碼轉(zhuǎn)為字符。indexOf()返回某個指定的字符串值在字符串中首次出現(xiàn)的位置。includes()查找字符串中是否包含指定的子字符串。lastIndexOf()從后向前搜索字符串，并從起始位置（0）開始計算返回字符串最后出現(xiàn)的位置。match()查找找到一個或多個正則表達式的匹配。repeat()復(fù)制字符串指定次數(shù)，并將它們連接在一起返回。replace()在字符串中查找匹配的子串，并替換與正則表達式匹配的子串。replaceAll()在字符串中查找匹配的子串，并替換與正則表達式匹配的所有子串。search()查找與正則表達式相匹配的值。slice()提取字符串的片斷，并在新的字符串中返回被提取的部分。split()把字符串分割為字符串?dāng)?shù)組。startsWith()查看字符串是否以指定的子字符串開頭。substr()從起始索引號提取字符串中指定數(shù)目的字符。substring()提取字符串中兩個指定的索引號之間的字符。toLowerCase()把字符串轉(zhuǎn)換為小寫。toUpperCase()把字符串轉(zhuǎn)換為大寫。trim()去除字符串兩邊的空白。toLocaleLowerCase()根據(jù)本地主機的語言環(huán)境把字符串轉(zhuǎn)換為小寫。toLocaleUpperCase()根據(jù)本地主機的語言環(huán)境把字符串轉(zhuǎn)換為大寫。valueOf()返回某個字符串對象的原始值。toString()返回一個字符串。 五 事件的綁定 5.1 什么是事件 HTML 事件可以是瀏覽器行為，也可以是用戶行為。 當(dāng)這些一些行為發(fā)生時,可以自動觸發(fā)對應(yīng)的JS函數(shù)的運行,我們稱之為事件發(fā)生.JS的事件驅(qū)動指的就是行為觸發(fā)代碼運行的這種特點 5.2 常見事件 鼠標事件 屬性描述onclick當(dāng)用戶點擊某個對象時調(diào)用的事件句柄。oncontextmenu在用戶點擊鼠標右鍵打開上下文菜單時觸發(fā)ondblclick當(dāng)用戶雙擊某個對象時調(diào)用的事件句柄。onmousedown鼠標按鈕被按下。onmouseenter當(dāng)鼠標指針移動到元素上時觸發(fā)。onmouseleave當(dāng)鼠標指針移出元素時觸發(fā)onmousemove鼠標被移動。onmouseover鼠標移到某元素之上。onmouseout鼠標從某元素移開。onmouseup鼠標按鍵被松開。 鍵盤事件 屬性描述onkeydown某個鍵盤按鍵被按下。onkeypress某個鍵盤按鍵被按下并松開。onkeyup某個鍵盤按鍵被松開。 表單事件 屬性描述onblur元素失去焦點時觸發(fā)onchange該事件在表單元素的內(nèi)容改變時觸發(fā)( , , , 和 )onfocus元素獲取焦點時觸發(fā)onfocusin元素即將獲取焦點時觸發(fā)onfocusout元素即將失去焦點時觸發(fā)oninput元素獲取用戶輸入時觸發(fā)onreset表單重置時觸發(fā)onsearch用戶向搜索域輸入文本時觸發(fā) ( 5.3 事件的綁定 通過屬性綁定 代碼
onkeydown="testDown1(),testDown2()"
onfocus="testFocus()"
onblur="testBlur()"
onchange="testChange(this)"
onmouseover="testMouseOver()"
onmouseleave="testMouseLeave()"
onmousemove="testMouseMove()"
/>
說明
通過事件屬性綁定函數(shù),在行為發(fā)生時會自動執(zhí)行函數(shù) 一個事件可以同時綁定多個函數(shù) 一個元素可以同時綁定多個事件 方法中可以傳入 this對象,代表當(dāng)前元素
通過DOM編程綁定
5.4 事件的觸發(fā)
行為觸發(fā)
發(fā)生行為時觸發(fā),演示:略
DOM編程觸發(fā)
通過DOM編程,用代碼觸發(fā),執(zhí)行某些代碼相當(dāng)于發(fā)生了某些行為 代碼
六 BOM編程
6.1 什么是BOM
BOM是Browser Object Model的簡寫，即瀏覽器對象模型。 BOM由一系列對象組成，是訪問、控制、修改瀏覽器的屬性和方法(通過window對象及屬性的一系列方法 控制瀏覽器行為的一種編程) BOM沒有統(tǒng)一的標準(每種客戶端都可以自定標準)。 BOM編程是將瀏覽器窗口的各個組成部分抽象成各個對象,通過各個對象的API操作組件行為的一種編程 BOM編程的對象結(jié)構(gòu)如下
window 頂級對象,代表整個瀏覽器窗口
location對象 window對象的屬性之一,代表瀏覽器的地址欄history對象 window對象的屬性之一,代表瀏覽器的訪問歷史screen對象 window對象的屬性之一,代表屏幕navigator對象 window對象的屬性之一,代表瀏覽器軟件本身document對象 window對象的屬性之一,代表瀏覽器窗口目前解析的html文檔 console對象 window對象的屬性之一,代表瀏覽器開發(fā)者工具的控制臺
6.2 window對象的常見屬性(了解)
屬性描述closed返回窗口是否已被關(guān)閉。defaultStatus設(shè)置或返回窗口狀態(tài)欄中的默認文本。document對 Document 對象的只讀引用。(請參閱對象)frames返回窗口中所有命名的框架。該集合是 Window 對象的數(shù)組，每個 Window 對象在窗口中含有一個框架。history對 History 對象的只讀引用。請參數(shù) History 對象。innerHeight返回窗口的文檔顯示區(qū)的高度。innerWidth返回窗口的文檔顯示區(qū)的寬度。localStorage在瀏覽器中存儲 key/value 對。沒有過期時間。length設(shè)置或返回窗口中的框架數(shù)量。location用于窗口或框架的 Location 對象。請參閱 Location 對象。name設(shè)置或返回窗口的名稱。navigator對 Navigator 對象的只讀引用。請參數(shù) Navigator 對象。opener返回對創(chuàng)建此窗口的窗口的引用。outerHeight返回窗口的外部高度，包含工具條與滾動條。outerWidth返回窗口的外部寬度，包含工具條與滾動條。pageXOffset設(shè)置或返回當(dāng)前頁面相對于窗口顯示區(qū)左上角的 X 位置。pageYOffset設(shè)置或返回當(dāng)前頁面相對于窗口顯示區(qū)左上角的 Y 位置。parent返回父窗口。screen對 Screen 對象的只讀引用。請參數(shù) Screen 對象。screenLeft返回相對于屏幕窗口的x坐標screenTop返回相對于屏幕窗口的y坐標screenX返回相對于屏幕窗口的x坐標sessionStorage在瀏覽器中存儲 key/value 對。 在關(guān)閉窗口或標簽頁之后將會刪除這些數(shù)據(jù)。screenY返回相對于屏幕窗口的y坐標self返回對當(dāng)前窗口的引用。等價于 Window 屬性。status設(shè)置窗口狀態(tài)欄的文本。top返回最頂層的父窗口。
6.3 window對象的常見方法(了解)
方法描述alert()顯示帶有一段消息和一個確認按鈕的警告框。atob()解碼一個 base-64 編碼的字符串。btoa()創(chuàng)建一個 base-64 編碼的字符串。blur()把鍵盤焦點從頂層窗口移開。clearInterval()取消由 setInterval() 設(shè)置的 timeout。clearTimeout()取消由 setTimeout() 方法設(shè)置的 timeout。close()關(guān)閉瀏覽器窗口。confirm()顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。createPopup()創(chuàng)建一個 pop-up 窗口。focus()把鍵盤焦點給予一個窗口。getSelection()返回一個 Selection 對象，表示用戶選擇的文本范圍或光標的當(dāng)前位置。getComputedStyle()獲取指定元素的 CSS 樣式。matchMedia()該方法用來檢查 media query 語句，它返回一個 MediaQueryList對象。moveBy()可相對窗口的當(dāng)前坐標把它移動指定的像素。moveTo()把窗口的左上角移動到一個指定的坐標。open()打開一個新的瀏覽器窗口或查找一個已命名的窗口。print()打印當(dāng)前窗口的內(nèi)容。prompt()顯示可提示用戶輸入的對話框。resizeBy()按照指定的像素調(diào)整窗口的大小。resizeTo()把窗口的大小調(diào)整到指定的寬度和高度。scroll()已廢棄。 該方法已經(jīng)使用了 scrollTo() 方法來替代。scrollBy()按照指定的像素值來滾動內(nèi)容。scrollTo()把內(nèi)容滾動到指定的坐標。setInterval()按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達式。setTimeout()在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式。stop()停止頁面載入。postMessage()安全地實現(xiàn)跨源通信。
6.4 通過BOM編程控制瀏覽器行為演示
三種彈窗方式
頁面跳轉(zhuǎn)
6.5 通過BOM編程實現(xiàn)會話級和持久級數(shù)據(jù)存儲
會話級數(shù)據(jù) : 內(nèi)存型數(shù)據(jù),是瀏覽器在內(nèi)存上臨時存儲的數(shù)據(jù),瀏覽器關(guān)閉后,數(shù)據(jù)失去,通過window的sessionStorge屬性實現(xiàn)持久級數(shù)據(jù) : 磁盤型數(shù)據(jù),是瀏覽器在磁盤上持久存儲的數(shù)據(jù),瀏覽器關(guān)閉后,數(shù)據(jù)仍在,通過window的localStorge實現(xiàn)可以用于將來存儲一些服務(wù)端響應(yīng)回來的數(shù)據(jù),比如:token令牌,或者一些其他功能數(shù)據(jù),根據(jù)數(shù)據(jù)的業(yè)務(wù)范圍我們可以選擇數(shù)據(jù)存儲的會話/持久 級別
測試,存儲數(shù)據(jù)后,再讀取數(shù)據(jù),然后關(guān)閉瀏覽器,獲取數(shù)據(jù),發(fā)現(xiàn)sessionStorge的數(shù)據(jù)沒有了,localStorge的數(shù)據(jù)還在通過removeItem可以將這些數(shù)據(jù)直接刪除在F12開發(fā)者工具的應(yīng)用程序欄,可以查看數(shù)據(jù)的狀態(tài)
七 DOM編程
7.1 什么是DOM編程
簡單來說:DOM(Document Object Model)編程就是使用document對象的API完成對網(wǎng)頁HTML文檔進行動態(tài)修改,以實現(xiàn)網(wǎng)頁數(shù)據(jù)和樣式動態(tài)變化效果的編程.
document對象代表整個html文檔，可用來訪問頁面中的所有元素，是最復(fù)雜的一個dom對象，可以說是學(xué)習(xí)好dom編程的關(guān)鍵所在。根據(jù)HTML代碼結(jié)構(gòu)特點,document對象本身是一種樹形結(jié)構(gòu)的文檔對象。
上面的代碼生成的樹如下
DOM編程其實就是用window對象的document屬性的相關(guān)API完成對頁面元素的控制的編程 dom樹中節(jié)點的類型
node 節(jié)點,所有結(jié)點的父類型
element 元素節(jié)點,node的子類型之一,代表一個完整標簽attribute 屬性節(jié)點,node的子類型之一,代表元素的屬性text 文本節(jié)點,node的子類型之一,代表雙標簽中間的文本
7.2 獲取頁面元素的幾種方式
7.2.1 在整個文檔范圍內(nèi)查找元素結(jié)點
功能API返回值根據(jù)id值查詢document.getElementById(“id值”)一個具體的元素節(jié)根據(jù)標簽名查詢document.getElementsByTagName(“標簽名”)元素節(jié)點數(shù)組根據(jù)name屬性值查詢document.getElementsByName(“name值”)元素節(jié)點數(shù)組根據(jù)類名查詢document.getElementsByClassName(“類名”)元素節(jié)點數(shù)組
7.2.2 在具體元素節(jié)點范圍內(nèi)查找子節(jié)點
功能API返回值查找子標簽element.children返回子標簽數(shù)組查找第一個子標簽element.firstElementChild標簽對象查找最后一個子標簽element.lastElementChild節(jié)點對象
7.2.3 查找指定子元素節(jié)點的父節(jié)點
功能API返回值查找指定元素節(jié)點的父標簽element.parentElement標簽對象
7.2.4 查找指定元素節(jié)點的兄弟節(jié)點
功能API返回值查找前一個兄弟標簽node.previousElementSibling標簽對象查找后一個兄弟標簽node.nextElementSibling標簽對象
7.3 操作元素屬性值
7.3.1 屬性操作
需求操作方式讀取屬性值元素對象.屬性名修改屬性值元素對象.屬性名=新的屬性值
7.3.2 內(nèi)部文本操作
需求操作方式獲取或者設(shè)置標簽體的文本內(nèi)容element.innerText獲取或者設(shè)置標簽體的內(nèi)容element.innerHTML
你好世界
7.4 增刪元素
7.4.1 對頁面的元素進行增刪操作
API功能document.createElement(“標簽名”)創(chuàng)建元素節(jié)點并返回，但不會自動添加到文檔中document.createTextNode(“文本值”)創(chuàng)建文本節(jié)點并返回，但不會自動添加到文檔中element.appendChild(ele)將ele添加到element所有子節(jié)點后面parentEle.insertBefore(newEle,targetEle)將newEle插入到targetEle前面parentEle.replaceChild(newEle, oldEle)用新節(jié)點替換原有的舊子節(jié)點element.remove()刪除某個標簽
- 北京
- 上海
- 深圳
- 廣州
八 正則表達式
8.1 正則表達式簡介
正則表達式是描述字符模式的對象。正則表達式用于對字符串模式匹配及檢索替換，是對字符串執(zhí)行模式匹配的強大工具。
語法
var patt=new RegExp(pattern,modifiers);
或者更簡單的方式:
var patt=/pattern/modifiers;
修飾符
修飾符描述i執(zhí)行對大小寫不敏感的匹配。g執(zhí)行全局匹配（查找所有匹配而非在找到第一個匹配后停止）。m執(zhí)行多行匹配。
方括號
表達式描述[abc]查找方括號之間的任何字符。[^abc]查找任何不在方括號之間的字符。[0-9]查找任何從 0 至 9 的數(shù)字。[a-z]查找任何從小寫 a 到小寫 z 的字符。[A-Z]查找任何從大寫 A 到大寫 Z 的字符。[A-z]查找任何從大寫 A 到小寫 z 的字符。[adgk]查找給定集合內(nèi)的任何字符。[^adgk]查找給定集合外的任何字符。(red|blue|green)查找任何指定的選項。
元字符
元字符描述.查找單個字符，除了換行和行結(jié)束符。\w查找數(shù)字、字母及下劃線。\W查找非單詞字符。\d查找數(shù)字。\D查找非數(shù)字字符。\s查找空白字符。\S查找非空白字符。\b匹配單詞邊界。\B匹配非單詞邊界。\0查找 NULL 字符。\n查找換行符。\f查找換頁符。\r查找回車符。\t查找制表符。\v查找垂直制表符。\xxx查找以八進制數(shù) xxx 規(guī)定的字符。\xdd查找以十六進制數(shù) dd 規(guī)定的字符。\uxxxx查找以十六進制數(shù) xxxx 規(guī)定的 Unicode 字符。
量詞
量詞描述n+匹配任何包含至少一個 n 的字符串。例如，/a+/ 匹配 “candy” 中的 “a”，“caaaaaaandy” 中所有的 “a”。n*匹配任何包含零個或多個 n 的字符串。例如，/bo*/ 匹配 “A ghost booooed” 中的 “boooo”，“A bird warbled” 中的 “b”，但是不匹配 “A goat grunted”。n?匹配任何包含零個或一個 n 的字符串。例如，/e?le?/ 匹配 “angel” 中的 “el”，“angle” 中的 “l(fā)e”。n{X}匹配包含 X 個 n 的序列的字符串。例如，/a{2}/ 不匹配 “candy,” 中的 “a”，但是匹配 “caandy,” 中的兩個 “a”，且匹配 “caaandy.” 中的前兩個 “a”。n{X,}X 是一個正整數(shù)。前面的模式 n 連續(xù)出現(xiàn)至少 X 次時匹配。例如，/a{2,}/ 不匹配 “candy” 中的 “a”，但是匹配 “caandy” 和 “caaaaaaandy.” 中所有的 “a”。n{X,Y}X 和 Y 為正整數(shù)。前面的模式 n 連續(xù)出現(xiàn)至少 X 次，至多 Y 次時匹配。例如，/a{1,3}/ 不匹配 “cndy”，匹配 “candy,” 中的 “a”，“caandy,” 中的兩個 “a”，匹配 “caaaaaaandy” 中的前面三個 “a”。注意，當(dāng)匹配 “caaaaaaandy” 時，即使原始字符串擁有更多的 “a”，匹配項也是 “aaa”。n$匹配任何結(jié)尾為 n 的字符串。^n匹配任何開頭為 n 的字符串。?=n匹配任何其后緊接指定字符串 n 的字符串。?!n匹配任何其后沒有緊接指定字符串 n 的字符串。
RegExp對象方法
方法描述compile在 1.5 版本中已廢棄。 編譯正則表達式。exec檢索字符串中指定的值。返回找到的值，并確定其位置。test檢索字符串中指定的值。返回 true 或 false。toString返回正則表達式的字符串。
支持正則的String的方法
方法描述search檢索與正則表達式相匹配的值。match找到一個或多個正則表達式的匹配。replace替換與正則表達式匹配的子串。split把字符串分割為字符串?dāng)?shù)組。
8.2 正則表達式體驗
8.2.1 驗證
注意：這里是使用正則表達式對象來調(diào)用方法。
// 創(chuàng)建一個最簡單的正則表達式對象
var reg = /o/;
// 創(chuàng)建一個字符串對象作為目標字符串
var str = 'Hello World!';
// 調(diào)用正則表達式對象的test()方法驗證目標字符串是否滿足我們指定的這個模式，返回結(jié)果true
console.log("/o/.test('Hello World!')="+reg.test(str));
8.2.2 匹配
// 創(chuàng)建一個最簡單的正則表達式對象
var reg = /o/;
// 創(chuàng)建一個字符串對象作為目標字符串
var str = 'Hello World!';
// 在目標字符串中查找匹配的字符，返回匹配結(jié)果組成的數(shù)組
var resultArr = str.match(reg);
// 數(shù)組長度為1
console.log("resultArr.length="+resultArr.length);
// 數(shù)組內(nèi)容是o
console.log("resultArr[0]="+resultArr[0]);
8.2.3 替換
注意：這里是使用字符串對象來調(diào)用方法。
// 創(chuàng)建一個最簡單的正則表達式對象
var reg = /o/;
// 創(chuàng)建一個字符串對象作為目標字符串
var str = 'Hello World!';
var newStr = str.replace(reg,'@');
// 只有第一個o被替換了，說明我們這個正則表達式只能匹配第一個滿足的字符串
console.log("str.replace(reg)="+newStr);//Hell@ World!
// 原字符串并沒有變化，只是返回了一個新字符串
console.log("str="+str);//str=Hello World!
8.2.4 全文查找
如果不使用g對正則表達式對象進行修飾，則使用正則表達式進行查找時，僅返回第一個匹配；使用g后，返回所有匹配。
// 目標字符串
var targetStr = 'Hello World!';
// 沒有使用全局匹配的正則表達式
var reg = /[A-Z]/;
// 獲取全部匹配
var resultArr = targetStr.match(reg);
// 數(shù)組長度為1
console.log("resultArr.length="+resultArr.length);
// 遍歷數(shù)組，發(fā)現(xiàn)只能得到'H'
for(var i = 0; i < resultArr.length; i++){
console.log("resultArr["+i+"]="+resultArr[i]);
}
對比
// 目標字符串
var targetStr = 'Hello World!';
// 使用了全局匹配的正則表達式
var reg = /[A-Z]/g;
// 獲取全部匹配
var resultArr = targetStr.match(reg);
// 數(shù)組長度為2
console.log("resultArr.length="+resultArr.length);
// 遍歷數(shù)組，發(fā)現(xiàn)可以獲取到“H”和“W”
for(var i = 0; i < resultArr.length; i++){
console.log("resultArr["+i+"]="+resultArr[i]);
}
8.2.5 忽略大小寫
//目標字符串
var targetStr = 'Hello WORLD!';
//沒有使用忽略大小寫的正則表達式
var reg = /o/g;
//獲取全部匹配
var resultArr = targetStr.match(reg);
//數(shù)組長度為1
console.log("resultArr.length="+resultArr.length);
//遍歷數(shù)組，僅得到'o'
for(var i = 0; i < resultArr.length; i++){
console.log("resultArr["+i+"]="+resultArr[i]);
}
對比
//目標字符串
var targetStr = 'Hello WORLD!';
//使用了忽略大小寫的正則表達式
var reg = /o/gi;
//獲取全部匹配
var resultArr = targetStr.match(reg);
//數(shù)組長度為2
console.log("resultArr.length="+resultArr.length);
//遍歷數(shù)組，得到'o'和'O'
for(var i = 0; i < resultArr.length; i++){
console.log("resultArr["+i+"]="+resultArr[i]);
}
8.2.6 元字符使用
var str01 = 'I love Java';
var str02 = 'Java love me';
// 匹配以Java開頭
var reg = /^Java/g;
console.log('reg.test(str01)='+reg.test(str01)); // false
console.log("
");
console.log('reg.test(str02)='+reg.test(str02)); // true
var str01 = 'I love Java';
var str02 = 'Java love me';
// 匹配以Java結(jié)尾
var reg = /Java$/g;
console.log('reg.test(str01)='+reg.test(str01)); // true
console.log("
");
console.log('reg.test(str02)='+reg.test(str02)); // false
8.2.7 字符集合的使用
//n位數(shù)字的正則
var targetStr="123456789";
var reg=/^[0-9]{0,}$/;
//或者 ： var reg=/^\d*$/;
var b = reg.test(targetStr);//true
//數(shù)字+字母+下劃線，6-16位
var targetStr="HelloWorld";
var reg=/^[a-z0-9A-Z_]{6,16}$/;
var b = reg.test(targetStr);//true
8.2.8 常用正則表達式
需求正則表達式用戶名/^[a-zA-Z ][a-zA-Z-0-9]{5,9}$/密碼/^[a-zA-Z0-9 _-@#& *]{6,12}$/前后空格/^\s+|\s+$/g電子郵箱/^[a-zA-Z0-9 _.-]+@([a-zA-Z0-9-]+[.]{1})+[a-zA-Z]+$/
九 案例開發(fā)-日程管理-第一期
9.1 登錄頁及校驗
歡迎使用日程管理系統(tǒng)
請登錄
9.2 注冊頁及校驗
歡迎使用日程管理系統(tǒng)
請注冊
柚子快報激活碼778899分享：javascript 03
推薦文章
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
沃爾瑪外貿(mào)優(yōu)選
