對於JavaScript原生的JS
前言：工做接近一年，發現對於原生JS的基礎內容老是不夠掌握，特定抽出三個周的週末，結合本人的工做經驗還有菜鳥教程及w3school的基礎內容等整理了以下內容。對JS的經常使用知識進行歸納！但願對你們可以有所幫助。javascript
1、JavaScript 簡介
一、JavaScript 是 Web 的編程語言，是前端開發必須掌握的三門語言之一，即：html
- HTML 定義了網頁的內容
- CSS 描述了網頁的佈局
- JavaScript 實現了網頁的行爲
二、JavaScript 是一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱爲JavaScript引擎，爲瀏覽器的一部分，普遍用於客戶端的腳本語言，最先是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增長動態功能。如今 是互聯網上最流行的腳本語言，這門語言可用於 HTML 和 web，更可普遍用於服務器、PC、筆記本電腦、平板電腦和智能手機等設備。 前端
2、JavaScript 主要實現功能
一、JavaScript：直接寫入 HTML 輸出流：java
二、JavaScript：對事件的反應：node
<button type="button" onclick="alert('歡迎!')">點我!</button>web
三、JavaScript：改變 HTML 內容：編程
x=document.getElementById("demo") //查找元素數組
x.innerHTML="Hello JavaScript"; //改變內容瀏覽器
四、JavaScript：改變 HTML 圖像：服務器
動態地改變 HTML <image> 的來源（src）
五、JavaScript：改變 HTML 樣式
x=document.getElementById("demo") //找到元素
x.style.color="#ff0000"; //改變樣式
六、JavaScript：驗證輸入
if isNaN(x) {alert("不是數字")}; //下面會介紹 isNaN 一種經常使用的數值函數
3、JavaScript中的變量和輸入輸出
1、JavaScript中的變量:
一、JS中變量聲明的寫法：
var num =10；// 使用var聲明的變量，屬於局部變量，只是當前做用域內有效；
num = 10； // 不用var聲明，默認爲全局變量，在整個JS文件中都有效；
var x=8,y,z=10;使用一行語句，同時聲明多個變量。上式中，y屬於已聲明，可是未賦值狀態，結果爲undefined；
二、JS中變量的命名規範：
一、變量名的命名要求：
①變量名只能有字母、數字、下劃線組成；
②開頭不能是數字；
③變量名區分大小寫，大寫字母和小寫字母爲不一樣變量；純大寫字母，通常默認爲常量；
二、變量名的命名規範：
①要符合小駝峯法則：
首字母小寫，以後每一個單詞的首字母大寫；
myNameIsJiangHao 駱駝命名法：
② 全部字母小寫，中間用
_my_name_is_jiang_hao 匈牙利寫法
③ manameisjianghao 能用 可是不規範
2、JavaScript中的數據類型:
一、JavaScript 字符串（String）類型
字符串是存儲字符（好比 "Bill Gates"）的變量。
字符串能夠是引號中的任意文本。您可使用單引號或雙引號：
var carname="Volvo XC60";
var carname='Volvo XC60';
二、JavaScript 數字 （Number）類型
JavaScript 只有一種數字類型。數字能夠帶小數點，也能夠不帶：
var x1=34.00; //使用小數點來寫
var x2=34; //不使用小數點來寫
極大或極小的數字能夠經過科學（指數）計數法來書寫：
var y=123e5; // 12300000
var z=123e-5; // 0.00123
三、JavaScript 布爾 ( Boolean ) 類型
布爾（邏輯）只能有兩個值：true 或 false。
var x=true;
var y=false;
四、JavaScript 數組 （ Array ）
下面的代碼建立名爲 cars 的數組：
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
或者 :
或者 :
數組下標是基於零的，因此第一個項目是 [0]，第二個是 [1]，以此類推。
五、JavaScript 對象 （ Object ）
對象由花括號分隔。在括號內部，對象的屬性以名稱和值對的形式 (name : value) 來定義。屬性由逗號分隔：
上面例子中的對象 (person) 有三個屬性：firstname、lastname 以及 id。
空格和折行可有可無。聲明可橫跨多行：
firstname : "John",
lastname : "Doe",
id : 5566
};
對象屬性有兩種尋址方式：
name=person["lastname"];//Doe
Undefined 這個值表示變量不含有值。
能夠經過將變量的值再一次設置爲 null 來清空變量。
3、JavaScript 中的數值函數
一、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函數的區別]
一、Number函數能夠轉各類數據的類型，ParseInt函數只能轉字符串；
二、二者在轉字符串時，結果不徹底相同。(詳見上面解釋)
四、ParseFloat：將字符串轉爲數值型；
轉換規則與ParseInt相同，只是若是有小數，則保留小數點；若是沒有小數，則依然是整數；"12.5"->12.5;"12"->12
五、typeof：檢測變量的數據類型：
字符串->String 數值->Number 未定義->Undefined 對象/NULL->object 函數->function
true/false->Boolean
4、JavaScript 中的輸入和輸出語句
一、prompt（） 彈窗輸入語句
接受兩部分參數：
①輸入框上面的提示內容，可選；
②輸入框裏面的默認信息，可選；
當只寫一部分時，表示輸入框上面的提示內容；
能夠定義變量，接受輸入的內容。點擊肯定按鈕，變量將被賦值爲輸入的內容；點擊取消按鈕，變量將被賦值爲null；
var name = promopt("請輸入您的姓名"," ");
二、JavaScript 能夠經過不一樣的方式來輸出數據：
- 使用 window.alert() 彈出警告框。
- 使用 document.write() 方法將內容寫到 HTML 文檔中。
- 使用 innerHTML 寫入到 HTML 元素。
- 使用 console.log() 寫入到瀏覽器的控制檯。
5、JavaScript 中的運算符
一、算術運算(單目運算符)
+ 加、- 減、* 乘、 / 除、 % 取餘、++ 自增 、-- 自減
+號：有兩種做用，鏈接字符串/加法運算。當+兩邊鏈接數字時，進行加法運算；當+兩邊有任意一邊爲字符串時，起鏈接字符串做用，
連接以後的結果爲字符串；
除+外，其他符號運算時，會先嚐試將左右兩邊的變量用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；
二、賦值運算
= += -= *= /= %=
+=：a+=b；至關於a=a+b；可是前者的運算效率要比後者快，因此推薦使用+=的寫法；
三、關係運算
==、 ！=、>、<、>=、<=
>>> 關係運算符，運算以後的結果，只能是Boolean類型；
>>> 判斷一個數字是否處於一個區間，必須用&&連接；
a<10 && a>0 √ ; 10>a>0 x
>>> ===:嚴格等於；要求不但類型要相同，值也必須相同；類型不一樣結果直接爲false，類型相同，再進行下一步判斷；
== ：等於。類型相同，同===同樣，類型不一樣時，會先嚐試用Number將兩邊轉爲數字，而後再進行判斷。
可是，有個別特例： Null==false x ；Null==Undefined √
！=：不等、！== 不全等
四、條件運算符(多目運算)
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)
五、 位運算符、 邏輯運算符
&、|、~ &&與、||或、！非
&& 兩邊都成立，結果爲true
|| 兩邊有任意一個成立，結果爲true
六、運算符的優先級
（）小括號最高
！ ++ --
* / %
+ -
< > >= <=
== !=
&& //與或同時存在時，&&比|| 高
||
= += -= *= /= 最低的是各類賦值
6、JavaScript 中的條件語句
在 JavaScript 中，咱們可以使用如下條件語句：
- if 語句 - 只有當指定條件爲 true 時，使用該語句來執行代碼
- if...else 語句 - 當條件爲 true 時執行代碼，當條件爲 false 時執行其餘代碼
- if...else if....else 語句- 使用該語句來選擇多個代碼塊之一來執行
- switch 語句 - 使用該語句來選擇多個代碼塊之一來執行
一、If 語句 只有當指定條件爲 true 時，該語句纔會執行代碼。
if 的（）中的判斷條件，支持的狀況：
①Boolean：true爲真；false爲假；
②String：空字符串爲假
③Number：0爲假；一切非零數字爲真；
④null/Undefined/NaN:全爲假；
⑤object：全爲真；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>若是時間早於 20:00，會得到問候 "Good day"。</p>
<button onclick="myFunction()">點擊這裏</button>
<p id="demo"></p>
<script>
function myFunction(){
var x="";
var time=new Date().getHours();
if (time<20){
x="Good day";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
二、使用 if....else 語句在條件爲 true 時執行代碼，在條件爲 false 時執行其餘代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>點擊這個按鈕，得到基於時間的問候。</p>
<button onclick="myFunction()">點擊這裏</button>
<p id="demo"></p>
<script>
function myFunction(){
var x="";
var time=new Date().getHours();
if (time<20){
x="Good day";
}
else{
x="Good evening";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
三、使用 if....else if...else 語句來選擇多個代碼塊之一來執行。
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var d = new Date();
var time = d.getHours();
if (time<10)
{
document.write("<b>早上好</b>");
}
else if (time>=10 && time<16)
{
document.write("<b>今天好</b>");
}
else
{
document.write("<b>晚上好!</b>");
}
</script>
<p>
這個例子演示了 if..else if...else 語句。
</p>
</body>
</html>
四、JavaScript switch 語句
switch 語句用於基於不一樣的條件來執行不一樣的動做。
工做原理：首先設置表達式 n（一般是一個變量）。隨後表達式的值會與結構中的每一個 case 的值作比較。若是存在匹配，則與該 case 關聯的代碼塊會被執行。請使用 break 來阻止代碼自動地向下一個 case 運行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>點擊下面的按鈕來顯示今天是周幾：</p>
<button onclick="myFunction()">點擊這裏</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var d=new Date().getDay();
switch (d){
case 0:x="今天是星期日";
break;
case 1:x="今天是星期一";
break;
case 2:x="今天是星期二";
break;
case 3:x="今天是星期三";
break;
case 4:x="今天是星期四";
break;
case 5:x="今天是星期五";
break;
case 6:x="今天是星期六";
break;
default：x="未知錯誤"；
break；
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
7、JavaScript 中的循環結構
一、【while(){}循環結構的步驟】
一、聲明循環變量
二、判斷循環條件
三、執行循環體操做
四、更新循環變量
而後循環執行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(){}循環結構的步驟】
一、for循環有三個表達式：
① 聲明循環變量;
② 判斷循環條件;
③ 更新循環變量;
三個表達式之間用;分隔開,三個表達式能夠省略,可是兩個分號不能省略.
二、for循環的執行特色:先判斷再執行，和while相同；
執行順序：一、初始語句 二、執行條件是否符合？ 三、循環體 四、增長增量 ；
三、for循環三個表達式都可以由多部分組成，第二部分多個判斷條件用&& 、||鏈接，其餘部分能夠用，鏈接。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>點擊按鈕循環代碼5次。</p>
<button onclick="myFunction()">點擊這裏</button>
<p id="demo"></p>
<script>
function myFunction(){
var x="";
for (var i=0;i<5;i++){
x=x + "該數字爲 " + i + "<br>";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
8、JacaScript 中的函數
1、JacaScript 函數：函數是由事件驅動的或者當它被調用時執行的可重複使用的代碼塊。
2、函數的聲明及調用：
一、函數的標準聲明格式：
function 函數名（參數一，參數二，...）{
//函數體代碼
return 返回值；
}
函數的調用：
① 直接調用：函數名加（參數一的值，參數二的值,.......)；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>本例調用的函數會執行一個計算，而後返回結果：</p>
<p id="demo"></p>
<script>
function myFunction(a,b){
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>
</body>
</html>
② 事件調用：HTML標籤中，使用事件名="函數名（）"
<button onclick="saySth('hah ha','yellow')">點擊按鈕，打印內容</button>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>點擊這個按鈕，來調用帶參數的函數。</p>
<button onclick="myFunction('Harry Potter','Wizard')">點擊這裏</button>
<script>
function myFunction(name,job){
alert("Welcome " + name + ", the " + job);
}
</script>
</body>
</html>
二、函數的注意事項：
① 函數必需要符合小駝峯法則！！！（首字母小寫，以後每一個人單詞首字母大寫）
② 函數名後面的（）中，能夠有參數，也能夠沒有參數。分別稱爲有參函數和無參函數；
③ 聲明函數時的參數列表，稱爲型參列表，形式參數。（變量的名字）
function saySth(str,color){}
調用函數時的參數列表，稱爲實參列表，實際參數。（變量的賦值）
saySth("哈哈哈","red");
④ 函數的形參列表個數和實參列表個數沒有實際關係。
函數參數的個數，取決於實參列表。
若是實參列表的個數<形參列表,則未賦值的形參，將爲Undefined。
⑤ 函數能夠有返回值，使用return返回結果；
調回函數時，可使用一個變量接受函數的返回結果。若是函數沒有返回值，則接受的結果爲undefined；
function func(){
return = "hahaha";
}
var num = func()；//num = "hahaha"
⑥ 函數變量的做用域：
在函數中，使用var聲明的變量，爲局部變量，只能在函數內部訪問；
不使用var聲明的變量，爲全局變量，在函數外邊也能訪問；
函數的形象列表，默認爲函數的局部變量，只能在函數內部使用；
⑦ 函數的聲明與函數的調用，沒有前後之分。即，能夠在聲明函數以前，調用函數。
func（）；//聲明func以前調用也是能夠的。
function func(){}；
【匿名函數的聲明和使用】：
一、聲明一個匿名函數直接賦值給某一個事件；
window.onload = function(){} ；
二、使用匿名函數表達式；將匿名函數，賦值給一個變量。
聲明：var func = function(){}
調用：func()；
注意：使用匿名函數表達時，函數的調用語句，必須放在函數聲明語句以後！！！（與普通函數的區別！！！）
三、自執行函數
① !function(){}();//可使用多種運算符開頭，單一版用！；
!function(形參列表){}(實參列表)；
② (function(){}());//使用()將函數及函數後的括號包起來；
③ (function(){})();//使用()值包裹函數部分；
三種寫法的特色：
① 第一種使用!開頭，結構清晰，不容易混亂，推薦使用；
② 第二種寫法可以代表匿名函數與調用的()爲一個總體，官方推薦使用；
③ 第三種沒法代表函數以後的()的總體性，不推薦使用；
9、JavaScript 中的 BOM
BOM:瀏覽器對象模型（Browser Object Model (BOM)，瀏覽器對象模型 (BOM) 使 JavaScript 有能力與瀏覽器"對話"。
因爲現代瀏覽器已經（幾乎）實現了 JavaScript 交互性方面的相同方法和屬性，所以常被認爲是 BOM 的方法和屬性。
一、【location對象】：取到瀏覽器的URL地址信息。
使用location提供的方法跳轉頁面的方式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>點擊這個按鈕，實現頁面的跳轉。</p>
<button onclick="assign()">assign</button>
<button onclick="replace()">replace</button>
<button onclick="reload()">repload</button>
<script>
//加載新的文檔，加載以後，能夠回退。
function assign(){
location.assign("http://www.baidu.com");
}
//使用新的文檔替換當前文檔。替換之後，不能回退。
function replace(){
location.replace("http://www.baidu.com");
}
function reload(){
/*重新加載當前文檔。刷新頁面
*reload():在本地刷新當前頁面，至關於F5
*reload(true):強制刷新，從服務器端重新加載頁面，至關於ctrl+F5
*/
location.reload();
}
</script>
</body>
</html>
二、【history瀏覽歷史】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>點擊這個按鈕，實現頁面的歷史記錄。</p>
<button onclick="back()">後退一步</button>
<button onclick="forward()">前進一步</button>
<button onclick="go()"></button>
<script>
function back(){
history.back();//後退按鈕
}
function forward(){
history.forward();//前進按鈕
}
function go(){
/* 跳轉到瀏覽歷史的任意頁面
* 0表示當前頁面-1表示後一個頁面（back），1表示前一頁（forward）
*/
history.go();//
}
</script>
</body>
</html>
三、【window對象】：在window對象中的全部方法和屬性，都可以省略window關鍵字；window.alert();--> alert(); √
>>>window對象的經常使用方法：
一、alert()：彈出一個警告提示框：
二、prompt()：彈窗接受用戶的輸入：
三、confirm():彈出帶有"肯定""取消"按鈕的對話框，點擊按鈕返回true/false
四、close():關閉當前瀏覽器窗口。在個別瀏覽器中，只能關閉在當前腳本新打開的頁面(使用超連接、window.open()等方式打開的頁面)
五、打開一個新窗口
參數一：新窗口的地址；
參數二：新窗口的名字，並無什麼做用；
參數三：新窗口的各類屬性設置，"屬性1=值1，屬性2=值2,屬性3=值3，屬性4=值4"；
六、setTimeout：設置延時執行，只會執行一次；
setInterval：設置定時器，每隔n毫秒執行一次；
接受兩個參數：須要執行的function、毫秒數；
七、clearTimeout：清除延時器；
clearInterval：清除定時器；
* 使用方法:設置延時器或定時器時，可使用變量接受定時器ID；
* var id = setInterval；
* 調用clearIntertval，將id傳入，便可清除對應的定時器；
* clearIntertval(id);
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>點擊這個按鈕，實現window對象方法。</p>
<button onclick="close()">window.close</button> <button onclick="lopen()">window.open</button> <button onclick="setTimeout1()">setTimeout 設置延時器</button> <button onclick="setInterval1()">setInterval 設置定時器</button> <button onclick="clearsetInterval1()">清除延時器</button>
<script> function close(){ window.close(); } function lopen(){ window.open("http://www.baidu.com","baidu","width=1000px,height=600px,left=100px,top=50px"); } var setTimeoutID = 0; function setTimeout1(){ //setTimeout(function(){console.log("延時器成功執行");},3000); setTimeoutID = setTimeout(lopen,3000); } function clearTimeout1(){ clearTimeout(setTimeoutID); }</script> </body> </html>
10、JavaScript中的——DOM
1、HTML DOM (文檔對象模型)：
當網頁被加載時，瀏覽器會建立頁面的文檔對象模型（Document Object Model）。
HTML DOM 模型被構造爲對象的樹：
HTML DOM 樹：
經過可編程的對象模型，JavaScript 得到了足夠的能力來建立動態的 HTML。
- JavaScript 可以改變頁面中的全部 HTML 元素
- JavaScript 可以改變頁面中的全部 HTML 屬性
- JavaScript 可以改變頁面中的全部 CSS 樣式
- JavaScript 可以對頁面中的全部事件作出反應
【DOM樹節點】
DOM節點分爲三大類： 元素節點、 屬性節點、 文本節點；
文本節點、屬性節點屬於元素節點的子節點。操做時，均須要先取到元素節點，再操做子節點；
可使用getElement系列方法，取到元素節點。
【查看元素節點】
getElementById：經過id取到惟一節點。若是ID重名，只能取到第一個。 例如： var x=document.getElementById("xxx");
getElementsByName()： 經過name屬性 。 例如： var x=document.getElementsByClassName("xxx");
getElementsByTagName()： 經過標籤名 。 例如： var y=document.getElementsByTagName("p");
2、JavaScript HTML DOM - 改變 HTML：
一、改變 HTML 輸出流：
JavaScript 可以建立動態的 HTML 內容：
今天的日期是： Sun Oct 15 2017 22:53:40 GMT+0800 (中國標準時間)
在 JavaScript 中，document.write() 可用於直接向 HTML 輸出流寫內容。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> </title> </head> <body> <script> document.write(Date()); </script> </body> </html>
二、改變 HTML 內容
修改 HTML 內容的最簡單的方法時使用 innerHTML 屬性。
如需改變 HTML 元素的內容，請使用這個語法：
本例改變了 <p>元素的內容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
<p>以上段落經過腳本修改文本。</p>
</body>
</html>
三、改變 HTML 屬性
如需改變 HTML 元素的屬性，請使用這個語法：
本例改變了 <img> 元素的 src 屬性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img id="image" src="smiley.gif" width="160" height="120">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
<p>原圖片爲 smiley.gif,腳本將圖片修改成 landscape.jpg</p>
</body>
</html>
3、JavaScript HTML DOM - 改變CSS
一、改變 HTML 樣式
如需改變 HTML 元素的樣式，請使用這個語法：
下面的例子會改變 <p> 元素的樣式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
</body>
</html>
二、使用事件
HTML DOM 容許咱們經過觸發事件來執行代碼。
好比如下事件：
- 元素被點擊。
- 頁面加載完成。
- 輸入框被修改。
- ……
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 id="id1">個人標題 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
點我!</button>
</body>
</html>
4、JavaScript HTML DOM 事件
HTML DOM 使 JavaScript 有能力對 HTML 事件作出反應。
咱們能夠在事件發生時執行 JavaScript，好比當用戶在 HTML 元素上點擊時。
如需在用戶點擊某個元素時執行代碼，請向一個 HTML 事件屬性添加 JavaScript 代碼：
HTML 事件的例子：
- 當用戶點擊鼠標時
- 當網頁已加載時
- 當圖像已加載時
- 當鼠標移動到元素上時
- 當輸入字段被改變時
- 當提交 HTML 表單時
- 當用戶觸發按鍵時
一、HTML 事件屬性
如需向 HTML 元素分配 事件，您可使用事件屬性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>點擊按鈕執行 <em>displayDate()</em> 函數.</p>
<button onclick="displayDate()">點這裏</button>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date(); } </script> <p id="demo"></p> </body> </html>
二、使用 HTML DOM 來分配事件
HTML DOM 容許您使用 JavaScript 來向 HTML 元素分配事件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<head>
</head>
<body>
<p>點擊按鈕執行 <em>displayDate()</em> 函數.</p>
<button id="myBtn">點這裏</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()}; function displayDate(){ document.getElementById("demo").innerHTML=Date(); } </script> <p id="demo"></p> </body> </html>
三、onload 和 onunload 事件
onload 和 onunload 事件會在用戶進入或離開頁面時被觸發。
onload 事件可用於檢測訪問者的瀏覽器類型和瀏覽器版本，並基於這些信息來加載網頁的正確版本。
onload 和 onunload 事件可用於處理 cookie。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onload="checkCookies()">
<script>
function checkCookies(){
if (navigator.cookieEnabled==true){ alert("Cookies 可用") } else{ alert("Cookies 不可用") } } </script> <p>彈窗-提示瀏覽器 cookie 是否可用。</p> </body> </html>
四、onchange 事件
onchange 事件常結合對輸入字段的驗證來使用。
下面是一個如何使用 onchange 的例子。當用戶改變輸入字段的內容時，會調用 upperCase() 函數。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<head>
<script>
function myFunction(){
var x=document.getElementById("fname"); x.value=x.value.toUpperCase(); } </script> </head> <body> 輸入你的名字: <input type="text" id="fname" onchange="myFunction()"> <p>當你離開輸入框後，函數將被觸發，將小寫字母轉爲大寫字母。</p> </body> </html>
5、JavaScript HTML DOM EventListener
1、addEventListener() 方法：在用戶點擊按鈕時觸發監聽事件。
addEventListener() 方法用於向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不會覆蓋已存在的事件句柄。
你能夠向一個元素添加多個事件句柄。
你能夠向同個元素添加多個同類型的事件句柄，如：兩個 "click" 事件。
你能夠向任何 DOM 對象添加事件監聽，不只僅是 HTML 元素。如： window 對象。
addEventListener() 方法能夠更簡單的控制事件（冒泡與捕獲）。
當你使用 addEventListener() 方法時, JavaScript 從 HTML 標記中分離開來，可讀性更強， 在沒有控制HTML標記時也能夠添加事件監聽。
你可使用 removeEventListener() 方法來移除事件的監聽。
2、語法
第一個參數是事件的類型 (如 "click" 或 "mousedown").
第二個參數是事件觸發後調用的函數。
第三個參數是個布爾值用於描述事件是冒泡仍是捕獲。該參數是可選的。
3、向原元素添加事件句柄
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>該實例使用 addEventListener() 方法在按鈕中添加點擊事件。 </p>
<button id="myBtn">點我</button>
<script>
document.getElementById("myBtn").addEventListener("click", function(){ alert("Hello World!"); }); </script> </body> </html>
4、向同一個元素中添加多個事件句柄
addEventListener() 方法容許向同個元素添加多個事件，且不會覆蓋已存在的事件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>該實例使用 addEventListener() 方法向同個按鈕中添加兩個點擊事件。</p>
<button id="myBtn">點我</button>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction); x.addEventListener("click", someOtherFunction); function myFunction() { alert ("Hello World!") } function someOtherFunction() { alert ("函數已執行!") } </script> </body> </html>
5、向 Window 對象添加事件句柄
addEventListener() 方法容許你在 HTML DOM 對象添加事件監聽， HTML DOM 對象如： HTML 元素, HTML 文檔, window 對象。或者其餘支出的事件對象如: xmlHttpRequest 對象。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>實例在 window 對象中使用 addEventListener() 方法。</p>
<p>嘗試重置瀏覽器的窗口觸發 "resize" 事件句柄。</p>
<p id="demo"></p>
<script>
window.addEventListener("resize", function(){ document.getElementById("demo").innerHTML = Math.random(); }); </script> </body> </html>
6、傳遞參數
當傳遞參數值時，使用"匿名函數"調用帶參數的函數：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>實例演示了在使用 addEventListener() 方法時如何傳遞參數。</p>
<p>點擊按鈕執行計算。</p>
<button id="myBtn">點我</button>
<p id="demo"></p>
<script>
var p1 = 5;
var p2 = 7; document.getElementById("myBtn").addEventListener("click", function() { myFunction(p1, p2); }); function myFunction(a, b) { var result = a * b; document.getElementById("demo").innerHTML = result; } </script> </body> </html>
7、事件捕獲和事件冒泡：
一、事件冒泡
當某DOM元素觸發一種事件時，會從當前節點開始，逐級往上觸發其祖先節點的同類型事件，直到DOM根節點；
>>>什麼狀況下會產生事件冒泡？
①DOM0模型綁定事件，所有都是冒泡；
②IE8以前，使用attachEvent()綁定的事件，所有是冒泡；
③其餘瀏覽器，使用addEventLinstener()添加事件，當第三個參數省略或者爲false時，爲事件冒泡；
二、事件捕獲：當某DOM元素觸發一種事件時，會從文檔根節點開始，逐漸向下觸發其祖先節點的同類型事件，直到 該節點自身；
>>>什麼狀況下會產生事件捕獲？
①使用addEventLinstener()添加事件，當第三個參數爲true時，爲事件捕獲；
三、addEventListener() 方法能夠指定 "useCapture" 參數來設置傳遞類型：
默認值爲 false, 即冒泡傳遞，當值爲 true 時, 事件使用捕獲傳遞。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
background-color: coral; border: 1px solid; padding: 50px; } </style> </head> <body> <p>實例演示了在添加不一樣事件監聽時，冒泡與捕獲的不一樣。</p> <div id="myDiv"> <p id="myP">點擊段落，我是冒泡。</p> </div><br> <div id="myDiv2"> <p id="myP2">點擊段落，我是捕獲。 </p> </div> <script> document.getElementById("myP").addEventListener("click", function() { alert("你點擊了 P 元素!"); }, false); document.getElementById("myDiv").addEventListener("click", function() { alert(" 你點擊了 DIV 元素 !"); }, false); document.getElementById("myP2").addEventListener("click", function() { alert("你點擊了 P2 元素!"); }, true); document.getElementById("myDiv2").addEventListener("click", function() { alert("你點擊了 DIV2 元素 !"); }, true); </script> </body> </html>
6、removeEventListener() 方法
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
background-color: coral; border: 1px solid; padding: 50px; } </style> </head> <body> <p>實例演示了在添加不一樣事件監聽時，冒泡與捕獲的不一樣。</p> <div id="myDiv"> <p id="myP">點擊段落，我是冒泡。</p> </div><br> <div id="myDiv2"> <p id="myP2">點擊段落，我是捕獲。 </p> </div> <script> document.getElementById("myP").addEventListener("click", function() { alert("你點擊了 P 元素!"); }, false); document.getElementById("myDiv").addEventListener("click", function() { alert(" 你點擊了 DIV 元素 !"); }, false); document.getElementById("myP2").addEventListener("click", function() { alert("你點擊了 P2 元素!"); }, true); document.getElementById("myDiv2").addEventListener("click", function() { alert("你點擊了 DIV2 元素 !"); }, true); </script> </body> </html>
7、JavaScript HTML DOM 元素(節點)
一、建立新的 HTML 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另外一個段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("這是一個新段落。"); para.appendChild(node); var element=document.getElementById("div1"); element.appendChild(para); </script> </body> </html>
這段代碼建立新的<p> 元素：
如需向 <p> 元素添加文本，您必須首先建立文本節點。這段代碼建立了一個文本節點：
而後您必須向 <p> 元素追加這個文本節點：
最後您必須向一個已有的元素追加這個新元素。
這段代碼找到一個已有的元素：
如下代碼在已存在的元素後添加新元素：
二、刪除已有的 HTML 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另外一個段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1"); parent.removeChild(child); </script> </body> </html>
這個 HTML 文檔含有擁有兩個子節點（兩個 <p> 元素）的 <div> 元素：
<p id="p1">這是一個段落。</p>
<p id="p2">這是另外一個段落。</p>
</div>
找到 id="div1" 的元素：
找到 id="p1" 的 <p> 元素：
從父元素中刪除子元素：
11、JavaScript中的數組-Array
數組是在內容空間中連續存儲的一組有序數據的集合。 元素在數組中的順序，成爲下標。可使用下標訪問數組的每一個元素。
一、建立一個數組
① 使用字面量聲明：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]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var i;
var mycars = new Array(); mycars[0] = "Jack"; mycars[1] = "Alice"; mycars[2] = "Tom"; for (i=0;i<mycars.length;i++){ document.write(mycars[i] + "<br />"); } </script> </body> </html>
2、數組中的經常使用方法
① join():將數組用指定分隔符連接爲字符串。單參數爲空時，默認逗號分隔。
② contact():【原數組不會被改變】 將數組，與兩個或多個數組的值連接爲新數組；
③ push():數組最後增長一個，unshift()數組開頭增長一個。-返回新數組的長度
pop() 數組最後刪除一個，shift() 數組開頭刪除一個。-返回被刪除的值
④ reverse():【原數組被改變】,將數組反轉，倒序輸出；
⑤ slice():【原數組不會被改變】 截取數組中的某一部分，並返回截取的新數組；
⑥ sort()：【原數組被改變】將數組進行排列
⑦ indexof(value,index):返回數組中第一個value值所在的下標，若是沒有找到返回-1；
⑧ forEach():專門用於循環遍歷數組。接收一個回調函數，回調函數接收兩個參數，第一個參數爲該數組的 每一項值，第二個參數爲下標；
⑨ map():數組映射，使用方式與foreash()使用方式相同。不一樣的是，map能夠有返回值，表示將原數組的每一個值
....................簡單介紹幾個經常使用的，若有遺漏請見諒。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var arr = new Array(1,2,3,4);
delete arr[1]； arr.pop(); arr.shift(); arr.unshift(); arr.unshift(); var str = arr.join("-"); var arr1 =arr.concat(["hah","heh","heihei"]); arr.reverse(); arr.sort(function(a,b){ if(a>b){ return 1; }else if(a<b){ return -1; }else{ return 0; } return a-b;//升序排列 }); var index = arr.indexOf(6,2); arr.forEach(function(item,index){ console.log(item); }); var arr1 = arr.map(function(item,index){ console.log(item); return item - 1 ; }); </script>
二、建立一個新方法
原型是JavaScript全局構造函數。它能夠構建新Javascript對象的屬性和方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="demo">單擊按鈕建立一個數組,調用 ucase（）方法, 並顯示結果。</p>
<button onclick="myFunction()">點我</button>
<script>
Array.prototype.myUcase=function(){ for (i=0;i<this.length;i++){ this[i]=this[i].toUpperCase(); } } function myFunction(){ var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.myUcase(); var x=document.getElementById("demo"); x.innerHTML=fruits; } </script> </body> </html>
3、結束語
因爲時間關係，內容可能不夠完整，還有許多重點的乾貨沒能及時整理，但願各位見諒，必定抽出時間補充完整。
- 1. 關於原生 JS
- 2. 擴展javascript原生對象
- 3. 原生JS常見對象
- 4. JavaScript原生對象-Object對象
- 5. 對 原生 js 的學習和積累
- 6. 原生js與jq對ajax的實現
- 7. 原生js對cookie的增刪改查
- 8. 原生JS與jQuery對AJAX的實現
- 9. 基於原生Javascript的無縫輪播
- 10. 基於面向對象的圖片輪播（js原生代碼）
- 更多相關文章...
- • MyBatis的工作原理 - MyBatis教程
- • JavaScript 指南 - 網站建設指南
- • ☆基於Java Instrument的Agent實現
- • 適用於PHP初學者的學習線路和建議
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 關於原生 JS
- 2. 擴展javascript原生對象
- 3. 原生JS常見對象
- 4. JavaScript原生對象-Object對象
- 5. 對 原生 js 的學習和積累
- 6. 原生js與jq對ajax的實現
- 7. 原生js對cookie的增刪改查
- 8. 原生JS與jQuery對AJAX的實現
- 9. 基於原生Javascript的無縫輪播
- 10. 基於面向對象的圖片輪播（js原生代碼）