javascript
JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象
? ?前 ? 言
絮叨絮叨
? ? ? ? ?這里是JS基礎(chǔ)知識集中講解的第三篇，也是最后一篇，三篇JS的基礎(chǔ)，大多是知識的羅列，并沒有涉及更難得東西，干貨滿滿！看完這一篇后，相信許多正在像我一樣正處于初級階段的同學(xué)，經(jīng)過初步的學(xué)習(xí)，會對這一門語言有了一定深入的了解，也會感受到這一門語言的強(qiáng)大之處。希望各位同學(xué)通過一定的學(xué)習(xí)，會得到等大的收獲。
? ? ? ? 因為是最后一篇所以內(nèi)容可能有點多，希望各位同學(xué)能夠慢慢看，細(xì)細(xì)看，讓我們一起學(xué)習(xí)，一起進(jìn)步，一起感受JS的魅力。
?
?
一函數(shù)
?
?
函數(shù)的聲明及調(diào)用?
1、函數(shù)的聲明格式：
?function 函數(shù)名(參數(shù)1,參數(shù)2,……){
//函數(shù)體代碼
?return 返回值;
?}
?函數(shù)的調(diào)用：
①直接調(diào)用：函數(shù)名(參數(shù)1的值，參數(shù)2的值，……);
②事件調(diào)用：在Html標(biāo)簽中，使用事件名="函數(shù)名()"
2、函數(shù)的注意事項:
①函數(shù)名必須要符合小駝峰法則！（首字母小寫，之后的每個單詞首字母大寫）
②函數(shù)名后面的()中可以有參數(shù)，也可以沒有參數(shù)，分別稱為有參函數(shù)和無參函數(shù)；
③聲明函數(shù)時的參數(shù)列表，稱為形參列表，形式參數(shù)。(變量的名字)
調(diào)用函數(shù)時的參數(shù)列表，稱為實參列表，實際參數(shù)。(變量的賦值)
?
function saySth(str,color){document.write("<div style='color:"+color+";'>"+str+"</div>");} saySth("我真帥！","red");④函數(shù)的形參列表個數(shù)與實參列表個數(shù)沒有實際關(guān)聯(lián)關(guān)系。
函數(shù)參數(shù)的個數(shù)，取決于實參列表。
如果實參列表的個數(shù)<形參列表，則未賦值的形參，將為undefined。
⑤函數(shù)可以有返回值，使用return返回結(jié)果（因為return有結(jié)束函數(shù)的作用，所以代碼不能寫到return后面）：
調(diào)用函數(shù)時，可以使用一個變量接受函數(shù)的返回結(jié)果。如果函數(shù)沒有返回值，則接受的結(jié)果為undefined；
function func(){
return "haha";
}
var num = func();
⑥函數(shù)中變量的作用域（JS中只有函數(shù)有自己的作用域）：
在函數(shù)中，使用var聲明的變量，為局部變量，只能在函數(shù)內(nèi)部訪問；
不用var聲明的變量，為全局變量，在函數(shù)外面也能訪問；
函數(shù)的形參列表，默認(rèn)為函數(shù)的局部變量，只能在函數(shù)內(nèi)部使用。
⑦函數(shù)的聲明與函數(shù)的調(diào)用沒有先后之分。即，可以在聲明函數(shù)前，調(diào)用函數(shù)。
?
?
匿名函數(shù)的聲明使用?
1、聲明一個匿名函數(shù)，直接賦值給某一個事件；
window.onload = function(){}?
2、使用匿名函數(shù)表達(dá)式。將匿名函數(shù)賦值給一個變量。
?注意：使用匿名函數(shù)表達(dá)式時，函數(shù)的調(diào)用語句，必須放在函數(shù)聲明語句之后！！！（與普通函數(shù)的區(qū)別）
3、自執(zhí)行函數(shù)
① ！function(){}(); //可以使用多種運(yùn)算符開頭，但一般用感嘆號！
?！function(形參列表){}(實參列表);
② (function(){}()); //使用()將函數(shù)機(jī)函數(shù)后的括號包裹
③ (function(){})(); //使用()值包裹函數(shù)部分；
三種寫法的特點：
① 使用！開頭，結(jié)構(gòu)清晰，不容易混亂，個人推薦使用；
② 能夠表明匿名函數(shù)與調(diào)用的()為一個整體，官方推薦使用；
③ 無法表明函數(shù)與之后的()的整體性，不推薦使用。
?
?
函數(shù)的內(nèi)部屬性?
Arguments對象
①作用：用于儲存調(diào)用函數(shù)時的所有實參，當(dāng)我們調(diào)用函數(shù)并用實參賦值時，實際上參數(shù)列表已經(jīng)保存到Arguments數(shù)組中，
可以在函數(shù)中，使用Arguments[n]的形式調(diào)用。n從0開始
②arguments數(shù)組的個數(shù)，取決于實參；列表，與形參無關(guān)。
但是，一旦第N個位置的形參、實參、argument都存在時，形參將與arguments綁定，同步變化。
(即，在函數(shù)中修改形參的值，arguments也會改變。反之亦成立)
③arguments.callee 是arguments的重要屬性。表示arguments所在函數(shù)的引用地址；
在函數(shù)里面，可以引用arguments.callee()調(diào)用函數(shù)本身。
在函數(shù)內(nèi)部，調(diào)用函數(shù)自身的寫法，叫做遞歸。
遞歸分為兩部分： 遞和歸。以遞歸調(diào)用語句為界限，可以將函數(shù)分為上下兩部分。
遞：當(dāng)函數(shù)執(zhí)行上半部分遇到自身的調(diào)用語句時，繼續(xù)進(jìn)入內(nèi)層函數(shù)，再執(zhí)行上半部分。直到執(zhí)行完最內(nèi)層函數(shù)。
歸：當(dāng)最內(nèi)層函數(shù)執(zhí)行完以后，再從最內(nèi)層函數(shù)開始，逐漸執(zhí)行函數(shù)的下半部分。
當(dāng)最外層函數(shù)執(zhí)行時，遇到自身的調(diào)用語句會進(jìn)入內(nèi)層函數(shù)執(zhí)行，而外層函數(shù)的后半那部分暫不執(zhí)行，直到最內(nèi)層函數(shù)執(zhí)行完以后，在逐步向外執(zhí)行。
?
如圖：
var num = 1; function func(){console.log(num);num++; if(num<=4){
arguments.callee(); //遞歸調(diào)用語句 ↑上部分 遞 ↓下部分 歸
}
num--;
console.log(num);
}
func();
?
?
JS代碼的執(zhí)行順序問題?
?
JS代碼在運(yùn)行時，會分為兩大部分。檢查裝載 和 執(zhí)行階段。
檢查裝載階段：會先檢測代碼的語法錯誤，進(jìn)行變量、函數(shù)的聲明。
執(zhí)行階段：變量的賦值、函數(shù)的調(diào)用等，都屬于執(zhí)行階段。
?
以下面的三段代碼為例：
1、打印num，顯示為Undefined，而不會是10。
console.log(num); //Undefined var num = 10;2、函數(shù)可以正常執(zhí)行。
func1(); //函數(shù)可以正常執(zhí)行 function func1(){}?
3、函數(shù)不能執(zhí)行，打印func2時，顯示Undefined
func2(); //函數(shù)不能執(zhí)行，打印func2時，顯示Undefined var func2 = function(){}?原因：上述代碼的執(zhí)行順序為：
---------------檢查裝載階段----------------
?var num;
??function func1(){}
?var func2;
?---------------代碼執(zhí)行階段----------------
console.log(num);
? ?num = 10;
??func1();
??func2();
?func2 = function(){}
?
?
?
?
二BOM
屏幕對象
console.log(window.screen.width); //屏幕寬度
console.log(window.screen.height); //屏幕高度
console.log(window.screen.availwidth); //可用寬度
console.log(window.screen.availheight); //可用高度=屏幕高度-底部工具欄
location 對象：渠道瀏覽器的URL地址信息
完整的URL路徑：
協(xié)議名：//主機(jī)名（IP地址）：端口號/文件所在路徑？傳遞參數(shù)(name1=value1&name2=value2)#錨點
例如：http//127.0.01:8080/wenjianjia/index.html?name=jredu#top
?console.log(location);
console.log(location.href); //返回當(dāng)前完整路徑
console.log(location.protocol); //返回協(xié)議名
console.log(location.host); //返回主機(jī)名+端口號
console.log(location.hostname); //返回主機(jī)名
console.log(location.port); //返回端口號
console.log(location.pathname); //返回文件路徑
console.log(location.search); //返回？開頭的參數(shù)列表
console.log(location.hash); //返回#開頭的錨點
?
使用JS跳轉(zhuǎn)頁面
window.location = "www.baidu.com";
其他使用location提供的方法跳轉(zhuǎn)頁面的方式
location.assign("www.baidu.com");
location.reliace("www.baidu.com");
function assign(){
//加載新的文檔，加載以后可以回退
location.assign("http://www.baidu.com");
}
?
function replace(){
//使用新文檔替換當(dāng)前文檔，替換以后不能回退
location.replace("http://www.baidu.com");
}
function reload(){
//重新加載當(dāng)前文檔。刷新頁面
//reload()：在本地刷新當(dāng)前頁面，相當(dāng)于F5
//reload()：強(qiáng)制刷新，從服務(wù)器端重新加載頁面，相當(dāng)于ctrl+F5
location.reload();
}
?
?
history 瀏覽歷史
console.log(hostory);
console.log(hostory.length); //瀏覽歷史列表的個數(shù)
function back(){
history.back(); //后退按鈕
}
function forward(){
history.forward(); //前進(jìn)按鈕
}
function go(){
/*跳轉(zhuǎn)到瀏覽歷史的任意一個頁面：0表示當(dāng)前頁面，-1表示后一頁(back)，1表示前一頁(forward)*/
history.go(1);
}
?
?
navigator ?（了解即可）
包含瀏覽器的各種系統(tǒng)信息。
console.log(navigator);
/*檢測瀏覽器安裝的各種插件*/
console.log(navigator.plugins);
?
?
confirm 確認(rèn)對話框
var is = confirm("我?guī)泦?#34;);if(is){alert("你最帥！"); }else{alert("帥上天！"); }效果如圖：
?
?
?
window對象的常用方法>>>在window對象中的所有方法和屬性，均可以省略window關(guān)鍵字
window.alert();-->alert();
1、alert()：彈出一個警告提示框；
2、prompt()：彈窗接受用戶的輸入；
3、confirm():彈出一個帶有“確定”和“取消”按鈕的對話框，點擊按鈕返回true/flase；
4、close()：關(guān)閉當(dāng)前瀏覽器窗口，在個別瀏覽器中，只能關(guān)閉在當(dāng)前腳本新打開的頁面（使用超鏈接、window.open()等方式打開的頁面）
5、open()：打開一個新窗口。
參數(shù)一：新窗口的地址
參數(shù)二：新窗口的名字，并沒有什么卵用
參數(shù)三：新窗口的各種屬性設(shè)置，"屬性1=值1，屬性2=值2，屬性3=值3"
6、setTimeout：設(shè)置延時執(zhí)行，只會執(zhí)行一次；
setInterval：設(shè)置定時器，每隔n毫秒執(zhí)行一次
接受兩個參數(shù)：需要執(zhí)行的function、毫秒數(shù)；
7、clearTimeout：清除延時器
setInterval：設(shè)置定時器，每隔n毫秒執(zhí)行一次
使用方法：設(shè)置延時器或定時器時，可以使用變量接受定時器id；
var id = setInterval;
調(diào)用clearInterval時，將id傳入，即可清除對應(yīng)的定時器；
clearInterval(id);
?
?效果如圖，當(dāng)點擊 設(shè)置延時器按鈕 ?時，會隔3秒彈出一個新窗口：
?
?
?
三DOM
?
?
DOM樹節(jié)點?
?
DOM節(jié)點分為三大類：元素節(jié)點、屬性節(jié)點、文本節(jié)點；
文本節(jié)點、屬性節(jié)點屬于元素節(jié)點的子節(jié)點。操作時，均需要先取到元素節(jié)點，在操作子節(jié)點；
可以使用getElement系列方法，取到元素節(jié)點。
【查看元素節(jié)點】
1、 getElementById：通過id取到唯一節(jié)點。如果id重名，只能取得第一個。
getElementsByName()：通過name屬性
getElementsByTagName()：通過標(biāo)簽名
getElementsByClassName()：通過class名
>>>獲取元素節(jié)點時，一定要注意：獲取節(jié)點的語句，必須在DOM渲染完成之后執(zhí)行?？梢杂袃煞N方式實現(xiàn)：
?、賹S代碼寫在body之后；
②將代碼寫到window.onload函數(shù)之中；
>>>后面三個getElements，取到的是數(shù)組格式，不能直接添加各種屬性，而應(yīng)該去除數(shù)組的每一個單獨(dú)操作。
例如：getElementsByTagName("name1")[0].onclick = function
【查看/設(shè)置屬性節(jié)點】
1、查看屬性節(jié)點：getAttribute（"屬性名"）;
2、設(shè)置屬性節(jié)點：setAttribute（"屬性名","新屬性值"）;
>>>查看和設(shè)置屬性節(jié)點，必須先去到元素節(jié)點，才能使用。
>>>setAttribute(); 函數(shù)在IE瀏覽器中可能會存在兼容性問題。比如在IE中不支持使用這個函數(shù)設(shè)置style/onclick等樣式屬性和事件屬性。
>>>我們推薦使用點符號法替代上述函數(shù)
eg：dom1.style.color="" dom1.οnclick="" dom1.src=""
*
【總結(jié)-JS修改DOM節(jié)點的樣式】
1、使用setAttribute()設(shè)置class和style屬性，但是存在兼容性問題，不提倡
eg：div.setAttribute("class","cls1");
2、使用.className直接設(shè)置class類，注意是className而不是.class
eg：div.className = "cls1";
3、使用.style設(shè)置單個屬性，注意屬性名要使用駝峰命名法：
eg：div.style.backgroundColor = "red";
4、使用.style或.style.cssText 設(shè)置多個樣式屬性
eg：div.style = "background-color: red; color: yellow;"
eg：div.style.cssText = "background-color: red; color: yellow;"? ? 推薦使用√
【查看/設(shè)置文本節(jié)點】
innerText：取到或設(shè)置節(jié)點里面的文字內(nèi)容；
innerHTML：取到或設(shè)置節(jié)點里面的HTML代碼；
tagName：取到當(dāng)前節(jié)點的標(biāo)簽名。標(biāo)簽名全部大寫顯示。
?
【根據(jù)層次獲取節(jié)點】
1、 .childNodes：獲取元素的所有子節(jié)點。包括回車等文本節(jié)點。
.children：獲取當(dāng)前元素的所有元素節(jié)點（只獲取標(biāo)簽）。
2、 .firstChild：獲取元素的第一個子節(jié)點。包括回車等文本節(jié)點。
.firstElementChild：獲取元素的第一個子節(jié)點。不包括回車等文本節(jié)點
? ??.lastChild：獲取元素的最后一個子節(jié)點。包括回車等文本節(jié)點。
.lastElementChild：獲取元素的最后一個子節(jié)點。不包括回車等文本節(jié)點。
3、 .parentNode：獲取當(dāng)前節(jié)點的父節(jié)點。
4、 .previousSibling：獲取當(dāng)前節(jié)點的前一個兄弟節(jié)點，包括回車等文本節(jié)點。
.previousElementSibling：獲取當(dāng)前節(jié)點的前一個兄弟節(jié)點，不包括回車等文本節(jié)點。
5、 .nextSibling：獲取當(dāng)前節(jié)點的后一個兄弟節(jié)點，包括回車等文本節(jié)點。
.nextElementSibling：獲取當(dāng)前節(jié)點的后一個兄弟節(jié)點，不包括回車等文本節(jié)點
6、 .getAttribute：獲取當(dāng)前節(jié)點的屬性節(jié)點
?
【創(chuàng)建并新增節(jié)點】
1、document.creatElement("標(biāo)簽名")：創(chuàng)建節(jié)點。需要配合setAttribute設(shè)置各種新的屬性；
2、父節(jié)點.appendChild(新節(jié)點)：末尾追加方式插入節(jié)點
3、父節(jié)點.insertBefore(新節(jié)點，目標(biāo)節(jié)點)：在目標(biāo)節(jié)點前插入新節(jié)點
4、被克隆節(jié)點.cloneNode(true/false)：克隆節(jié)點
?>>>傳入true：表示克隆當(dāng)前節(jié)點，以及當(dāng)前節(jié)點的所有子節(jié)點
>>>傳入false或不傳：表示只克隆當(dāng)前標(biāo)簽節(jié)點，而不克隆子節(jié)點
【刪除或替換節(jié)點】
1、父節(jié)點.removeChild(被刪除節(jié)點)：刪除父節(jié)點中的子節(jié)點；
2、父節(jié)點.replaceChild(新節(jié)點，老節(jié)點)：使用新節(jié)點，替換掉老節(jié)點。
?
?
?
四事件
?
?
JS中的事件分類?
1、鼠標(biāo)事件
click、bdlclick、onmouseover、onmouseout
2、HTML事件
onload、onscroll、onsubmit、onchange、onfouce
3、鍵盤事件
keydown：鍵盤按下時觸發(fā)
keypress：鍵盤按下并松開的瞬間觸發(fā)
keyup：鍵盤抬起時觸發(fā)
[注意事項]
① 執(zhí)行順序：keydown->keypress->keyup
② 當(dāng)長按時，會循環(huán)執(zhí)行keydown->keypress
③ 有keydown并不一定有keyup，當(dāng)事件觸發(fā)過程中，鼠標(biāo)將光標(biāo)移走，將導(dǎo)致沒有keyup
④ keypress只能捕獲鍵盤上的數(shù)字、字母、符號鍵，不能捕捉各種功能鍵，而keydown和keyup可以。
⑤ keypress支持區(qū)分大小寫，keydown和keyup并不支持。
[確定觸發(fā)的按鍵]
① 再觸發(fā)的函數(shù)中，傳入一個參數(shù)e，表示鍵盤事件；
② 使用e.keyCode，取到按鍵的Asscii碼值，進(jìn)而確定觸發(fā)按鍵
③ 所有瀏覽器的兼容寫法（一般并不需要）
var evn = e || event;
var code = evn.keyCode || evn.witch || evn.charCode;
?
?
JS中的DOM0事件模型?
?
1、內(nèi)斂模型(行內(nèi)綁定)：直接將函數(shù)名作為HTML標(biāo)簽的某個事件屬性的屬性值
eg：<button οnclick="func()">DOM0內(nèi)聯(lián)模型</button>
優(yōu)點：使用方便。
缺點：違反了w3c關(guān)于HTML與javaScript分離的基本原則；
2、腳本模型(動態(tài)綁定)：在JS腳本中，取到某個節(jié)點，并添加事件屬性；
eg：window.onload = function(){}
優(yōu)點：實現(xiàn)了HTML與JavaScript的分離。
缺點：同一個節(jié)點只能綁定一個同類事件。如果綁定多次，最后一個生效。
?
JS中的DOM2事件模型?
1、添加事件綁定方式：
①IE8之前：btn2.attachEvent("onclick",函數(shù));
?、谄渌麨g覽器：btn2.addEventListener("click",函數(shù),true/false);
括號里面的參數(shù)：
參數(shù)一：綁定的事件名稱
參數(shù)二：方法函數(shù)
參數(shù)三：false（默認(rèn)）表示事件冒泡 true 表示事件捕獲
?、奂嫒輰懛?#xff1a;
?
2、優(yōu)點：
①可以給同一節(jié)點添加多個同類型事件；
?、谔峁┝丝梢匀∠录壎ǖ暮瘮?shù)。
3、取消DOM2事件綁定：
注意：如果要取消DOM2的事件綁定，那么在綁定事件時，處理函數(shù)必須要使用有名函數(shù)，而不能使用匿名函數(shù)。
btn2.removeEventListener("click",func2);
btn2.detachEvent("click",func2);
?
?
事件冒泡與事件捕獲?
?
【JS中的事件流】
1、事件冒泡：當(dāng)某DOM元素觸發(fā)一種事件時，會從當(dāng)前節(jié)點開始，主機(jī)往上觸發(fā)其祖先節(jié)點的同類型事件，直到DOM根節(jié)點
>>>什么情況下會產(chǎn)生事件冒泡？
①DOM0模型綁定事件，全部都是冒泡；
?、贗E8之前，使用的attachEvent()綁定的事件，全部都是冒泡
?③其他瀏覽器，使用addEventlistner()添加事件，當(dāng)?shù)谌齻€參數(shù)省略或者為false時，為事件冒泡；
2、事件捕獲：當(dāng)某DOM元素觸發(fā)一種事件時，會從文檔根節(jié)點開始，主機(jī)向下觸發(fā)其祖先節(jié)點的同類型事件，直到該節(jié)點自身；
? >>>什么情況下會產(chǎn)生事件捕獲？
①使用addEventlistner()添加事件，當(dāng)?shù)谌齻€參數(shù)為true時，為事件捕獲；
3、阻止事件冒泡：
在IE瀏覽器中，使用：e.cancelBubble = true;
在其他瀏覽器中，使用：e.stopPropagation();
兼容所有瀏覽器的寫法：
4、取消事件默認(rèn)行為：
在IE瀏覽器中，使用：e.returnValue = false;
在其他瀏覽器中，使用：e.preventDefault();
兼容所有瀏覽器的寫法：
?
?
?
五JS中的內(nèi)置對象
?
?
數(shù)組?
?
1、數(shù)組的基本概念？
數(shù)組是在內(nèi)存空間中連續(xù)存儲的一組有序數(shù)據(jù)的集合。
元素在數(shù)組中的順序，稱為下標(biāo)?？梢允褂孟聵?biāo)訪問數(shù)組的每個元素。
2、如何聲明一個數(shù)組？
?、偈褂米置媪柯暶? var arr = [];
在JS中，同一數(shù)組可以存儲各種數(shù)據(jù)類型。
例如: var arr = [1,"wuhao",true,{},null,func]
②使用new關(guān)鍵字聲明：var arr = new Array(參數(shù));
>>>參數(shù)可以是:
a.參數(shù)省略，表示創(chuàng)建一個空數(shù)組;
b.參數(shù)為一個整數(shù)，表示聲明一個length為指定長度的數(shù)組。但是這個length可以隨時可變可追加。
c.參數(shù)為逗號分隔的多個數(shù)值，表示數(shù)組的多個值。
new array(1,2,3) == [1,2,3]
?
3、數(shù)組中元素的讀寫/增刪？
?、僮x寫：通過下標(biāo)訪問元素。下標(biāo)從0開始 arr[1] = "haha";
?、谠鰟h：
a.使用delete關(guān)鍵字，刪除數(shù)組的某一個值。刪除后，數(shù)組的長度不變，對應(yīng)的位置變?yōu)閁ndefined。
eg：delete arr[1];
b.arr.pop()：刪除數(shù)組的最后一個值。相當(dāng)于arr.length -= 1;
c.arr.shift()：刪除數(shù)組的第一個值。
d.arr.unshift(值)：在數(shù)組的第0個位置新增一個值；
e.arr.push(值)：在數(shù)組的最后一個位置新增一個值；
f.直接訪問數(shù)組沒達(dá)到的下標(biāo)，可以動態(tài)追加。
eg：arr[8]="嘿嘿"; arr[100]=1; ? ? ?中間如果有空余下標(biāo)，將存入Undefined
4、數(shù)組中的其他方法
?、賘oin():將數(shù)組用指定分隔符鏈接為字符串。當(dāng)參數(shù)為空時，默認(rèn)用逗號分隔。
效果：
?
?、赾oncat():[原數(shù)組不會被改變] 將數(shù)組，與兩個或多個數(shù)組的值鏈接為一個新數(shù)組。
??concat連接時，如果有二維數(shù)組，則至多能拆一層[]
eg: [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]]
?
var arr = [1,2,3,4,5,6,7,8]; var arr1 = ["haha","heihei","hehe"]; var arr2 = arr.concat(arr1); var arr3 = arr.concat([1,2,[3,4]]);console.log(arr3);?
?
效果：
?
?
③push():在數(shù)組最后增加一個，unshift():數(shù)組開頭增加一個。 -->返回新數(shù)組的長度;
pop()：在數(shù)組最后刪除一個，shift():數(shù)組開頭刪除一個。 -->返回被刪除的值;
? [上述方法，均會改變原數(shù)組]
?
效果：
?
?、躵everse():[原數(shù)組被改變]將數(shù)組翻轉(zhuǎn)，倒敘輸出。
?
?
?
⑤slice(begin，end):[原數(shù)組不會被改變]截取數(shù)組中的某一部分，并返回截取的新數(shù)組。
>>>傳入一個參數(shù)，表示開始區(qū)間，默認(rèn)將截到數(shù)組最后;
>>>傳入兩個參數(shù)，表示開始和結(jié)束的下標(biāo)，左閉右開區(qū)間(包含begin，不包含end);
>>>兩個參數(shù)可以為負(fù)數(shù)，表示從右邊開始數(shù)，最后一個值為-1;
?
?、辳ort():[原數(shù)組被改變]將數(shù)組進(jìn)行升序排列;
>>>默認(rèn)情況下，會按照每個元素首字母的ASCII值進(jìn)行排序;
eg:[1,5,13,12,7,6,4,8].sort() -->[1,12,13,4,5,6,7,8];
>>>可以傳入一個比較函數(shù)，手動指定排序的函數(shù)算法;
函數(shù)將默認(rèn)接收兩個值a，b，如果函數(shù)返回值>0，則證明a>b，如果函數(shù)返回值<0，則證明a<b
arr.sort(function(a,b){
return a-b; //升序排列;
return b-a; //降序排列;
});
?
?、遡ndexOf(value，index):返回數(shù)組中第一個value值所在的下標(biāo)，如果沒有找到則返回-1;
??lastIndexOf(value，index):返回數(shù)組中最后一個value值所在的下標(biāo)，如果沒有找到則返回-1;
>>>如果沒有指定index，則表示全數(shù)組查找value；
>>>如果指定了index，則表示從index開始，向后查找value；
?
例：返回的是7
var arr = [1,5,6,3,4,2,7,6,4,8]; var index = arr.indexOf(6,4); console.log(index);?
⑧forEach():專門用于循環(huán)遍歷數(shù)組。接收一個回調(diào)函數(shù)，回調(diào)函數(shù)接收兩個參數(shù)，第一個參數(shù)為數(shù)組的每一項的值，第二個參數(shù)為下標(biāo)
(IE8之前，不支持此函數(shù)！！！！！)
?
?
?、醡ap():數(shù)組映射，使用方式與forEach()相同。不同的是，map可以有return返回值，表示將原數(shù)組的每個值進(jìn)行操作后，返回給一個新數(shù)組。
(IE8之前，不支持此函數(shù)！！！！！)
console.log(arr1);
?
5、二維數(shù)組與稀疏數(shù)組(了解)
?、俣S數(shù)組:數(shù)組中的值，依然是一個數(shù)組形式。
eg：arr=[[1,2,3],[4,5,6]]; //相當(dāng)于兩行三列
讀取二維數(shù)組：arr[行號][列號];
?
var arr2 = [[1,2],[3,4,5],[6,7]]; for(var i=0;i<arr2.length;i++){for(var j=0;j<arr2[i].length;j++){console.log(arr2[i][j]);} }?
?
?
?
?、谙∈钄?shù)組:數(shù)組中的索引是不連續(xù)的。(length要比數(shù)組中實際的元素個數(shù)大)
6、基本數(shù)據(jù)類型和引用數(shù)據(jù)類型：
?、倩緮?shù)據(jù)類型：賦值時，是將原變量中的值，賦值給另一個變量，復(fù)制完成后，兩個變量相互獨(dú)立，修改其中一個的值，另一個不會變化。
?、谝脭?shù)據(jù)類型：賦值時，是將原變量在內(nèi)存中的地址，賦值給另一個變量。賦值完成后，兩個變量中存儲的是同一個內(nèi)存地址，訪問的是同一份數(shù)據(jù)，
其中一個改變另一個也會發(fā)生變化。
③ 數(shù)值型、字符串、布爾型等變量屬于基本數(shù)據(jù)類型;
數(shù)組，對象屬于引用數(shù)據(jù)類型;
?
?
內(nèi)置對象?
1、Boolean 類
有兩種聲明方式：
可以使用字面量方式聲明一個單純的變量；用typeOf檢測為Boolean類型
也可以使用new Boolean()聲明一個Boolean類型的對象。用typeOf檢測為Object類型
?
2、Number類
Number.MAX_VALUE 返回Number類最大值
?Number.MIN_VALUE 返回Number類最小值
?.toString() 將數(shù)值類型轉(zhuǎn)換為字符串類型
?.toLocaleString() 將數(shù)值按照本地格式順序轉(zhuǎn)換為字符串，一般從右開始，三個一組加逗號分隔；
.toFixed(n) 將數(shù)字保留n位小數(shù)，并轉(zhuǎn)為字符串格式；
.toPrecision(n) 將數(shù)字格式化為指定長度。n表示不含小數(shù)點的位數(shù)長度，如果n小于原數(shù)字長度，則用科學(xué)計數(shù)法表示。如果n大于原數(shù)字長度，則小數(shù)點后補(bǔ)0
.valueOf() 返回Number對象的基本數(shù)字值；
?
3、String 類
?、?、屬性：str.length 返回字符串的長度，也就是 字符數(shù)
字符串支持類似數(shù)組的下標(biāo)訪問方式：str[0];
?、?、 方法：
.toLowerCase()：將字符串所有字符轉(zhuǎn)成小寫
.toUpperCase()：將字符串所有字符轉(zhuǎn)成大寫
.charAt(n)：截取數(shù)組的第n個字符，相當(dāng)于str[n]
?.indexOf("str",index)：從index位置開始，查找子串在字符串中出現(xiàn)的位置，如果沒有找到返回-1；其他同數(shù)組的indexOf方法；
.lastindexOf()：同數(shù)組
.substring(begin,end)：從字符串中截取子串
>>>只傳入一個參數(shù)，表示從begin開始，到最后
>>>傳入兩個參數(shù)，表示從begin到end的區(qū)間，左閉右開
??.split("分隔符")：將字符串以指定分隔符分隔，存入數(shù)組中。傳入空""表示將字符串的每個字符分開放入數(shù)組
?.replace("old","new")：將字符串中的第一個old替換為new。
?>>>第一個參數(shù)，可以是普通字符串，也可以是正則表達(dá)式；var str1 = str.replace("i","*");
>>>如果是普通字符串，則只替換第一個old。如果是正則表達(dá)式，則可以根據(jù)正則的寫法要求，進(jìn)行替換。var str1 = str.replace(/s/g,"*");
?
4、date 日期類
①、new Date()：返回當(dāng)前最新時間
new Date("2017,8,31,12:34:56");返回指定時間
②、常用方法：
.getFullYear()：獲取4位年份
.getMonth()：獲取月份 0-11
.getDate()：獲取一個月中的第幾天 1-31
.getDay()：獲取一周中的第幾天 0-6，0表示周天
.getHours()：獲取小時
.getMinutes()：獲取分鐘
.getSeconds()：獲取秒function getTime(){
function getTime(){
var dates = new Date();var year = dates.getFullYear(); var month = dates.getMonth();var date1 = dates.getDate();var day = dates.getDay();
var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六",]
var hours = dates.getHours()<10?"0"+dates.getHours():dates.getHours();
var minutes = dates.getMinutes()<10?"0"+dates.getMinutes():dates.getMinutes();
var seconds = dates.getSeconds()<10?"0"+dates.getSeconds():dates.getSeconds();
?var div1 = document.getElementById("div1");
div1.innerText = year+"年"+(month+1)+"月"+date1+"日"+weeks[day]+hours+":"+minutes+":"+seconds;
setTimeout(arguments.callee,1000);
}
?
?
?
?
自定義對象?
1、基本概念：
?、賹ο?#xff1a;擁有一系列無序?qū)傩院头椒ǖ募稀?br /> ?、阪I值對：對象中的數(shù)據(jù)是以鍵值對的形式存在。對象的每個屬性和方法，都對應(yīng)著一個鍵名，以鍵取值。
?、蹖傩?#xff1a;描述對象特征的一系列變量，稱為屬性?！緦ο笾械淖兞俊?br /> ?④方法：描述對象行為的一系列函數(shù)，稱為方法?！緦ο笾械暮瘮?shù)】
2、對象的聲明：
①使用字面量聲明：
var obj = {
key1 : value1,
key2 : value2,
func1 : function(){}
}
>>>對象中的數(shù)據(jù)是以鍵值對形式存儲，鍵與值之間用:分隔。多個鍵值對之間用,分隔。
>>>對象中的鍵可以是除了數(shù)組/對象以外的任何數(shù)據(jù)類型。但是一般我們只用普通變量名作為鍵。
>>>對象中的值可以是任何數(shù)據(jù)類型，包括數(shù)組和對象。
?、谑褂胣ew關(guān)鍵字聲明：
var obj = new object(){
obj.key1 = value1;
obj.func1 = function(){}
}
3、對象中屬性和方法的讀寫：
①.運(yùn)算符：對象名.屬性 對象名.方法();
對象外部：this.屬性 this.方法
內(nèi)部對象：對象名.屬性 對象名.方法();
?、谕ㄟ^["key"]調(diào)用：對象名.["屬性名"] 對象名.["方法名"]();
>>>如果鍵中包含特殊字符，則只能使用第②種方式；
>>>對象中，直接寫變量名，默認(rèn)為調(diào)用全局變量。如果需要調(diào)用對象滋生的屬性或者方法，需要使用對象名.屬性名， 或者this.屬性。
person.age this.age 都可以，但推薦使用this關(guān)鍵字
?③刪除對象的屬性和方法：delete 對象名.屬性名/方法名
delete person.age;
?
var person = {name : "張三",age : 14,say : function (){alert("我叫"+this.name+"，今年"+person.age+"歲了！");} }console.log(person.name); console.log(person.age); person.say();?效果：
?
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/realsdg/p/7536438.html
總結(jié)
以上是生活随笔為你收集整理的JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： noip模拟赛 不等数列
- 下一篇： JSONObject 和 GSON 解析