JavaScript重點知識點大全整理，必備！
阿新 • • 發佈：2019-01-02
純手打。。。。
1.value和innerHTML沒有聯絡，只是value是表單的一個特有屬性，而innerHTML是通用的。
2.當從外部引入js檔案時，該外部檔案裡面可以有多個方法，
html頁面中的onclick只選中其中一個方法即可。
做法是在<script src="外部檔名.js"></script>
注意：外部指令碼不能包含<script></script>標籤。
3. js有四種方法顯示資料：window.alert();彈出警示框
document.write()；將內容寫到 HTML檔案中
innerHTML;寫入到HTML元素中
console.log()寫入到瀏覽器的控制檯
注意：1》當頁面載入完成後執行document.write(),則會被覆蓋。
2》使用console.log()，在瀏覽器中按F12,然後點選console
1》 <p>大家好</p>
<button type="button" onclick="a()">點選</button>
<script>
function a(){
document.write("糟了");
}
</script>
3》innerHTML比document.write先顯示
4.js中數字可以是整數，小數和e，不需要引號。文字內容需要用單/雙引號連線。
5.js字母大小寫非常敏感
函式 getElementById 與 getElementbyID 是不同的。
同樣，變數 myVariable 與 MyVariable 也是不同的。
6.js常見命名是用駝峰法。如：lastName
7.js中用分號來結束語句是可選的，並且用分號的作用是為了在一行可以編寫多條語句。
如：a=1;b=4;
8.js會忽略多餘的空格，來提高可讀性。
9.js中命名物件是使用鍵值對的方式，以{}開始和結尾。普通陣列則是用[];
<script>
//採用鍵值對的方式
var person={name:"liuaihong",age:12,job:"boss"};
document.write(person.name+"<p>");
document.write(person["age"]);
</script>
10. 若沒有賦值為var，則預設為全域性變數，記住，位置不能變！js是從上到下編譯！
window是全域性變數，所有資料都屬於window物件。
<body>
<p id="demo"></p>
<script>
myFunction();
document.getElementById("demo").innerHTML=a;
=window.a;
function myFunction(){
a="hah";
}
</script>
</body>
11.js中的字串中可以使用任何符號，也可以使用轉義字元，但是注意不能跟外部的引號一樣即可。
\+符號=符號
12. ==意思是絕對相等，資料型別和值都必須相等。
x+=y意思是x=x+y
13.字元與數字相加，返回字串，數字與數字相加，返回數字。
注意： 空文字 + 數字得到的運算結果都是把數字轉成字串，無論文字有多少個空格。但是空
格會計入長度。
var re=""+5;顯示"5"
var re=" "+5;顯示" 5"//空格也會顯示
var re=5+5+"abc";顯示"10abc"
var re=""+5+5+"abc";顯示"55abc
14.只有單獨的if 語句時，條件為true才會執行，當不為true時，則不執行任何程式碼。
15.時間的函式：var d=new Date();
d.getHours();//獲取當前時間
d.getDay();//獲取星期幾
16.switch情況，當兩種情況相同時，可以只在第一個情況下面寫程式碼。
switch(number)
{
case 1:alert("1");break;
case 10:
case 11:alert("10 或 11");break;
default:alert("都不是");
}
17.for in是迴圈遍歷物件的屬性值
function myFunction(){
var person={name:"liu",age:12,address:"haha"};//物件陣列的書寫
方式
var x;
var txt="";//txt需要設定值，不然會顯示為undefined
for(x in person){
txt=txt+person[x];//需要加上txt，不然只會遍歷最後一個
的值
}
document.getElementById("demo1").innerHTML=txt;
}
18.while是遍歷為true時的值。do while是先進行一次程式碼的執行，再判斷，所以最少執行一次。
<script>
function myFunction(){
var i=6,txt="";
do{
txt=txt+i;
i++;
}
while(i<5);
document.getElementById("demo").innerHTML=txt;
}
</script>
19.break是終止迴圈，continue是跳出本次迴圈，而繼續執行其後面的程式碼，如果有的話。
20.typeof是用來檢測變數的資料型別，null可以把變數的值改變，改為空，但是其資料型別還是不會變。
而undefined也是清空物件，但是型別也成了undefined.
21.js中有5種資料型別：string ,number,boolean,object,function
3種物件型別：Object,Date,Array
2種不包含任何值的資料型別：null,undefined
22.一元運算子可以把字元型別轉化為數字型別：x=+y為number型別。
23.正則表示式(RE)，使用單個字串來描述、匹配一些類符合某個語法規則的字串搜尋模式，一般用於
search()和 replace()方法。
RegExp物件是一個預定義了屬性和方法的正則表示式。
test()是檢測一個字串是否匹配某個模式。
var patt=new RegExp("e");
document.write(patt.test("the eel"));//返回true
document.write(patt.exec("hello eee"));//返回e,不匹配就返回null
24.try 和 catch是成對出現的
try{
addlert("welcome!");
}
catch(err){
alert(err.message);
}
25.在js輸出語句中直接用回車換行是會報錯的。
注意，不能對return語句進行換行。
注意，定義陣列和物件，最後一個不能加逗號
points = [40, 100, 1, 5, 25, 10，];
websites = {site:"菜鳥教程", url:"www.runoob.com", like:460,}
26.表單自動驗證使用required
<form action="demo_form.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="提交">
</form>
27.獲取表單的值
var fname=document.forms["myForm"]["fname"].value;
28.<a href="javascript:void(0);">點選我什麼都不會發生</a>
<a href="#">點我會調到預設的當前頁的頂部</a>
29.通常運算子 ( = + - * / ) 前後需要新增空格:
var x = y + z;
通常使用 4 個空格符號來縮排程式碼塊：
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
通常左花括號前加一個空格，右花括號單獨放在一行
for (i = 0; i < 5; i++) {
x += i;
}
- 通常在 JavaScript 中被認為是減法，所以不允許使用。 一般使用下劃線_.
js函式
1.函式顯式引數(Parameters)與隱式引數(Arguments);
2.如果一個函式呼叫前使用了new關鍵字，則這是一個建構函式
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
var x = new myFunction("John","Doe");
3.call()方法和apply()方法是預定義的兩個方法，兩個方法的第一個引數必須是物件本身。
myObject = myFunction.call(myObject, 10, 2); // 返回 20
myObject = myFunction.apply(myObject, myArray); // 返回 20
4.閉包就是一個函式引用另一個函式的變數，因為變數被引用著所以不會被回收，因此可以用來封裝一個私
有變數。這是優點也是缺點，不必要的閉包只會增加記憶體消耗。
或者說閉包就是子函式可以使用父函式的區域性變數，還有父函式的引數。
閉包是可訪問上一層函式作用域裡變數的函式，即便上一層函式已經關閉。
HTML DOM文件物件模型
1.通過 HTML DOM可訪問js html文件的所有元素。
2.var x=document.getElementById("demo").getElementsByTagName("p");
document.write(x[1].innerHTML);//根據標籤查詢，p是一個標籤。
document.getElementsByClassName("intro");函式來查詢 class="intro" 的元素;
document.getElementById("image").src="a.jpg";//可以改變html的屬性，原圖為b.jpg,現改為a.jpg
document.getElementById("p2").style.color="blue";//可改變css的樣式，比如改變顏色等。
document.getElementById("p1").style.visibility="hidden";//改變文字，使之隱藏。
doucment.getElementById("P2").addEventListener("click",displayDate);//點選時，事件載入。
js物件
1.js是基於prototype,而不是基於類的。
prototype 屬性使您有能力向物件新增屬性和方法。
2.js用Infinity來表示數字的無窮大。
3.一個數字除以一個字串結果不是一個數字、一個數字除以一個字串數字結果是一個數字
var x = 1000 / "Apple";//不是數字，返回false
var y = 1000 / "1000";//是數字，返回true
4.String是一個字串物件，a.lenght計算字元長度
a.indexOf("")計算字串出現的位置，沒有返回-1
a.match("")查詢字串中特定的字元，若找到則返回這個字元。
a.replace("新的","舊的")替代指定字元
a.toUpperCase()大寫
a.toLowerCase()小寫
5.Array陣列物件：var a=["一","二","三","四"];
a.concat(b,c);//合併兩個陣列
a.shift();//刪除陣列第一個元素
a.pop();//刪除陣列的最後一個元素
aunshift("");//在陣列最前面加上元素
a.push("xxx");//在陣列末尾加上一個元素
a.reverse();//將陣列元素順序反轉排序
a.sort();//按升序排列陣列
a.toString();//陣列轉化成字串
6.Math物件： a.Math.round(4.3);//返回最接近4.3的數，4
a.Math.random();//返回0-1之間的隨機數
a.Math.max(a,b，c..);返回a,b,c..中最大的一個數
a.Math.min(a,b，c..);返回a,b,c..中最小的一個數
JS BOM瀏覽器物件模型
1.location.href;//返回URL
location.hostname;//返回web主機域名
location.pathname;//返回當前頁面的路徑和檔名
location.port;//返回web主機的埠
location.protocol;//返回使用的web協議
注意：不能使用window這個字首。
2.history.back();//返回上一個地址
history.forward();//返回下一個地址
3.navigator.attribute;//返回當前瀏覽器的資訊
4.彈窗alert();//提示
confirm("sometext");//警告
prompt("sometext","預設");//輸入資料並繼續
5.setInterval(function(){},時間);//間隔相同的時間執行相同的程式碼，1000ms為1秒
clearInterval(a);//停止
setTimeOut(function(){},時間);//設定方法執行的時間
clearTimeOut(a);//停止，你必須在它設定的時間之前阻止它
1.value和innerHTML沒有聯絡，只是value是表單的一個特有屬性，而innerHTML是通用的。
2.當從外部引入js檔案時，該外部檔案裡面可以有多個方法，
html頁面中的onclick只選中其中一個方法即可。
做法是在<script src="外部檔名.js"></script>
注意：外部指令碼不能包含<script></script>標籤。
3. js有四種方法顯示資料：window.alert();彈出警示框
document.write()；將內容寫到 HTML檔案中
innerHTML;寫入到HTML元素中
console.log()寫入到瀏覽器的控制檯
注意：1》當頁面載入完成後執行document.write(),則會被覆蓋。
2》使用console.log()，在瀏覽器中按F12,然後點選console
1》 <p>大家好</p>
<button type="button" onclick="a()">點選</button>
<script>
function a(){
document.write("糟了");
}
</script>
3》innerHTML比document.write先顯示
4.js中數字可以是整數，小數和e，不需要引號。文字內容需要用單/雙引號連線。
5.js字母大小寫非常敏感
函式 getElementById 與 getElementbyID 是不同的。
同樣，變數 myVariable 與 MyVariable 也是不同的。
6.js常見命名是用駝峰法。如：lastName
7.js中用分號來結束語句是可選的，並且用分號的作用是為了在一行可以編寫多條語句。
如：a=1;b=4;
8.js會忽略多餘的空格，來提高可讀性。
9.js中命名物件是使用鍵值對的方式，以{}開始和結尾。普通陣列則是用[];
<script>
//採用鍵值對的方式
var person={name:"liuaihong",age:12,job:"boss"};
document.write(person.name+"<p>");
document.write(person["age"]);
</script>
10. 若沒有賦值為var，則預設為全域性變數，記住，位置不能變！js是從上到下編譯！
window是全域性變數，所有資料都屬於window物件。
<body>
<p id="demo"></p>
<script>
myFunction();
document.getElementById("demo").innerHTML=a;
=window.a;
function myFunction(){
a="hah";
}
</script>
</body>
11.js中的字串中可以使用任何符號，也可以使用轉義字元，但是注意不能跟外部的引號一樣即可。
\+符號=符號
12. ==意思是絕對相等，資料型別和值都必須相等。
x+=y意思是x=x+y
13.字元與數字相加，返回字串，數字與數字相加，返回數字。
注意： 空文字 + 數字得到的運算結果都是把數字轉成字串，無論文字有多少個空格。但是空
格會計入長度。
var re=""+5;顯示"5"
var re=" "+5;顯示" 5"//空格也會顯示
var re=5+5+"abc";顯示"10abc"
var re=""+5+5+"abc";顯示"55abc
14.只有單獨的if 語句時，條件為true才會執行，當不為true時，則不執行任何程式碼。
15.時間的函式：var d=new Date();
d.getHours();//獲取當前時間
d.getDay();//獲取星期幾
16.switch情況，當兩種情況相同時，可以只在第一個情況下面寫程式碼。
switch(number)
{
case 1:alert("1");break;
case 10:
case 11:alert("10 或 11");break;
default:alert("都不是");
}
17.for in是迴圈遍歷物件的屬性值
function myFunction(){
var person={name:"liu",age:12,address:"haha"};//物件陣列的書寫
方式
var x;
var txt="";//txt需要設定值，不然會顯示為undefined
for(x in person){
txt=txt+person[x];//需要加上txt，不然只會遍歷最後一個
的值
}
document.getElementById("demo1").innerHTML=txt;
}
18.while是遍歷為true時的值。do while是先進行一次程式碼的執行，再判斷，所以最少執行一次。
<script>
function myFunction(){
var i=6,txt="";
do{
txt=txt+i;
i++;
}
while(i<5);
document.getElementById("demo").innerHTML=txt;
}
</script>
19.break是終止迴圈，continue是跳出本次迴圈，而繼續執行其後面的程式碼，如果有的話。
20.typeof是用來檢測變數的資料型別，null可以把變數的值改變，改為空，但是其資料型別還是不會變。
而undefined也是清空物件，但是型別也成了undefined.
21.js中有5種資料型別：string ,number,boolean,object,function
3種物件型別：Object,Date,Array
2種不包含任何值的資料型別：null,undefined
22.一元運算子可以把字元型別轉化為數字型別：x=+y為number型別。
23.正則表示式(RE)，使用單個字串來描述、匹配一些類符合某個語法規則的字串搜尋模式，一般用於
search()和 replace()方法。
RegExp物件是一個預定義了屬性和方法的正則表示式。
test()是檢測一個字串是否匹配某個模式。
var patt=new RegExp("e");
document.write(patt.test("the eel"));//返回true
document.write(patt.exec("hello eee"));//返回e,不匹配就返回null
24.try 和 catch是成對出現的
try{
addlert("welcome!");
}
catch(err){
alert(err.message);
}
25.在js輸出語句中直接用回車換行是會報錯的。
注意，不能對return語句進行換行。
注意，定義陣列和物件，最後一個不能加逗號
points = [40, 100, 1, 5, 25, 10，];
websites = {site:"菜鳥教程", url:"www.runoob.com", like:460,}
26.表單自動驗證使用required
<form action="demo_form.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="提交">
</form>
27.獲取表單的值
var fname=document.forms["myForm"]["fname"].value;
28.<a href="javascript:void(0);">點選我什麼都不會發生</a>
<a href="#">點我會調到預設的當前頁的頂部</a>
29.通常運算子 ( = + - * / ) 前後需要新增空格:
var x = y + z;
通常使用 4 個空格符號來縮排程式碼塊：
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
通常左花括號前加一個空格，右花括號單獨放在一行
for (i = 0; i < 5; i++) {
x += i;
}
- 通常在 JavaScript 中被認為是減法，所以不允許使用。 一般使用下劃線_.
js函式
1.函式顯式引數(Parameters)與隱式引數(Arguments);
2.如果一個函式呼叫前使用了new關鍵字，則這是一個建構函式
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
var x = new myFunction("John","Doe");
3.call()方法和apply()方法是預定義的兩個方法，兩個方法的第一個引數必須是物件本身。
myObject = myFunction.call(myObject, 10, 2); // 返回 20
myObject = myFunction.apply(myObject, myArray); // 返回 20
4.閉包就是一個函式引用另一個函式的變數，因為變數被引用著所以不會被回收，因此可以用來封裝一個私
有變數。這是優點也是缺點，不必要的閉包只會增加記憶體消耗。
或者說閉包就是子函式可以使用父函式的區域性變數，還有父函式的引數。
閉包是可訪問上一層函式作用域裡變數的函式，即便上一層函式已經關閉。
HTML DOM文件物件模型
1.通過 HTML DOM可訪問js html文件的所有元素。
2.var x=document.getElementById("demo").getElementsByTagName("p");
document.write(x[1].innerHTML);//根據標籤查詢，p是一個標籤。
document.getElementsByClassName("intro");函式來查詢 class="intro" 的元素;
document.getElementById("image").src="a.jpg";//可以改變html的屬性，原圖為b.jpg,現改為a.jpg
document.getElementById("p2").style.color="blue";//可改變css的樣式，比如改變顏色等。
document.getElementById("p1").style.visibility="hidden";//改變文字，使之隱藏。
doucment.getElementById("P2").addEventListener("click",displayDate);//點選時，事件載入。
js物件
1.js是基於prototype,而不是基於類的。
prototype 屬性使您有能力向物件新增屬性和方法。
2.js用Infinity來表示數字的無窮大。
3.一個數字除以一個字串結果不是一個數字、一個數字除以一個字串數字結果是一個數字
var x = 1000 / "Apple";//不是數字，返回false
var y = 1000 / "1000";//是數字，返回true
4.String是一個字串物件，a.lenght計算字元長度
a.indexOf("")計算字串出現的位置，沒有返回-1
a.match("")查詢字串中特定的字元，若找到則返回這個字元。
a.replace("新的","舊的")替代指定字元
a.toUpperCase()大寫
a.toLowerCase()小寫
5.Array陣列物件：var a=["一","二","三","四"];
a.concat(b,c);//合併兩個陣列
a.shift();//刪除陣列第一個元素
a.pop();//刪除陣列的最後一個元素
aunshift("");//在陣列最前面加上元素
a.push("xxx");//在陣列末尾加上一個元素
a.reverse();//將陣列元素順序反轉排序
a.sort();//按升序排列陣列
a.toString();//陣列轉化成字串
6.Math物件： a.Math.round(4.3);//返回最接近4.3的數，4
a.Math.random();//返回0-1之間的隨機數
a.Math.max(a,b，c..);返回a,b,c..中最大的一個數
a.Math.min(a,b，c..);返回a,b,c..中最小的一個數
JS BOM瀏覽器物件模型
1.location.href;//返回URL
location.hostname;//返回web主機域名
location.pathname;//返回當前頁面的路徑和檔名
location.port;//返回web主機的埠
location.protocol;//返回使用的web協議
注意：不能使用window這個字首。
2.history.back();//返回上一個地址
history.forward();//返回下一個地址
3.navigator.attribute;//返回當前瀏覽器的資訊
4.彈窗alert();//提示
confirm("sometext");//警告
prompt("sometext","預設");//輸入資料並繼續
5.setInterval(function(){},時間);//間隔相同的時間執行相同的程式碼，1000ms為1秒
clearInterval(a);//停止
setTimeOut(function(){},時間);//設定方法執行的時間
clearTimeOut(a);//停止，你必須在它設定的時間之前阻止它