JS基礎--函數與BOM、DOM操作、JS中的事件以及內置對象
前 言
絮叨絮叨
這裏是JS基礎知識集中講解的第三篇，也是最後一篇，三篇JS的基礎，大多是知識的羅列，並沒有涉及更難得東西，幹貨滿滿！看完這一篇後，相信許多正在像我一樣正處於初級階段的同學，經過初步的學習，會對這一門語言有了一定深入的了解，也會感受到這一門語言的強大之處。希望各位同學通過一定的學習，會得到等大的收獲。
因為是最後一篇所以內容可能有點多，希望各位同學能夠慢慢看，細細看，讓我們一起學習，一起進步，一起感受JS的魅力。
一函數
函數的聲明及調用
1、函數的聲明格式：
function 函數名(參數1,參數2,……){
//函數體代碼
return 返回值;
}
函數的調用
①直接調用：函數名(參數1的值，參數2的值，……);
②事件調用：在Html標簽中，使用事件名="函數名()"
<button onclick="saySth(‘hahaha‘,‘yellow‘)">點擊按鈕，打印內容</button>
2、函數的註意事項:
①函數名必須要符合小駝峰法則！（首字母小寫，之後的每個單詞首字母大寫）
②函數名後面的()中可以有參數，也可以沒有參數，分別稱為有參函數和無參函數；
③聲明函數時的參數列表，稱為形參列表，形式參數。(變量的名字)
調用函數時的參數列表，稱為實參列表，實際參數。(變量的賦值)
function saySth(str,color){ document.write("<div style=‘color:"+color+";‘>"+str+"</div>"); } saySth("我真帥！","red");
④函數的形參列表個數與實參列表個數沒有實際關聯關系。
函數參數的個數，取決於實參列表。
如果實參列表的個數<形參列表，則未賦值的形參，將為undefined。
⑤函數可以有返回值，使用return返回結果（因為return有結束函數的作用，所以代碼不能寫到return後面）：
調用函數時，可以使用一個變量接受函數的返回結果。如果函數沒有返回值，則接受的結果為undefined；
function func(){
return "haha";
}
var num = func();
⑥函數中變量的作用域（JS中只有函數有自己的作用域）：
在函數中，使用var聲明的變量，為局部變量，只能在函數內部訪問；
不用var聲明的變量，為全局變量，在函數外面也能訪問；
函數的形參列表，默認為函數的局部變量，只能在函數內部使用。
⑦函數的聲明與函數的調用沒有先後之分。即，可以在聲明函數前，調用函數。
func(); //聲明func之前調用也是可以的。
function func(){}
匿名函數的聲明使用
1、聲明一個匿名函數，直接賦值給某一個事件；
window.onload = function(){}
2、使用匿名函數表達式。將匿名函數賦值給一個變量。
var func = function(){} //聲明
func(); //調用
註意：使用匿名函數表達式時，函數的調用語句，必須放在函數聲明語句之後！！！（與普通函數的區別）
3、自執行函數
① ！function(){}(); //可以使用多種運算符開頭，但一般用感嘆號！
！function(形參列表){}(實參列表);
② (function(){}()); //使用()將函數機函數後的括號包裹
③ (function(){})(); //使用()值包裹函數部分；
三種寫法的特點：
① 使用！開頭，結構清晰，不容易混亂，個人推薦使用；
② 能夠表明匿名函數與調用的()為一個整體，官方推薦使用；
③ 無法表明函數與之後的()的整體性，不推薦使用。
函數的內部屬性
Arguments對象
①作用：用於儲存調用函數時的所有實參，當我們調用函數並用實參賦值時，實際上參數列表已經保存到Arguments數組中，
可以在函數中，使用Arguments[n]的形式調用。n從0開始
②arguments數組的個數，取決於實參；列表，與形參無關。
但是，一旦第N個位置的形參、實參、argument都存在時，形參將與arguments綁定，同步變化。
(即，在函數中修改形參的值，arguments也會改變。反之亦成立)
③arguments.callee 是arguments的重要屬性。表示arguments所在函數的引用地址；
在函數裏面，可以引用arguments.callee()調用函數本身。
在函數內部，調用函數自身的寫法，叫做遞歸。
遞歸分為兩部分： 遞和歸。以遞歸調用語句為界限，可以將函數分為上下兩部分。
遞：當函數執行上半部分遇到自身的調用語句時，繼續進入內層函數，再執行上半部分。直到執行完最內層函數。
歸：當最內層函數執行完以後，再從最內層函數開始，逐漸執行函數的下半部分。
當最外層函數執行時，遇到自身的調用語句會進入內層函數執行，而外層函數的後半那部分暫不執行，直到最內層函數執行完以後，在逐步向外執行。
如圖：
var num = 1;
function func(){
console.log(num);
num++;
if(num<=4){
arguments.callee(); //遞歸調用語句 ↑上部分 遞 ↓下部分 歸
}
num--;
console.log(num);
}
func();
JS代碼的執行順序問題
JS代碼在運行時，會分為兩大部分。檢查裝載 和 執行階段。
檢查裝載階段：會先檢測代碼的語法錯誤，進行變量、函數的聲明。
執行階段：變量的賦值、函數的調用等，都屬於執行階段。
以下面的三段代碼為例：
1、打印num，顯示為Undefined，而不會是10。
console.log(num); //Undefined
var num = 10;
2、函數可以正常執行。
func1(); //函數可以正常執行
function func1(){}
3、函數不能執行，打印func2時，顯示Undefined
func2(); //函數不能執行，打印func2時，顯示Undefined
var func2 = function(){}
原因：上述代碼的執行順序為：
---------------檢查裝載階段----------------
var num;
function func1(){}
var func2;
---------------代碼執行階段----------------
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路徑：
協議名：//主機名（IP地址）：端口號/文件所在路徑？傳遞參數(name1=value1&name2=value2)#錨點
例如：http//127.0.01:8080/wenjianjia/index.html?name=jredu#top
console.log(location);
console.log(location.href); //返回當前完整路徑
console.log(location.protocol); //返回協議名
console.log(location.host); //返回主機名+端口號
console.log(location.hostname); //返回主機名
console.log(location.port); //返回端口號
console.log(location.pathname); //返回文件路徑
console.log(location.search); //返回？開頭的參數列表
console.log(location.hash); //返回#開頭的錨點
使用JS跳轉頁面
window.location = "www.baidu.com";
其他使用location提供的方法跳轉頁面的方式
location.assign("www.baidu.com");
location.reliace("www.baidu.com");
function assign(){
//加載新的文檔，加載以後可以回退
location.assign("http://www.baidu.com");
}
function replace(){
//使用新文檔替換當前文檔，替換以後不能回退
location.replace("http://www.baidu.com");
}
function reload(){
//重新加載當前文檔。刷新頁面
//reload()：在本地刷新當前頁面，相當於F5
//reload()：強制刷新，從服務器端重新加載頁面，相當於ctrl+F5
location.reload();
}
history 瀏覽歷史
console.log(hostory);
console.log(hostory.length); //瀏覽歷史列表的個數
function back(){
history.back(); //後退按鈕
}
function forward(){
history.forward(); //前進按鈕
}
function go(){
/*跳轉到瀏覽歷史的任意一個頁面：0表示當前頁面，-1表示後一頁(back)，1表示前一頁(forward)*/
history.go(1);
}
navigator （了解即可）
包含瀏覽器的各種系統信息。
console.log(navigator);
/*檢測瀏覽器安裝的各種插件*/
console.log(navigator.plugins);
confirm 確認對話框
var is = confirm("我帥嗎");
if(is){
alert("你最帥！");
}else{
alert("帥上天！");
}
效果如圖：
window對象的常用方法
>>>在window對象中的所有方法和屬性，均可以省略window關鍵字
window.alert();-->alert();
1、alert()：彈出一個警告提示框；
2、prompt()：彈窗接受用戶的輸入；
3、confirm():彈出一個帶有“確定”和“取消”按鈕的對話框，點擊按鈕返回true/flase；
4、close()：關閉當前瀏覽器窗口，在個別瀏覽器中，只能關閉在當前腳本新打開的頁面（使用超鏈接、window.open()等方式打開的頁面）
5、open()：打開一個新窗口。
參數一：新窗口的地址
參數二：新窗口的名字，並沒有什麽卵用
參數三：新窗口的各種屬性設置，"屬性1=值1，屬性2=值2，屬性3=值3"
6、setTimeout：設置延時執行，只會執行一次；
setInterval：設置定時器，每隔n毫秒執行一次
接受兩個參數：需要執行的function、毫秒數；
7、clearTimeout：清除延時器
setInterval：設置定時器，每隔n毫秒執行一次
使用方法：設置延時器或定時器時，可以使用變量接受定時器id；
var id = setInterval;
調用clearInterval時，將id傳入，即可清除對應的定時器；
clearInterval(id);
function closewindow(){
close();
}
function openwindow(){
window.open("http://www.baidu.com","baidu","width=600px,height=600px,left=200px,top=200px");
}
var timeoutId = 0;
function setTimeout1(){
setTimeout(function(){
console.log("延時器成功執行！");
},3000);
timeoutId = setTimeout(openwindow,3000);
}
function clearTimeout1(){
clearTimeout();
}
效果如圖，當點擊 設置延時器按鈕 時，會隔3秒彈出一個新窗口：
三DOM
DOM樹節點
DOM節點分為三大類：元素節點、屬性節點、文本節點；
文本節點、屬性節點屬於元素節點的子節點。操作時，均需要先取到元素節點，在操作子節點；
可以使用getElement系列方法，取到元素節點。
【查看元素節點】
1、 getElementById：通過id取到唯一節點。如果id重名，只能取得第一個。
getElementsByName()：通過name屬性
getElementsByTagName()：通過標簽名
getElementsByClassName()：通過class名
>>>獲取元素節點時，一定要註意：獲取節點的語句，必須在DOM渲染完成之後執行。可以有兩種方式實現：
①將JS代碼寫在body之後；
②將代碼寫到window.onload函數之中；
>>>後面三個getElements，取到的是數組格式，不能直接添加各種屬性，而應該去除數組的每一個單獨操作。
例如：getElementsByTagName("name1")[0].onclick = function
【查看/設置屬性節點】
1、查看屬性節點：getAttribute（"屬性名"）;
2、設置屬性節點：setAttribute（"屬性名","新屬性值"）;
>>>查看和設置屬性節點，必須先去到元素節點，才能使用。
>>>setAttribute(); 函數在IE瀏覽器中可能會存在兼容性問題。比如在IE中不支持使用這個函數設置style/onclick等樣式屬性和事件屬性。
>>>我們推薦使用點符號法替代上述函數
eg：dom1.style.color="" dom1.onclick="" dom1.src=""
*
【總結-JS修改DOM節點的樣式】
1、使用setAttribute()設置class和style屬性，但是存在兼容性問題，不提倡
eg：div.setAttribute("class","cls1");
2、使用.className直接設置class類，註意是className而不是.class
eg：div.className = "cls1";
3、使用.style設置單個屬性，註意屬性名要使用駝峰命名法：
eg：div.style.backgroundColor = "red";
4、使用.style或.style.cssText 設置多個樣式屬性
eg：div.style = "background-color: red; color: yellow;"
eg：div.style.cssText = "background-color: red; color: yellow;" 推薦使用√
【查看/設置文本節點】
innerText：取到或設置節點裏面的文字內容；
innerHTML：取到或設置節點裏面的HTML代碼；
tagName：取到當前節點的標簽名。標簽名全部大寫顯示。
【根據層次獲取節點】
1、 .childNodes：獲取元素的所有子節點。包括回車等文本節點。
.children：獲取當前元素的所有元素節點（只獲取標簽）。
2、 .firstChild：獲取元素的第一個子節點。包括回車等文本節點。
.firstElementChild：獲取元素的第一個子節點。不包括回車等文本節點
.lastChild：獲取元素的最後一個子節點。包括回車等文本節點。
.lastElementChild：獲取元素的最後一個子節點。不包括回車等文本節點。
3、 .parentNode：獲取當前節點的父節點。
4、 .previousSibling：獲取當前節點的前一個兄弟節點，包括回車等文本節點。
.previousElementSibling：獲取當前節點的前一個兄弟節點，不包括回車等文本節點。
5、 .nextSibling：獲取當前節點的後一個兄弟節點，包括回車等文本節點。
.nextElementSibling：獲取當前節點的後一個兄弟節點，不包括回車等文本節點
6、 .getAttribute：獲取當前節點的屬性節點
【創建並新增節點】
1、document.creatElement("標簽名")：創建節點。需要配合setAttribute設置各種新的屬性；
2、父節點.appendChild(新節點)：末尾追加方式插入節點
3、父節點.insertBefore(新節點，目標節點)：在目標節點前插入新節點
4、被克隆節點.cloneNode(true/false)：克隆節點
>>>傳入true：表示克隆當前節點，以及當前節點的所有子節點
>>>傳入false或不傳：表示只克隆當前標簽節點，而不克隆子節點
【刪除或替換節點】
1、父節點.removeChild(被刪除節點)：刪除父節點中的子節點；
2、父節點.replaceChild(新節點，老節點)：使用新節點，替換掉老節點。
四事件
JS中的事件分類
1、鼠標事件
click、bdlclick、onmouseover、onmouseout
2、HTML事件
onload、onscroll、onsubmit、onchange、onfouce
3、鍵盤事件
keydown：鍵盤按下時觸發
keypress：鍵盤按下並松開的瞬間觸發
keyup：鍵盤擡起時觸發
[註意事項]
① 執行順序：keydown->keypress->keyup
② 當長按時，會循環執行keydown->keypress
③ 有keydown並不一定有keyup，當事件觸發過程中，鼠標將光標移走，將導致沒有keyup
④ keypress只能捕獲鍵盤上的數字、字母、符號鍵，不能捕捉各種功能鍵，而keydown和keyup可以。
⑤ keypress支持區分大小寫，keydown和keyup並不支持。
[確定觸發的按鍵]
① 再觸發的函數中，傳入一個參數e，表示鍵盤事件；
② 使用e.keyCode，取到按鍵的Asscii碼值，進而確定觸發按鍵
③ 所有瀏覽器的兼容寫法（一般並不需要）
var evn = e || event;
var code = evn.keyCode || evn.witch || evn.charCode;
JS中的DOM0事件模型
1、內斂模型(行內綁定)：直接將函數名作為HTML標簽的某個事件屬性的屬性值
eg：<button onclick="func()">DOM0內聯模型</button>
優點：使用方便。
缺點：違反了w3c關於HTML與javaScript分離的基本原則；
2、腳本模型(動態綁定)：在JS腳本中，取到某個節點，並添加事件屬性；
eg：window.onload = function(){}
優點：實現了HTML與JavaScript的分離。
缺點：同一個節點只能綁定一個同類事件。如果綁定多次，最後一個生效。
JS中的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的事件綁定，那麽在綁定事件時，處理函數必須要使用有名函數，而不能使用匿名函數。
btn2.removeEventListener("click",func2);
btn2.detachEvent("click",func2);
事件冒泡與事件捕獲
【JS中的事件流】
1、事件冒泡：當某DOM元素觸發一種事件時，會從當前節點開始，主機往上觸發其祖先節點的同類型事件，直到DOM根節點
>>>什麽情況下會產生事件冒泡？
①DOM0模型綁定事件，全部都是冒泡；
②IE8之前，使用的attachEvent()綁定的事件，全部都是冒泡
③其他瀏覽器，使用addEventlistner()添加事件，當第三個參數省略或者為false時，為事件冒泡；
2、事件捕獲：當某DOM元素觸發一種事件時，會從文檔根節點開始，主機向下觸發其祖先節點的同類型事件，直到該節點自身；
>>>什麽情況下會產生事件捕獲？
①使用addEventlistner()添加事件，當第三個參數為true時，為事件捕獲；
3、阻止事件冒泡：
在IE瀏覽器中，使用：e.cancelBubble = true;
在其他瀏覽器中，使用：e.stopPropagation();
兼容所有瀏覽器的寫法：
function myParagraphEventHandler(e) {
e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation(); //IE以外
} else {
e.cancelBubble = true; //IE
}
}
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中的內置對象
數組
1、數組的基本概念？
數組是在內存空間中連續存儲的一組有序數據的集合。
元素在數組中的順序，稱為下標。可以使用下標訪問數組的每個元素。
2、如何聲明一個數組？
①使用字面量聲明: var arr = [];
在JS中，同一數組可以存儲各種數據類型。
例如: var arr = [1,"wuhao",true,{},null,func]
②使用new關鍵字聲明：var arr = new Array(參數);
>>>參數可以是:
a.參數省略，表示創建一個空數組;
b.參數為一個整數，表示聲明一個length為指定長度的數組。但是這個length可以隨時可變可追加。
c.參數為逗號分隔的多個數值，表示數組的多個值。
new array(1,2,3) == [1,2,3]
var arr = [1,"wuhao",true,{},null,func];
console.log(arr);
3、數組中元素的讀寫/增刪？
①讀寫：通過下標訪問元素。下標從0開始 arr[1] = "haha";
②增刪：
a.使用delete關鍵字，刪除數組的某一個值。刪除後，數組的長度不變，對應的位置變為Undefined。
eg：delete arr[1];
b.arr.pop()：刪除數組的最後一個值。相當於arr.length -= 1;
c.arr.shift()：刪除數組的第一個值。
d.arr.unshift(值)：在數組的第0個位置新增一個值；
e.arr.push(值)：在數組的最後一個位置新增一個值；
f.直接訪問數組沒達到的下標，可以動態追加。
eg：arr[8]="嘿嘿"; arr[100]=1; 中間如果有空余下標，將存入Undefined
4、數組中的其他方法
①join():將數組用指定分隔符鏈接為字符串。當參數為空時，默認用逗號分隔。
var arr = [1,2,3,4,5,6,7,8];
var str = arr.join("-");
console.log(str)
效果：
②concat():[原數組不會被改變] 將數組，與兩個或多個數組的值鏈接為一個新數組。
concat連接時，如果有二維數組，則至多能拆一層[]
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():在數組最後增加一個，unshift():數組開頭增加一個。 -->返回新數組的長度;
pop()：在數組最後刪除一個，shift():數組開頭刪除一個。 -->返回被刪除的值;
[上述方法，均會改變原數組]
var arr = [1,2,3,4,5,6];
arr.pop(6);
arr.push(7);
console.log(arr);
效果：
④reverse():[原數組被改變]將數組翻轉，倒敘輸出。
var arr = [1,2,3,4,5,6,7,8];
arr.reverse();
console.log(arr);
⑤slice(begin，end):[原數組不會被改變]截取數組中的某一部分，並返回截取的新數組。
>>>傳入一個參數，表示開始區間，默認將截到數組最後;
>>>傳入兩個參數，表示開始和結束的下標，左閉右開區間(包含begin，不包含end);
>>>兩個參數可以為負數，表示從右邊開始數，最後一個值為-1;
var arr = [1,2,3,4,5,6,7,8];
var arr1 = arr.slice(3,7);
console.log(arr1);
⑥sort():[原數組被改變]將數組進行升序排列;
>>>默認情況下，會按照每個元素首字母的ASCII值進行排序;
eg:[1,5,13,12,7,6,4,8].sort() -->[1,12,13,4,5,6,7,8];
>>>可以傳入一個比較函數，手動指定排序的函數算法;
函數將默認接收兩個值a，b，如果函數返回值>0，則證明a>b，如果函數返回值<0，則證明a<b
arr.sort(function(a,b){
return a-b; //升序排列;
return b-a; //降序排列;
});
⑦indexOf(value，index):返回數組中第一個value值所在的下標，如果沒有找到則返回-1;
lastIndexOf(value，index):返回數組中最後一個value值所在的下標，如果沒有找到則返回-1;
>>>如果沒有指定index，則表示全數組查找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():專門用於循環遍歷數組。接收一個回調函數，回調函數接收兩個參數，第一個參數為數組的每一項的值，第二個參數為下標
(IE8之前，不支持此函數！！！！！)
var arr = [1,5,6,3,4,2,7,6,4,8];
arr.forEach(function(item,index){
console.log(item);
})
⑨map():數組映射，使用方式與forEach()相同。不同的是，map可以有return返回值，表示將原數組的每個值進行操作後，返回給一個新數組。
(IE8之前，不支持此函數！！！！！)
var arr1 = arr.map(function(item,index){
console.log(item);
return item+2;
});
console.log(arr1);
5、二維數組與稀疏數組(了解)
①二維數組:數組中的值，依然是一個數組形式。
eg：arr=[[1,2,3],[4,5,6]]; //相當於兩行三列
讀取二維數組：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]); } }
②稀疏數組:數組中的索引是不連續的。(length要比數組中實際的元素個數大)
6、基本數據類型和引用數據類型：
①基本數據類型：賦值時，是將原變量中的值，賦值給另一個變量，復制完成後，兩個變量相互獨立，修改其中一個的值，另一個不會變化。
②引用數據類型：賦值時，是將原變量在內存中的地址，賦值給另一個變量。賦值完成後，兩個變量中存儲的是同一個內存地址，訪問的是同一份數據，
其中一個改變另一個也會發生變化。
③ 數值型、字符串、布爾型等變量屬於基本數據類型;
數組，對象屬於引用數據類型;
內置對象
1、Boolean 類
有兩種聲明方式：
可以使用字面量方式聲明一個單純的變量；用typeOf檢測為Boolean類型
也可以使用new Boolean()聲明一個Boolean類型的對象。用typeOf檢測為Object類型
2、Number類
Number.MAX_VALUE 返回Number類最大值
Number.MIN_VALUE 返回Number類最小值
.toString() 將數值類型轉換為字符串類型
.toLocaleString() 將數值按照本地格式順序轉換為字符串，一般從右開始，三個一組加逗號分隔；
.toFixed(n) 將數字保留n位小數，並轉為字符串格式；
.toPrecision(n) 將數字格式化為指定長度。n表示不含小數點的位數長度，如果n小於原數字長度，則用科學計數法表示。如果n大於原數字長度，則小數點後補0
.valueOf() 返回Number對象的基本數字值；
3、String 類
①、屬性：str.length 返回字符串的長度，也就是 字符數
字符串支持類似數組的下標訪問方式：str[0];
②、 方法：
.toLowerCase()：將字符串所有字符轉成小寫
.toUpperCase()：將字符串所有字符轉成大寫
.charAt(n)：截取數組的第n個字符，相當於str[n]
.indexOf("str",index)：從index位置開始，查找子串在字符串中出現的位置，如果沒有找到返回-1；其他同數組的indexOf方法；
.lastindexOf()：同數組
.substring(begin,end)：從字符串中截取子串
>>>只傳入一個參數，表示從begin開始，到最後
>>>傳入兩個參數，表示從begin到end的區間，左閉右開
.split("分隔符")：將字符串以指定分隔符分隔，存入數組中。傳入空""表示將字符串的每個字符分開放入數組
.replace("old","new")：將字符串中的第一個old替換為new。
>>>第一個參數，可以是普通字符串，也可以是正則表達式；var str1 = str.replace("i","*");
>>>如果是普通字符串，則只替換第一個old。如果是正則表達式，則可以根據正則的寫法要求，進行替換。var str1 = str.replace(/s/g,"*");
4、date 日期類
①、new Date()：返回當前最新時間
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、基本概念：
①對象：擁有一系列無序屬性和方法的集合。
②鍵值對：對象中的數據是以鍵值對的形式存在。對象的每個屬性和方法，都對應著一個鍵名，以鍵取值。
③屬性：描述對象特征的一系列變量，稱為屬性。【對象中的變量】
④方法：描述對象行為的一系列函數，稱為方法。【對象中的函數】
2、對象的聲明：
①使用字面量聲明：
var obj = {
key1 : value1,
key2 : value2,
func1 : function(){}
}
>>>對象中的數據是以鍵值對形式存儲，鍵與值之間用:分隔。多個鍵值對之間用,分隔。
>>>對象中的鍵可以是除了數組/對象以外的任何數據類型。但是一般我們只用普通變量名作為鍵。
>>>對象中的值可以是任何數據類型，包括數組和對象。
②使用new關鍵字聲明：
var obj = new object(){
obj.key1 = value1;
obj.func1 = function(){}
}
3、對象中屬性和方法的讀寫：
①.運算符：對象名.屬性 對象名.方法();
對象外部：this.屬性 this.方法
內部對象：對象名.屬性 對象名.方法();
②通過["key"]調用：對象名.["屬性名"] 對象名.["方法名"]();
>>>如果鍵中包含特殊字符，則只能使用第②種方式；
>>>對象中，直接寫變量名，默認為調用全局變量。如果需要調用對象滋生的屬性或者方法，需要使用對象名.屬性名， 或者this.屬性。
person.age this.age 都可以，但推薦使用this關鍵字
③刪除對象的屬性和方法：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();
效果：
JS基礎--函數與BOM、DOM操作、JS中的事件以及內置對象