javascript
一路慢行的JavaScript之旅（add）！！！
一、JavaScript
JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基于原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。?
二、JavaScript基本使用方式和常用屬性
一、使用JS的三種方式：
1、在HTML中直接內嵌JS（并不提倡使用）；
<button οnclick="alert(啦啦啦)">有本事你點我呀！！！</button>
>>>不符合W3C關于內容與行為分離的要求！！！
2、在HTML頁面中，使用script標簽包裹JS代碼；
<script type="text/javascript"></script>
>>><Script></Script>標簽可以放到頁面的任意位置。
3、引入一個外部單獨的JS文件
<script language="JavaScript" src="js/01.js"></script>
[注意事項]
①<script></script>可以嵌入到頁面的任意位置。但是，位置的不同會導致JS代碼的執行順序不同；
比如：<script>
</script>放到<body>前面，則代碼會在頁面加載之前就執行；
②引入一個外部的JS代碼，<script></script>必須是成對出現的標簽，而且標簽中不得出現任何的JS代碼；
二、JS中的變量和運算符：
1、JS中變量聲明的寫法：?
? var num =10；// 使用var聲明的變量，屬于局部變量，只是當前作用域內有效；
? num = 10； // 不用var聲明，默認為全局變量，在整個JS文件中都有效；
? var x=8,y,z=10;使用一行語句，同時聲明多個變量。上式中，y屬于已聲明，但是未賦值狀態，結果為undefined；
?[聲明
?變量的注意事項]
?①JS中所有變量的聲明，均使用var關鍵字。變量具體是什么數據類型，取決于給變量賦值的類型；
?②同一個變量，可以在多次不同賦值時，修改變量的數據類型；
?var a = 10；// 從初始聲明是，a屬于整數型；
?a = "haha";// 重復賦值時，整數型的a被修改為字符串類型；
?③變量可以使用var聲明，也可以不使用var聲明；
?[區別] 使用var聲明為局部變量，不使用var聲明為全局變量；
?④只用var聲明，但是不賦值。結果為undefined；
?例如： var a； // a為undefined。
?但是，如果不聲明也不賦值的a，直接使用會報錯；
? ⑤同一變量名，可以多次使用var聲明。但是，后年的var并沒有任何作用。第二次使用聲明時，只會被理解為普通的賦值操作。
2、變量名的命名要求：
?①變量名只能有字母、數字、下劃線組成；
?②開頭不能是數字；
?③變量名區分大小寫，大寫字母和小寫字母為不同變量；純大寫字母，一般默認為常量；
3、變量名的命名規范：
?①要符合小駝峰法則：
?首字母小寫，之后每個單詞的首字母大寫；
?myNameIsJiangHao 駱駝命名法：
?② 所有字母小寫，中間用
?_my_name_is_jiang_hao 匈牙利寫法
?③ manameisjianghao 能用 但是不規范
?4、JS中的數據類型：
?Undefined：未定義、已經使用var聲明的變量，但是沒有賦值。var a；
?Null：表示空的引用。
?Boolean：布爾類型。表示真假，只有兩個值： true/flase
?Number: 數值類型。可以是正數，也可以是小數；
?String： 字符串類型。用""或''包裹的內容，稱為字符串；
?Object： 對象類型，后續講解。。。。
?5、[常用的數值函數]
?①isNaN（）：判斷一個變量或常量，是否是NaN( not a num 非數值)；
?使用isNaN()判斷時，會嘗試使用Number（）函數進行轉換，如果最終結果能夠轉換數字，則不是NaN,結果為false；
?②number()函數： 將其他類型的數據，嘗試轉為數值型；
? ?[字符串類型]
? <<<字符串為純數值字符串，會轉為對應的數字；"111"→111
? >>>字符串為空字符串，會轉為0： " "-> 0
? >>>字符串包含任何其它字符時，都不能轉；"1a"->NaN
? [Boolean類型]
?true->1 false->0
?[Null/Undefined]
?Null->0 Undefined->NaN
?[Object]
?③ParseInt():將字符串轉為整數類型；
?>>>純數值字符串，能轉。"12"->12;"12.9"->12(小數轉化時，直接抹掉小數點，不進行四舍五入)
? >>>空字符串，不能轉。" "->NaN
?>>>包含其它字符的字符串，會截取第一個非數值字符串前的數字部分；
?"123a456"->123;"a123b456"->NaN
?>>>ParseInt()只能轉字符串，轉其它類型，全是NaN.
?[number函數與ParseInt函數的區別]
?1、Number函數可以轉各種數據的類型，ParseInt函數只能轉字符串；
?2、兩者在轉字符串時，結果不完全相同。(詳見上面解釋)
?④ParseFloat：將字符串轉為數值型；
?轉換規則與ParseInt相同，只是如果有小數，則保留小數點；如果沒有小數，則依然是整數；"12.5"->12.5;"12"->12
?⑤typeof：檢測變量的數據類型：
?字符串->String 數值->Number 未定義->Undefined 對象/NULL->object 函數->function
?true/false->Boolean
【JS中常用的輸入輸出語句】
?1.document.write();將（）中的內容打印輸出到留言器屏幕上；
?使用時需要注意：除變量/常量外的所有內容，必須放到""中。變量和常量必須放到""外面；
?如果同時有變量和字符串，必須用+連接；
?eg：document.write（"左手中的紙牌"+left+"<br />"）;
?2.alect（）；使用彈窗輸出；
?彈窗警告，（）中的內容與上述要求相同。
?3.prompt（）；彈窗輸入；
?接受兩部分參數：
?①輸入框上面的提示內容，可選；
?②輸入框里面的默認信息，可選；
?當只寫一部分時，表示輸入框上面的提示內容；
?可以定義變量，接受輸入的內容。點擊確定按鈕，變量將被賦值為輸入的內容；點擊取消按鈕，變量將被賦值為null；
6、JS的常用運算符
1、算術運算(單目運算符)
+ 加、-減、*乘、 /除、 %取余、++自增 、--自減
+號：有兩種作用，連接字符串/加法運算。當+兩邊連接數字時，進行加法運算；當+兩邊有任意一邊為字符串時，起連接字符串作用，
鏈接之后的結果為字符串；
除+外，其余符號運算時，會先嘗試將左右兩邊的變量用Number函數轉為數字；
>>>/:結果保留小數點；
>>>++:自增運算時，將變量在原有基礎上+1；
>>>--:自減運算符，將變量在自身基礎上-1；
【a++和++a的異同點】
①相同點：無論a++還是++a，運算完以后，a的值均會+1；
②不同點： a++，先用a的值去運算，再把a+1；
++a，先把a+1，再用a+1以后的值去運算。
eg：量、var a=3，b，c；
b=a++ +2；//先用a運算，b=3+2 再把a+1，a=4；
c=++a +2；//先把a+1，a=5再用a+1以后的值去運算，c=5+2；
2、賦值運算
= += -= *= /= %=
+=：a+=b；相當于a=a+b；但是前者的運算效率要比后者快，所以推薦使用+=的寫法；
3、關系運算
==、 ！=、>、<、>=、<=
>>> 關系運算符，運算之后的結果，只能是Boolean類型；
>>> 判斷一個數字是否處于一個區間，必須用&&鏈接；
a<10 && a>0 √ ; 10>a>0 x
>>> ===:嚴格等于；要求不但類型要相同，值也必須相同；類型不同結果直接為false，類型相同，再進行下一步判斷；
== ：等于。類型相同，同===一樣，類型不同時，會先嘗試用Number將兩邊轉為數字，然后再進行判斷。
但是，有個別特例： Null==false x ；Null==Undefined √
！=：不等、！== 不全等
4、條件運算符(多目運算)
a>b?true:false?
有兩個重要符號： ？ 和 ：
當？前面部分，運算結果為true時，執行：前面的代碼；
當？前面部分，運算結果為false時，執行：后面的代碼；
冒號兩邊可以為數值，則整個式子可用于賦值。Var a= 1<2?1:2
冒號兩邊可以為代碼塊，將直接執行代碼。1<2?alert(1):alert(2);
多目運算符可以多層嵌套。var a = 1<2?alert(1):(1>0?4:5)
5、 位運算符、 邏輯運算符
&、|、~ &&與、||或、！非
&& 兩邊都成立，結果為true
|| 兩邊有任意一個成立，結果為true
三、JS中的分支和循環屬性
一、JS中的分支
?【if-else結構】
?1、結構的寫法：?
? ?if(){
//條件為true時，執行if的{}
}else{
//條件為false時，執行else的{}
}
2、注意事項：
?①else{}語句塊。可以根據情況進行省略。
?②if和else后面的大括號可以省略，但是省略大括號后，if和else后面只能跟一條語句，不建議省略；?
3、if的（）中的判斷條件，支持的情況：
?①Boolean：true為真；false為假；
?②String：空字符串為假，所有非空字符串為真；
?③Number：0為假；一切非零數字為真；
?④null/Undefined/NaN:全為假；
?⑤object：全為真；
【多重if、階梯if結構】
?1、if（條件一）{
? //條件一成立，執行的操作
?}else if（條件二）{
?//條件一不成立&&條件二成立，執行的操作
}else if（條件三）{
?//條件一不成立&&條件二不成立，執行的操作
?}
?2、多重if結構中，各個判斷條件是互斥的，執行選擇其中一條路執行。遇到正確選項并執行完以后，直接跳出結構，不再
?判斷后續分支；
【嵌套if結構】
1、結構寫法：
? ?if(條件一){
?//條件一成立
? ?if（條件二）{
//條件一成立&&條件二成立
?}else{
?//條件一成立&&條件二不成立
?}
?}else{//條件一不成立
?if（條件二）{
?條件一不成立&&條件二成立
?}else{
? ? ? 條件一不成立&條件二不成立
? ? ? ?}
?}
2、在嵌套結構中，如果省略{}，則else結構永遠屬于離它最近的一個if結構。
3、嵌套結構可以多層嵌套，但是一般不超過三層，能用多重結構的不用嵌套結構。
二、JS中的循環結構
【while(){}循環結構的步驟】
?1、聲明循環變量
?2、判斷循環條件
?3、執行循環體操作
?4、更新循環變量
?然后循環執行2-4，直到條件不成立時跳出循環。
?while循環()中的表達式，運算結果可以是多種類型，但是最終都會轉為真假，轉換規則同if結構
?（1）、boolean類型：true為真，false為假
?（2）、string類型：所有非空字符串為真，空字符串為假
?（3）、number類型：一切非零數字為真，零為假
?（4）、null、undefined、NaN：全為假
?（5）、object類型：全為真。
? ?var num=1; //聲明循環變量
? ?while (num<=10){ //判斷循環條件
? ?document.write(num+"<br />");//執行循環體操作
? ?num++; //更新循環變量
? ?}?
【 while循環與do-while循環的區別:】
?while循環是先判斷再循環;?
?do-while循環是先執行再判斷,即便是條件不成立,該循環也最少執行一次.
?var num=10;
?do{
?document.write(num+"<br />");
?num--;
?}
?while(num>=0);
?【for循環】
?1、for循環有三個表達式：
?① 聲明循環變量;
?② 判斷循環條件;
?③ 更新循環變量;
?三個表達式之間用;分隔開,三個表達式可以省略,但是兩個分號不能省略.
?2、for循環的執行特點:先判斷再執行，和while相同；
?執行順序：1、初始語句 2、執行條件是否符合？ 3、循環體 4、增加增量 ；
?3、for循環三個表達式均可以由多部分組成，第二部分多個判斷條件用&& 、||連接，其他部分可以用，連接。
?將上部while循環改為for循環如下:
?for(var num=1; num<=10;num++){
?document.write(num+"<br />")
?}
? 【循環控制語句】
?1、break：跳出本層循環，繼續執行后面的語句。
?如果循環有多層嵌套,則只能跳出來一層循環；
?2、continue：跳過本次循環剩余的代碼繼續執行下一次循環；
?①、對于for循環：continue之后執行的語句，是循環變量更新語句i++；
?②、對于while、do-while循環，continue之后執行的語句，是循環條件判斷。// 因此在使用這兩個循環時，必須將continue放到i++之后使用。否則，continue將跳過i++，變成死循環。
三、JS中的函數和DOM
一、JS中的函數
? 函數的聲明及調用
?1、函數的聲明格式：
?function 函數名（參數一，參數二，...）{
?//函數體代碼
?return 返回值；
?}
?函數的調用：
?① 直接調用：函數名加（參數一的值，參數二的值,.......)；
?② 事件調用：HTML標簽中，使用事件名="函數名（）"
? <button οnclick="saySth('hahha','yellow')">點擊按鈕，打印內容</button>
2、函數的注意事項：
?① 函數必須要符合小駝峰法則！！！（首字母小寫，之后每個人單詞首字母大寫）
?② 函數名后面的（）中，可以有參數，也可以沒有參數。分別稱為有參函數和無參函數；
?③ 聲明函數時的參數列表，稱為型參列表，形式參數。（變量的名字）
?function saySth(str,color){}
?調用函數時的參數列表，稱為實參列表，實際參數。（變量的賦值）
?saySth("哈哈哈","red");
?④ 函數的形參列表個數和實參列表個數沒有實際關系。
?函數參數的個數，取決于實參列表。
如果實參列表的個數<形參列表,則未賦值的形參，將為Undefined。
?⑤ 函數可以有返回值，使用return返回結果；
?調回函數時，可以使用一個變量接受函數的返回結果。如果函數沒有返回值，則接受的結果為undefined；
?function func(){
? ?return = "hahaha";
?}
? var num = func()；//num = "hahaha"
?⑥ 函數變量的作用域：
? 在函數中，使用var聲明的變量，為局部變量，只能在函數內部訪問；
? 不使用var聲明的變量，為全局變量，在函數外邊也能訪問；
? 函數的形象列表，默認為函數的局部變量，只能在函數內部使用；
?⑦ 函數的聲明與函數的調用，沒有先后之分。即，可以在聲明函數之前，調用函數。
?func（）；//聲明func之前調用也是可以的。
?function func(){}
匿名函數的聲明和使用
1、聲明一個匿名函數直接賦值給某一個事件；
? window.onload = function（）{}
2、使用匿名函數表達式；將匿名函數，賦值給一個變量。
?聲明：var func = function(){}
?調用：func()；
?注意：使用匿名函數表達時，函數的調用語句，必須放在函數聲明語句之后！！！（與普通函數的區別！！！）
3、自執行函數
?① ！function(){}();//可以使用多種運算符開頭，單一版用！；
? ? ?！function(形參列表){}(實參列表)；
?② (function(){}());//使用()將函數及函數后的括號包起來；
?③ (function(){})();//使用()值包裹函數部分；
?三種寫法的特點：
?① 第一種使用！開頭，結構清晰，不容易混亂，推薦使用；
?② 第二種寫法能夠表明匿名函數與調用的()為一個整體，官方推薦使用；
?③ 第三種無法表明函數之后的()的整體性，不推薦使用；
JS代碼的執行順序問題
* JS代碼在運行時，會分為兩大部分。檢查裝載和執行階段
* 檢查裝載階段： 會先檢測代碼的語法錯誤，進行變量、函數的聲明。
*?
* 執行階段：變量的賦值、函數的調用等，都屬于執行階段。
*?
* 以下列代碼為例：
* consoloe.log();
* var num = 10;//dundefined
*?
* func1(); //函數正常執行
* function func1(){};
*?
* func2(); //函數不能執行，打印func2時顯示undefined
* var func2 = function{}
*?
* 原因：上述代碼的執行順序為：
*?
* --------------------檢查裝載階段--------------------
* var num；
* function func1（）{}
* var func2?
*?
* --------------------代碼執行階段--------------------
* consoloe.log(num); undefined; var num =10;
* function func1(){};
*?
* func2(); =function(){}
二、函數中的DOM操作
【DOM節點】
?DOM節點分為三大類：元素節點、屬性節點、文本節點；
?文本節點、屬性節點屬于元素節點的子節點。操作時，均需要先取到元素節點，再操作子節點。
?可以使用getElement系列方法
?【查看元素節點】
?1、 getElementById：通過id取到唯一節點。如果id重名只能取到第一個；
getElementsByName() ：通過name屬性?
getElementsByTagName() ：通過標簽名
getElementsByClassName() ：通過class名
?>>>獲取元素節點時，一定要注意：獲取節點的語句，必須在DOM渲染完成之后執行。可以有兩種方式實現：① 將
?JS代碼寫在body之后； ② 將代碼寫到window.onload函數之中；
?>>>后面三個getElements，取到的是數組格式，不能直接添加各種屬性，而應該取出數組的每一個單獨操作。例如：
?【查看/設置屬性節點】
?1、查看屬性節點：getAttribute("屬性名")；
?2、設置屬性節點：setAttribute("屬性名"，"屬性值")；
?>>>查看和設置屬性節點，必須取到元素節點，才能使用。
?>>> setAttribute();函數在IE瀏覽器中可能會存在兼容性問題。比如在IE中不支持使用這個函數設置style/onclick等樣式屬性和事件屬性。
?>>> 我們推薦使用點符號法替代上述函數：
?eg: dom1.style.color="" dom1.οnclick="" dom1.src=""
?【總結-JS修改DOM節點的樣式】
?1、 使用setAttribute()設置class和style屬性，但是存在兼容性問題，不提倡
?div.setAttribute("class","cls1");
?2、 使用.className直接設置class類,注意是className而不是.class：
?div.className = "cls1";
?3、 使用.style設置單個屬性，注意屬性名要是用駝峰命名法：
?div.style.backgroundColor = "red";
?4、 使用.style 或 .style.cssText 設置多個樣式屬性：
?div.style = "background-color:red; color:yellow;"
?div.style.cssText = "background-color:red; color:yellow;" √
? 【查看設置文本節點】
? ?1、 .innerText: 取到或設置節點 里面文字內容；
? .innerHTML: 取到或設置節點里面的HTML代碼；
? .tagName: 取到當前節點的標簽名。 標簽名全部大寫顯示。
【根據層次獲取節點】
?1 .childNodes： 獲取元素的所有子節點。包括回車等文本節點。
?.children: 獲取當前元素的所有元素節點(只獲取標簽)。
?2 .firstChild: 獲取元素的第一個子節點。包括回車等文本節點。
?.firstElementChild: 獲取元素的第一個子節點。不包括回車等文本節點。
?.lastChild: 獲取元素的最后一個子節點。包括回車等文本節點。
?.lastElementChild:
?3 .parentNode: 獲取當前節點的父節點。
?4 .previousSibling: 獲取當前節點的前一個兄弟節點；包括回車等文本節點。
?.previousElementSibling:
?5 .nextSibling: 獲取當前節點的后一個兄弟節點；包括回車等文本節點。
?.nextElementSibling:
?6 .getAttributes: 獲取當前節點的屬性節點。
【創建并新增節點】
?1. document.createElement("標簽名")：創建節點 。需要配合 setAttribute設置各種新的屬性；
?2. 父節點.appendChild(新節點)：末尾追加方式插入節點
?3. 父節點.insertBefore(新節點,目標節點)：在目標節點前插入新節點.
?4. 被克隆節點.cloneNode(true/false)：克隆節點
?>>> 傳入true： 表示克隆當前節點，以及當前節點的所有字節點；
?>>> 傳入false或不傳： 表示只克隆當前節點，而不克隆子節點。
?【刪除或替換節點】
?1. 父節點.removeChild(被刪節點): 刪除父節點中的子節點；
?2. 父節點.replaceChild(新節點,老節點): 使用新節點，替換掉老節點。
【表格對象】
1、row屬性：返回表格中的所有行，是一個數組格式；
2、insertRow(index):在指定位置插入一行，index從0開始；
3、deleteRow(index):刪除指定的一行，index從0開始；
【行對象】
1、cells屬性：返回這一行中的所有單元格，是一個數組格式；
2、rowIndex屬性：返回這一行是表格中的第幾行，從0開始；
3、insertCell(index):在這一行指定位置，插入一個單元格，index從0開始；
4、deleteCell(index):刪除這一行的指定單元格，index從0開始
【單元格對象】
1、cellIndex屬性：返回這個單元格是本行的第幾個，從0開始；
2、innerText innerHTML align className
?[表格對象]
?1、 rows屬性： 返回表格中的所有行，是一個數組格式；
?2、 insertRow(index): 在指定位置插入一行，index從0開始；
?3、 deleteRow(index): 刪除指定的一行，index從0開始；
?[行對象]
?1、 cells屬性： 返回這一行中的所有單元格，是一個數組格式；
?2、 rowIndex屬性： 返回這一行是表格中的第幾行，從0開始；
?3、 insertCell(index): 在這一行指定位置，插入一個單元格，index從0開始；
?4、 deleteCell(index): 刪除這一行的指定單元格，index從0開始
?[單元格對象]
?1、 cellIndex屬性： 返回這個單元格是本行的第幾個，從0開始；
?2、 innerText innerHTML align className
三、JS中的事件
【JS中的事件分類】
?1、鼠標事件
?click、dbclick、onmouseover、onmouseout
?2、HTML事件
?onload/onscroll/onsubmit/onchange/onfocus
?3、鍵盤事件
?keydown：鍵盤按下時觸發
?keypress：鍵盤按下并松開的瞬間觸發
?keyup：鍵盤抬起時觸發
?[注意事項]
?①執行順序：keydown->keypress->keyup
?②當長按時：會循環執行keydown->keypress
?③有keydown不一定有keyup，當事件觸發過程中，鼠標將光標移走，將導致沒有keyup
?④keypress只能捕獲鍵盤上的數字、字符、符號鍵，不能捕獲各種功能鍵，而keydown和keyup可以。
?⑤keypress支持區分大小寫，keydown和keyup并不支持
?[確定觸發的按鍵]
?①再觸發的函數中傳入一個參數e，表示鍵盤事件；
?②使用e.keyCode，取得按鍵的Ascii碼值，進而確定觸發按鍵；
?③所有瀏覽器的兼容寫法(一般并不需要)
?var evn = e || event ；
?var code = evn.keyCode || evn.which || evn.charCode；
【JS中的DOM0事件模型】
1、內聯模型(行內綁定)：直接將函數名作為HTML標簽的某個事件屬性的屬性；
?eg：<button οnclick="func()">DOM0內聯模型</button>
?優點：使用方便；
? 缺點：違反了W3C關于HTML與JavaScript分離的基本原則；
2、腳本模型(動態綁定)：在JS腳本中取到某個節點，并添加事件屬性；
?eg：window.onload = function(){}
?優點：實現了HTML與JavaScript的分離
? 缺點：同一個節點，只能綁定一個同類型事件。如果綁定多次，則最后一個生效。
?【DOM2事件模型】
?1、添加事件綁定方式：
?①：IE8之前：btn2.attachEvent("onclick",函數)；
?②：其他瀏覽器:btn2.addEventListener("click",函數,true/false);
?參數三：false(默認) 表示事件冒泡 true 表示事件捕獲
?③：兼容寫法：if(btn2.attachEvent){
?btn2.attachEvent();
?}else{
?btn2.addEventListener();
?}
?2、優點：①可以給同一個節點，添加多個同類型屬性；
?②提供了可以取消事件綁定的函數。
?3、取消DOM2事件綁定：
?注意：如果要取消DOM2的事件綁定，那么在綁定事件時，處理函數必須要使用有名函數，而不能使用匿名函數；
【JS中的事件流】 ?
?1、事件冒泡
?當某DOM元素觸發一種事件時，會從當前節點開始，逐級往上觸發其祖先節點的同類型事件，直到DOM根節點；
?>>>什么情況下會產生事件冒泡？
?①DOM0模型綁定事件，全部都是冒泡；
?②IE8之前，使用attachEvent()綁定的事件，全部是冒泡；
?③其他瀏覽器，使用addEventLinstener()添加事件，當第三個參數省略或者為false時，為事件冒泡；
?2、事件捕獲：當某DOM元素觸發一種事件時，會從文檔根節點開始，逐漸向下觸發其祖先節點的同類型事件，直到
?該節點自身；
?>>>什么情況下會產生事件捕獲？
?①使用addEventLinstener()添加事件，當第三個參數為true時，為事件捕獲；
?↓ DOM根節點 ↑
?↓ ? ? ? ? ? ? ? ?↑
?捕 爺爺節點 冒
?↓ ? ? ? ? ? ? ? ?↑
?獲 父節點 泡
?↓ ? ? ? ? ? ? ? ?↑
?↓ 當前節點 ↑
?3、阻止事件冒泡：
?在IE瀏覽器中，使用e.cancelBubble = true ；
?在其他瀏覽器中，使用e.stopPropagation();
?兼容所有瀏覽器中的寫法：
?function myParagraphEventHandler(e) {
?e = e || window.event;
?if (e.stopPropagation) {
?e.stopPropagation(); //IE以外
?} else {
?e.cancelBubble = true; //IE8之前
?}
? }
?4、取消默認行為：
?在IE瀏覽器中，使用e.returnValue = false；
?在其他瀏覽器中，使用e.preventDefault();
?兼容所有瀏覽器寫法：
?function eventHandler(e) {
e = e || window.event;
// 防止默認行為
if (e.preventDefault) {
e.preventDefault(); //IE以外
} else {
e.returnValue = false; //IE
}
}
四、JS中的內置對象
一、JS中的數組
1、數組的基本概念？
?數組是在內容空間中連續存儲的一組有序數據的集合
? ? 元素在數組中的順序，成為下標。可以使用下標訪問數組的每個元素。
2、如何聲明一個數組：
?①使用字面量聲明：var arr = [];
?在JS中同一數組可以存儲各種數據類型。
?例如：var arr = [1,"jianghao",true,{},null,func];
?②使用new關鍵字聲明：var arr = new Array(參數);
?>>>參數可以是：
?a.參數省略表示創建一個空數組；
?b.參數只放一個整數表示聲明一個length為指定長度的數組，但是這個length可以隨時可變可追加；
?c.參數為逗號分隔的多個數值，表示數組的多個值。
?new array(1,2,3) == [1,2,3]
?3、數組中元素的讀寫/增刪？
?①讀寫：通過下標訪問元素。下標從0開始，arr[1] = "hahaha";
?②增刪：
?a.使用delete關鍵字，刪除數組的某一個值。刪除之后，數組的長度不變，對應的位置變為Undefined。
?eg：delete arr[1]；
?b.arr.pop():刪除數組的最后一個值。相當于arr.length -= 1；
?c.arr.shift():刪除數組的第一個值；
?d.arr.unshift(值):在數組的第0個位置增加一個值；
?4、數組中的其它方法
?①join():將數組用指定分隔符鏈接為字符串。單參數為空時，默認逗號分隔。
?②contact():【原數組不會被改變】 將數組，與兩個或多個數組的值鏈接為新數組；
?concat連接時,如果有二維數組，則至多能拆一層[]
?[1,2].concat([3,4],[5,6])->[1,2,3,4,5,6]
?[1,2].concat([3,4,[5,6]])->[1,2,3,4,[5,6]]
?③push():數組最后增加一個，unshift()數組開頭增加一個。-返回新數組的長度
?pop() 數組最后刪除一個，shift() 數組開頭刪除一個。-返回被刪除的值
【上述方法均會改變原數組】
?④reverse():【原數組被改變】,將數組反轉，倒序輸出；
?⑤slice():【原數組不會被改變】 截取數組中的某一部分，并返回截取的新數組；
?>>>傳入一個參數，表示開始區間，默認將截到數組最后；
?>>>傳入兩個參數，表示開始和結束的下標，左閉右開區間(包含begin，不包含end)
?>>>兩個參數可以為負數，表示從右邊開始數，最后一個值為-1；
?⑥sort()：【原數組被改變】將數組進行排列
?>>>默認情況下，會按照每個元素首字母的ASII值進行排序；
?[3,1,2,15].sort() -> [1,15,2,3];
?>>>可以傳入一個比較函數，手動指定排序的函數算法；
?函數將默認接收兩個值a，b 如果函數返回值>0，則證明a>b.
?arr.sort(function(){
? ? ?return a-b;升序排列
?return b-a;降序排列
?})
?⑦ indexof(value,index):返回數組中第一個value值所在的下標，如果沒有找到返回-1；
?lastIndexof(value,index):返回數組中最后一個value值所在的下標，如果沒有找到返回-1；
?>>>如果沒有制定index，則表示全數組中查找value；
?>>>如果指定了index，則表示從index開始，向后查找value；
?⑧ forEach():專門用于循環遍歷數組。接收一個回調函數，回調函數接收兩個參數，第一個參數為該數組的
?每一項值，第二個參數為下標；
?【IE8之前，不支持此函數】
?⑨ map():數組映射，使用方式與foreash()使用方式相同。不同的是，map可以有返回值，表示將原數組的每個值
?進行操作后，返回給一個新數組。
?5、二維數組和稀疏數組
?① 二維數組：數組中的值，依然是一個數組形式。
?eg： arr = [[1,2,3],[4,5,6]] 相當于兩行三列；
?讀取二維數組：arr：[行號][列號]；
?② 稀疏數組：數組中的索引是不聯系的。(length要比數組中的實際元素個數大)；
?6、基本類型和引用數據類型：
?① 基本數據類型：賦值時，是將原變量中的值，賦值給另一個變量，賦值完成后，兩個變量相互獨立，修改其中
?一個的值，另一個不會變化；
?② 引用數據類型：賦值時，是將原變量在內存中的地址，賦值給另一個變量。賦值完成后，兩個變量中存儲的時同一個
?內存地址，訪問的是同一份數據，其中一個改變另一個也會發生改變；
?③ 數值型、字符串、布爾類型等變量屬于基本數據類型；
?數組，對象屬于應用數據類型
二、JS中的內置對象
Boolean 類?
?也有兩種聲明方式：
?可以使用字面量方式聲明一個單純的變量；用typeof檢測為Boolean類型
?也可以使用new Boolean() 聲明一個Boolean類型的對象。用typeof檢測為Object類型
?.toString:將數值類型轉化為字符串類型
?.toLocaleString：將數值按照本地格式順序轉換為字符串，一般從右邊開始，三個一組加逗號分隔；
?.toFixed(n)：將數字保留n位小數，并轉為字符串格式；
?.toPrecision(n):將數字格式化為指定長度。n表示不含小數點的位數長度。如果n<原數字
?.valueOf():返回Number對象的基本數字值；
?Number類
Number.MAX_VALUE 返回Number類可表示最大值
Number.MIN_VALUE 返回Number類可表示最小值
var num1 = 10
var num2 = new Number(10);
//console.log(typeof num1);
//console.log(Number.MIN_VALUE);
String 類?
1、屬性：str。length ：返回字符串的長度，字符數；
?字符串支持類似于數組下標的訪問方式：str[0]
2、方法：
?.toLowerCase():字符串所有字符轉成小寫；
?.toUpperCase()：字符串所有字符轉成大寫；
?.chaAt(0)
?.indexOf("str",index):從index位置開始，查找子串在在字符中出現的位置，如果沒有返回值-1,
?其它數組的indexOf方法;
?.lastIndexOf:同數組；
?.substring(begin,end)：從字符串中截取子串
?>>>只傳入一個參數，表示從begin開始，到最后；
?>>>傳入兩個參數，表示從begin到end的區間，左閉右開；
?.split("分隔符")：將字符串以指定分隔符分隔，存入數組中。
?傳入空""表示將字符串的每個字符分開放入數組。
?.replace("old","new"):將字符串中的第一個old替換為new。
?>>>第一個參數，可以是普通字符串，也可以是正則表達式；
?>>>如果是普通字符串，則只替換第一個old。如果是正則表達式，則可以根據正則的方法
Date 日期類?
1、new Date():返回當前最新時間；
? new Date("2017,8,23,12:34:56");
?.getFullYear()：獲取4位年份；
?.getMonth()：獲取月份0-11；
?.getDate():獲取一個月中的第幾天 1-31
?.getDay():獲取一周中的第幾天 0-6,0表示周天
三、JS中的自定義對象
【自定義對象】?
1、基本概念：
?① 對象：對象是擁有一系列無屬性和方法的集合。
? ② 鍵值對：對象中的數據是以鍵值對的形式存在。對象的每個屬性和方法都對應著一個鍵名，我們可以以鍵
?取值。
?③ 屬性：描述對象特征的一系列變量，稱為屬性。【對象中的變量】
?④ 方法：描述對象行為的一系列函數，稱為方法。【對象中的函數】
?2、對象的聲明：
? ① 使用字面量聲明： var obj = {
?key1 ：value1,
?key2 ：value2,
?func1：function(){}
?}
?>>> 對象中的數據是以鍵值對的形式存儲，鍵與值之間用：分隔。
?多個鍵值對之間用,分隔。
?>>> 對象中的鍵可以是除了數組和對象以外的任何數據類型，但是一般我們只用普通變量名作為鍵。
?>>> 對象中的值可以是任何數據類型，包括數組和對象。
?② 使用new關鍵字聲明： var obj = new Object();
?obj.key1 = value1;
?3、對象中屬性和方法的讀寫：
?① .運算符：對象名.屬性 對象名.方法();
?② 通過中括號["key"]調用： 對象名.["屬性名"] 對象名.["方法名"]();
?>>>如果鍵中包含特殊字符則只能使用第二種方式給；
?>>>對象中，直接寫變量名，默認為調用全局變量。如果需要調用對象自身的屬性或者方法。需要使用
?對象名.屬性,或者this.屬性。
?person.age this.age 都可以，但推薦使用this關鍵字。
?③ 刪除對象的屬性和方法： delete 對象名屬性名/方法名
?的；delete person.age;
寫在最后：
感謝讀者在繁忙之中欣賞博主菜菜的隨筆，希望讀者能夠對博主提出寶貴的意見，博客定當認真對待！
轉載于:https://www.cnblogs.com/xyq1107/p/7465349.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的一路慢行的JavaScript之旅（add）！！！的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： window环境apache服务器在本地
- 下一篇： Ubuntu 16.04安装Virtua