當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象

發布時間：2023/12/20 javascript 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

? ?前 ? 言

絮叨絮叨

? ? ? ? ?這里是JS基礎知識集中講解的第三篇，也是最后一篇，三篇JS的基礎，大多是知識的羅列，并沒有涉及更難得東西，干貨滿滿！看完這一篇后，相信許多正在像我一樣正處于初級階段的同學，經過初步的學習，會對這一門語言有了一定深入的了解，也會感受到這一門語言的強大之處。希望各位同學通過一定的學習，會得到等大的收獲。

? ? ? ? 因為是最后一篇所以內容可能有點多，希望各位同學能夠慢慢看，細細看，讓我們一起學習，一起進步，一起感受JS的魅力。

一函數

函數的聲明及調用

1、函數的聲明格式：
?function 函數名(參數1,參數2,……){
　　//函數體代碼
　　?return 返回值;
?}

?函數的調用：
①直接調用：函數名(參數1的值，參數2的值，……);

②事件調用：在Html標簽中，使用事件名="函數名()"

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);

?效果如圖，當點擊設置延時器按鈕 ?時，會隔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.οnclick="" 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 οnclick="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();

?效果：

轉載于:https://www.cnblogs.com/realsdg/p/7536438.html

總結

以上是生活随笔為你收集整理的JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。