JS事件、Bom和Dom對象

要內(nèi)容

事件

事件 (Event) 是 JavaScript 應(yīng)用跳動的心臟，進(jìn)行交互，使網(wǎng)頁動起來。當(dāng)我們與瀏覽器中 Web 頁面進(jìn)行某些類型的交互時，事件就發(fā)生了。事件可能是用戶在某些內(nèi)容上的點擊、鼠標(biāo)經(jīng)過某個特定元素或按下鍵盤上的某些按鍵。事件還可能是 Web 瀏覽器中發(fā)生的事情，比如說某個 Web 頁面加載完成，或者是用戶滾動窗口或改變窗口大小。

? 通過使用 JavaScript ，你可以監(jiān)聽特定事件的發(fā)生，并規(guī)定讓某些事件發(fā)生以對這些事件做出響應(yīng)。

作用

（1）驗證用戶輸入的數(shù)據(jù)。
（2）增加頁面的動感效果。
（3）增強用戶的體驗度

事件中的幾個名詞

事件源: 誰觸發(fā)的事件
事件名: 觸發(fā)了什么事件
事件監(jiān)聽: 誰管這個事情，誰監(jiān)視？
事件處理:發(fā)生了怎么辦

例如

闖紅燈		事件源:車 ;   事件名: 闖紅燈;    監(jiān)聽：攝像頭、交警 ;     處理:扣分罰款 
單擊按鈕   事件源:按鈕;   事件名: 單擊;     監(jiān)聽:窗口 ;             處理:執(zhí)行函數(shù)

? 當(dāng)我們用戶在頁面中進(jìn)行的點擊動作，鼠標(biāo)移動的動作，網(wǎng)頁頁面加載完成的動作等，都可以稱之為事件名稱，即：click、mousemove、load 等都是事件名稱，具體的執(zhí)行代碼處理，響應(yīng)某個事件的函數(shù)。

<body onload="loadWindow();"></body>
<script>
	function loadWindow(){
     	alert("加載窗體");
	}
</script>

事件類型

? JavaScript可以處理的事件類型為：鼠標(biāo)事件、鍵盤事件、HTML事件。

? http://www.w3school.com.cn/tags/html_ref_eventattributes.asp 用+查

? Window 事件屬性：針對 window 對象觸發(fā)的事件（應(yīng)用到標(biāo)簽）

? Form 事件：由 HTML 表單內(nèi)的動作觸發(fā)的事件（應(yīng)用到幾乎所有 HTML 元素，但最常用在 form 元素中）

? Keyboard 事件 : 鍵盤事件

? Mouse 事件：由鼠標(biāo)或類似用戶動作觸發(fā)的事件

? Media 事件：由媒介（比如視頻、圖像和音頻）觸發(fā)的事件（適用于所有 HTML 元素，但常見于媒介元素中，比如、、、以及）

? 幾個常用的事件：

? onclick 、onblur 、onfocus 、onload 、onchange

? onmouseover、onmouseout、onkeyup、onkeydown

onload：當(dāng)頁面或圖像加載完后立即觸發(fā)

onblur：元素失去焦點

onfocus：元素獲得焦點

onclick：鼠標(biāo)點擊某個對象

onchange：用戶改變域的內(nèi)容

onmouseover：鼠標(biāo)移動到某個元素上

onmouseout：鼠標(biāo)從某個元素上離開

onkeyup：某個鍵盤的鍵被松開

onkeydown：某個鍵盤的鍵被按下

事件流和事件模型

? 我們的事件最后都有一個特定的事件源，暫且將事件源看做是HTML的某個元素，那么當(dāng)一個HTML元素產(chǎn)生一個事件時，該事件會在元素節(jié)點與根節(jié)點之間按特定的順序傳播，路徑所經(jīng)過的節(jié)點都會受到該事件，這個傳播過程稱為DOM事件流。

? 事件順序有兩種類型：**事件捕獲 **和 事件冒泡。

? 冒泡和捕獲其實都是事件流的不同表現(xiàn)，這兩者的產(chǎn)生是因為IE和Netscape兩個大公司完全不同的事件流概念產(chǎn)生的。（事件流：是指頁面接受事件的順序）IE的事件流是事件冒泡，Netscape的事件流是事件捕獲流。

事件冒泡

? IE的事件流叫做事件冒泡，即事件開始時由最具體的元素接受，然后逐級向上傳播到較為不具體的節(jié)點（文檔）。例如下面的：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JavaScript</title>
	</head>
	<body>
		<div id="myDiv">Click me</div>
	</body>
</html>

? 如果點擊了頁面中的

元素，那么這個click事件會按照如下順序傳播：

? 1、

? 2、

? 3、

? 4、document

? 也就是說，click事件首先在div元素上發(fā)生，而這個元素就是我們單擊的元素。然后，click事件沿DOM樹向上傳播，在每一級節(jié)點上都會發(fā)生，直到傳播到document對象。

? 所有現(xiàn)代瀏覽器都支持事件冒泡，但在具體實現(xiàn)上還是有一些差別。

事件捕獲

? Netscape提出的另一種事件流叫做事件捕獲，事件捕獲的思想是不太具體的節(jié)點應(yīng)該更早接收到事件，而最具體的節(jié)點應(yīng)該最后接收到事件。事件捕獲的用意在于在事件到達(dá)預(yù)定目標(biāo)之前捕獲它。還以前面的例子為例。那么單擊

元素就會按下列順序觸發(fā)click事件：

? 1、document

? 2、

? 3、

? 4、

? 在事件捕獲過程中，document對象首先接收到click事件，然后沿DOM樹依次向下，一直傳播到事件的實際目標(biāo)，即

元素。

? 雖然事件捕獲是Netscape唯一支持的事件流模式，但很多主流瀏覽器目前也都支持這種事件流模型。盡管“DOM2級事件”規(guī)范要求事件應(yīng)該從document對象開始時傳播，但這些瀏覽器都是從window對象開始捕獲的。

DOM 事件流

? “DOM2級事件”規(guī)定的事件流包括三個階段：事件捕獲階段、處于目標(biāo)階段和事件冒泡階段。首先發(fā)生的是事件捕獲階段，為截獲事件提供了機會。然后是實際的目標(biāo)接收到事件。最后一個階段是冒泡階段，可以在這個階段對事件做出響應(yīng)。

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-8WOxp342-1608883565334)(/圖片1dfgh.png)]

事件處理程序

? 事件就是用戶或瀏覽器自身執(zhí)行的某種動作。例如click、load和mouseover都是事件的名字，而響應(yīng)某個事件的函數(shù)就叫做事件處理程序（或事件偵聽器）。事件處理程序的名字以“on”開頭，因此click事件的事件處理程序就是onclick，為事件指定處理程序的方式有好幾種。

HTML 事件處理程序

? 某個元素支持的每種事件，都可以用一個與相應(yīng)事件處理程序同名的HTML特性來指定。這個特性的值應(yīng)該是能夠執(zhí)行的JavaScript代碼：

<input type="button" value="Press me" onclick="alert('thanks');" />

? 這樣做有一些缺點，例如耦合度過高，還可能存在時差問題（當(dāng)用戶點擊按鈕時，處理函數(shù)還未加載到，此時處理函數(shù)是單獨寫的一段js代碼），而且在不同的瀏覽器上可能會有不同的效果。

DOM0 級事件處理程序

? 通過JavaScript指定事件處理程序的傳統(tǒng)方式，就是將一個函數(shù)賦值給一個事件處理程序?qū)傩浴＿@種方式被所有現(xiàn)代瀏覽器所支持。這種方式首先必須取得一個要操作的對象的引用，每個元素都有自己的事件處理程序?qū)傩裕@些屬性通常全都小寫，例如onclick，然后將這種屬性的值設(shè)為一個函數(shù)，就可以指定事件處理程序了。例如：

<body>
    <button id="myBtn">按鈕</button>
    <script type="text/javascript">
        var btn=document.getElementById('myBtn');
        btn.onclick=function(){
            console.log('you click a button');
        }
    </script>
</body>

? 以這種方式添加的事件處理程序會在事件流的冒泡階段被處理。而且，只能為同一個元素的同一個事件設(shè)定一個處理程序（覆蓋），也可以通過刪除DOM0級方法指定的事件處理程序，只要將屬性值設(shè)為null即可：

btn.onclick=null;

DOM2 級事件處理程序

? “DOM2級事件”定義了兩個方法，用于處理指定和刪除事件處理程序的操作：addEventListener()和removeEventListener()。所有DOM節(jié)點都包含這兩個方法，并且他們都接受3個參數(shù)：要處理的事件名、作為事件處理程序的函數(shù)和一個布爾值。最后這個布爾值參數(shù)如果是true，則表示在捕獲階段調(diào)用事件處理程序；如果是false則表示在冒泡階段調(diào)用事件處理程序。

<body>
    <button id="myBtn">按鈕</button>
    <script type="text/javascript">
        var btn=document.getElementById('myBtn')
        btn.addEventListener('click',function(){
            alert('you add a eventListener by DOM2')
        },false)

        btn.addEventListener('click',function(){
            alert('you add a eventListener by DOM2 again')
        },false)

        function thread(){
            alert('you add a eventListener by DOM2 第三次')
        }
        btn.addEventListener('click',thread,false)
        btn.removeEventListener('click',thread,false)
    </script>
</body>

? 這種方式可以為同一個元素的同一個事件添加多個處理函數(shù)。還可刪除事件處理函數(shù)，注意，在刪除的時候，不能刪除匿名處理函數(shù)。

本節(jié)作業(yè)

1. 常用的幾種事件
2. 綁定事件的幾種方式

BOM對象

? BOM的核心對象是window，它表示瀏覽器的一個實例。window對象有雙重角色，它既是通過JavaScript訪問瀏覽器窗口的一個接口，又是ECMAScript規(guī)定的Global對象。這意味著在網(wǎng)頁中定義的任何一個對象、變量和函數(shù)，都以window作為其Global對象，因此有權(quán)訪問parseInt()等方法。如果頁面中包含框架，則每個框架都擁有自己的window對象，并且保存在frames集合中。在frames集合中，可以通過數(shù)值索引（從0開始，從左至右，從上到下）或者框架的名稱來訪問相應(yīng)的window對象。

Window對象方法

系統(tǒng)對話框

? 瀏覽器通過（實際是window對象的方法）alert()、confirm()、prompt()方法可以調(diào)用系統(tǒng)對話框向用戶顯示消息。

（1）消息框:alert， 常用。
    alert() 方法用于顯示帶有一條指定消息和一個 OK 按鈕的警告框。
（2）輸入框:prompt，返回提示框中的值。
    prompt() 方法用于顯示可提示用戶進(jìn)行輸入的對話框。
    參數(shù)（可選）：
       第一個參數(shù)：要在對話框中顯示的純文本。
 	   第二個參數(shù)：默認(rèn)的輸入文本。
（3）確認(rèn)框:confirm，返回 true/false.
confirm() 方法用于顯示一個帶有指定消息和 OK 及取消按鈕的對話框。

<style type="text/css">
	#aa{
		border: 1px solid red;
		height: 100px;
	}
</style>
<body>
	<div id="aa">
		This is a div
	</div>
	<button onclick="testAlert();">警告</button>
	<button onclick="testComfirm();">修改</button>
	<button onclick="testPrompt();">輸入</button>
	<script type="text/javascript">
		// 1.警告框
		function testAlert(){
			alert('警告框！！！');
		}			
	
        /*
		 2.輸入框
		 	返回值：輸入的內(nèi)容
		 * */
		function testPrompt(){
			var item=prompt('請輸入年齡'); // item得到輸入的值
			// console.log(item)
			// alert(prompt('請輸入年齡',18)); // 將輸入的值輸出
		}
        
		/*
		 3.確認(rèn)框
		 	返回值：boolean（true|false）
		 * */
		function testComfirm(){
			var result=confirm('真的要改嗎？');
			if(result){
				var ele=document.getElementById("aa");
				ele.style.color="red";
				ele.innerHTML="<span>fdsfsd</span>";
			}else{
				alert("沒事別瞎點。。。");
			}
		}
	</script>
</body>

打開窗口

? window.open()方法既可以導(dǎo)航到一個特定的URL也可以用來打開一個新的窗口

<script type="text/javascript">
function openBaidu(){
	window.open('http://www.baidu.com','_self'); // _self、_blank等
	// window.open();		//空白窗口
}
</script>
<input type="button" name="open" value="百度" onclick='openBaidu();' />

關(guān)閉窗口

? window.close()：關(guān)閉窗口。

? 例：點擊按鈕關(guān)閉當(dāng)前窗口。

<input type="button" value="關(guān)閉窗口" onclick="window.close();" />

時間函數(shù)

setTimeout()

? setTimeout() : 在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達(dá)式。返回一個唯一的標(biāo)識；也可以通過返回的標(biāo)識cliearTimeout(id)：來清除指定函數(shù)的執(zhí)行。

var id=setTimeout(function,times);

clearTimeout(id);

示例：

<script type="text/javascript">
	// 延遲3 秒后出現(xiàn) alert
	function hello() { 
		  alert("對不起, 要你久候"); 
	}
	setTimeout("hello()", 3000);
    
    // 時間顯示器
	var timeout;
    function init(){
		   // 拿到當(dāng)前時間
		   var date=new Date();
		   var time=date.toLocaleString();
		   // 拿到相應(yīng)對象
	  	   var h1=document.getElementById('h1');
		   // 根據(jù)需求添加樣式
		   if(0==date.getSeconds()){	// 當(dāng)時間的秒數(shù)變成0時，顯示紅色字體
			   h1.innerHTML='<span style="color:red">' + time + '</span>';
		   } else {
			   h1.innerHTML=time;
		   }
		   /*
		    * 	定時操作，只執(zhí)行一次
		 	    第一個參數(shù)：執(zhí)行的方法；第二個參數(shù)：定時，單位是毫秒
		    * */
		    setTimeout(init,1000);   // 等多少時間來執(zhí)行
	}
	// window.setTimeout(init,1000);// 只執(zhí)行一次		
	// 停止操作
	function stopShow () {
        clearTimeout(timeout);
    }
</script>
<body onload="init();">
	<h1 id="h1"></h1>
    <button onclick="stopShow()">時間停止</button>
</body>

? 在times毫秒后執(zhí)行function指定的方法，執(zhí)行之前也可以取消

setInteval()

? setInterval():可按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達(dá)式，也可根據(jù)返回的標(biāo)識用來結(jié)束。該方法會不停地調(diào)用函數(shù)，直到 clearInterval() 被調(diào)用或窗口被關(guān)閉。

var id=setInterval(function,times);

clearInterval(id);

function test(){
	console.log(".....");
}
// window是一個全局對象，通過全局對象調(diào)用setInterval()函數(shù)
window.setInterval(test,1000);

history對象

? history 對象是歷史對象。包含用戶（在瀏覽器窗口中）訪問過的 URL。history 對象是 window 對象的一部分，可通過 window.history 屬性對其進(jìn)行訪問。

? history對象的屬性：length，返回瀏覽器歷史列表中的 URL 數(shù)量。

? history對象的方法：

? back()：加載 history 列表中的前一個 URL。

? forward()：加載歷史列表中的下一個 URL。當(dāng)頁面第一次訪問時，還沒有下一個url。

? go(number|URL): URL 參數(shù)使用的是要訪問的 URL。而 number 參數(shù)使用的是要訪問的 URL 在 History 的 URL 列表中的相對位置。go(-1)，到上一個頁面

013-history.html

<body>
	<a href="013-history-a.html">013-history-a.html</a>
	<h1>我是第一個頁面</h1>
    <input type="button"  value="前進(jìn)" onclick="window.history.forward();" />
    <script>
        console.log(window.history);
    </script>
</body>

013-history-a.html

<body>
	<a href="013-history-b.html">013-history-b.html</a>
	<h1>我是A頁面</h1>
	<input type="button" value="后退"  onclick="window.history.back();"/>
</body>

013-history-b.html

<body>
	  <h1>我是B頁面</h1>
	  <input type="button" value="第一個頁面" onclick="window.history.go(-2);"/>
	  <input type="button" value="后退"  onclick="window.history.back();"/>
</body>

location對象

? location 對象是window對象之一，提供了與當(dāng)前窗口中加載的文檔有關(guān)的信息，還提供了一些導(dǎo)航功能。也可通過 window.location 屬性來訪問。

? location 對象的屬性 href：設(shè)置或返回完整的 URL

? location 對象的方法

? reload()：重新加載當(dāng)前文檔。

? replace()：用新的文檔替換當(dāng)前文檔。

<script type="text/javascript">
	function openBaidu(){
        // 沒有歷史記錄,用新的文檔替換當(dāng)前文檔
		// window.location.replace("http://www.baidu.com");
		// console.log(window.location.href); // 獲取完整的url
		window.location.href="http://www.baidu.com";
	}
</script>
<body>
	<input type="text"  value="" />
	<input type="button" value="刷新" onclick="window.location.reload();" />
	<input type="button"  value="百度" onclick="openBaidu();" />
</body>

本節(jié)作業(yè)

實現(xiàn)時間計時功能
JS的跳轉(zhuǎn)方式

DOM對象

? DOM：Document Object Model 文檔對象模型

? 要實現(xiàn)頁面的動態(tài)交互效果，bom 操作遠(yuǎn)遠(yuǎn)不夠，需要操作 html 才是核心。如何操作 htm，就是 DOM。簡單的說，dom 提供了用程序動態(tài)控制 html 接口。DOM即文檔對象模型描繪了一個層次化的節(jié)點樹，運行開發(fā)人員添加、移除和修改頁面的某一部分。dom 處于javascript 的核心地位上。

? 每個載入瀏覽器的 HTML 文檔都會成為 Document 對象。Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進(jìn)行訪問。Document 對象是 Window 對象的一部分，可通過 window.document 屬性對其進(jìn)行訪問。

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-BShAnTK7-1608883565338)(/圖片1trj.png)]

節(jié)點

? 加載 HTML 頁面時，Web 瀏覽器生成一個樹型結(jié)構(gòu)，用來表示頁面內(nèi)部結(jié)構(gòu)。DOM 將這種樹型結(jié)構(gòu)理解為由節(jié)點組成，組成一個節(jié)點樹。對于頁面中的元素，可以解析成以下幾種類型的節(jié)點：

節(jié)點類型HTML內(nèi)容例如文檔節(jié)點文檔本身整個文檔 document元素節(jié)點所有的HTML元素、、

屬性節(jié)點HTML元素內(nèi)的屬性id、href、name、class文本節(jié)點元素內(nèi)的文本hello注釋節(jié)點HTML中的注釋

? html --> 文檔節(jié)點

? div --> 元素節(jié)點

? title --> 屬性節(jié)點

? 測試 Div --> 文本節(jié)點

<html>
    <head>
        <title>樹!樹!到處都是樹!</title>
    </head>
    <body>
      <div title="屬性節(jié)點">測試 Div</div>
    </body>
</html>

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-AVMijlup-1608883565345)(/圖片1fdgfh.png)]

操作元素的節(jié)點

? 當(dāng)HTML文檔在被解析為一顆DOM樹以后，里面的每一個節(jié)點都可以看做是一個一個的對象，我們稱為DOM對象，對于這些對象，我們可以進(jìn)行各式各樣的操作，查找到某一個或者一類節(jié)點對象，可以創(chuàng)建某種節(jié)點對象，可以在某個位置添加節(jié)點對象，甚至可以動態(tài)地刪除節(jié)點對象，這些操作可以使我們的頁面看起來有動態(tài)的效果，后期結(jié)合事件使用，就能讓我們的頁面在特定時機、特定的事件下執(zhí)行特定的變換。

獲取節(jié)點

? 在進(jìn)行增、刪、改的操作時，都需要指定到一個位置，或者找到一個目標(biāo)，此時我們就可以通過Document對象提供的方法，查找、定位某個對象（也就是我們說的節(jié)點）。

? 注意：操作 dom 必須等節(jié)點初始化完畢后，才能執(zhí)行。

? 處理方式兩種:

? （1）把 script 調(diào)用標(biāo)簽移到html末尾即可；

? （2）使用onload事件來處理JS，等待html 加載完畢再加載 onload 事件里的 JS。

window.onload=function () { //預(yù)加載 html 后執(zhí)行};

? 獲取方式如下：

方法描述getElementById()根據(jù)id獲取dom對象，如果id重復(fù)，那么以第一個為準(zhǔn)getElementsByTagName()根據(jù)標(biāo)簽名獲取dom對象數(shù)組getElementsByClassName()根據(jù)樣式名獲取dom對象數(shù)組getElementsByName()根據(jù)name屬性值獲取dom對象數(shù)組，常用于多選獲取值

<body>
	<p id="p1" class="para">這是一個段落<span>文本</span></p>
	<p id="p1" class="para">這又是一個段落</p>
	<input type="text" name="txt" />
	<input type="checkbox" name="hobby" value="游泳" />游泳
	<input type="checkbox" name="hobby" value="籃球" />籃球
	<input type="checkbox" name="hobby" value="足球" />足球
	<hr />
	<a href="javascript：void(0)" onclick="testById()">按照id獲取</a>
	<a href="javascript：void(0)" onclick="testByName()">按照name獲取</a>
	<a href="javascript：void(0)" onclick="testByTagName()">按照標(biāo)簽名獲取</a>
	<a href="javascript：void(0);" onclick="testByClass();">按照class獲取</a>
</body>

? 說明：href=“javascript：void(0)”：偽協(xié)議，表示不執(zhí)行跳轉(zhuǎn)，而執(zhí)行指定的點擊事件。

<script type="text/javascript">
	// 按照id獲取元素
	function testById() {
		// 返回單個對象
		var p=document.getElementById("p1");
		console.log(p);
		// 表示獲取元素開始標(biāo)簽和結(jié)束標(biāo)簽之間的html結(jié)構(gòu)
		console.log(p.innerHTML); 			
		console.log(p.innerText); // 表示獲取標(biāo)簽之間的普通文本
	}

	// 按照name獲取元素
	function testByName() {
		// 對象數(shù)組
		var ho=document.getElementsByName("hobby");
		console.log(ho);
		for(var i=0; i <=ho.length - 1; i++) {
			console.log(ho[i].value);
		}
	}

	// 按照標(biāo)簽名獲取元素
	function testByTagName() {
		// 對象數(shù)組
		var inputArr=document.getElementsByTagName("input");
		for(var i=0; i < inputArr.length; i++) {
			if(inputArr[i].type=="text") {
				console.log("text類型");
			} else if(inputArr[i].type=="checkbox") {
				if(inputArr[i].checked) {
					console.log(inputArr[i].value);
				}
			}
		}
	}

	// 按照class屬性獲取元素
	function testByClass() {
		// 對象數(shù)組
		var ps=document.getElementsByClassName("para");
		console.log(ps[0].innerHTML);
		ps[0].innerHTML +="這是一段新的文本";
	}
</script>

創(chuàng)建節(jié)點和插入節(jié)點

? 很多時候我們想要在某個位置插入一個新的節(jié)點，此時我們首先需要有一個節(jié)點存在，可以通過以下幾種方式創(chuàng)建新節(jié)點。

創(chuàng)建節(jié)點

方法描述createElement()創(chuàng)建一個新的節(jié)點，需要傳入節(jié)點的標(biāo)簽名稱，返回創(chuàng)建的元素對象createTextNode()創(chuàng)建一個文本節(jié)點，可以傳入文本內(nèi)容innerHTML也能達(dá)到創(chuàng)建節(jié)點的效果，直接添加到指定位置了

插入節(jié)點

方法描述write()將任意的字符串插入到文檔中appendChild()向元素中添加新的子節(jié)點，作為最后一個子節(jié)點insertBefore()向指定的已有的節(jié)點之前插入新的節(jié)點newItem：要插入的節(jié)點exsitingItem：參考節(jié)點需要參考父節(jié)點

<button onclick="add()">添加段落</button>
<div id="container"></div>
		
<script type="text/javascript">
	function add(){
	    var container=document.getElementById('container')
	    var paragraph=document.createElement('p');
	    var txt=document.createTextNode('hello')
	    paragraph.appendChild(txt)
	    container.appendChild(paragraph)
}
</script>

添加 “段落、圖片、文本框、選項”

<body>
	<button onclick="addPara();">添加段落</button>
	<button onclick="addImg();">添加圖片</button>
	<button onclick="addTxt();">添加文本框</button>
	<button onclick="addOptions()">添加選項</button> 
	<select name="music">
		<option value="-1">你心內(nèi)的一首歌</option>
		<option value="0">南山南</option>
		<option value="1">喜歡你</option>
	</select>
	<hr />
	<div id="container"></div>
</body>

<script type="text/javascript">	
	// 添加p節(jié)點
	function addPara(){
		// 獲取容器
		var container=document.getElementById("container");
		// 創(chuàng)建段落<p></p>
		var p=document.createElement('p');  	
		// 第一種方式
		// 創(chuàng)建文本節(jié)點
		var txt=document.createTextNode("以后的你會感謝現(xiàn)在努力的你");
		// 將txt節(jié)點追加到p節(jié)點中
		p.appendChild(txt);
		// 將p節(jié)點追加到container節(jié)點中
		container.appendChild(p);		
		/*
		// 第二種方式
		// 向p節(jié)點中添加內(nèi)容
		p.innerHTML="以后的你會感謝現(xiàn)在努力的你";
		// 將p節(jié)點追加到container節(jié)點中
		container.appendChild(p);
		*/	
		/*
		// 第三種方式
		// 將字符串類型的p標(biāo)簽內(nèi)容添加到container中，不會添加多次
		var str="<p>以后的你會感謝現(xiàn)在努力的你</p>";
		container.innerHTML=str;
		*/
	}	
    
	// 添加圖片
	function addImg(){
		// 創(chuàng)建圖片
		var img=document.createElement("img") ;			
		/*
		// 設(shè)置屬性第一種方式
		// 設(shè)置img標(biāo)簽的src屬性
		// img.src="http://www.baidu.com/img/bd_logo1.png";
		*/		
		// 設(shè)置屬性第二種方式
		// setAttribute() 方法添加指定的屬性，并為其賦指定的值。
		// 設(shè)置img的src屬性
		img.setAttribute('src','http://www.baidu.com/img/bd_logo1.png');
		img.style.width='300px';		
		img.style.height='200px';			
		// 獲取容器
		var container=document.getElementById("container");
		// 將img節(jié)點追加到container中。
		container.appendChild(img);
	}	
    
	// 添加文本框
	function addTxt(){
		// 創(chuàng)建文本框
		var txt=document.createElement("input");	
		/*
		// 設(shè)置類型第一種方式
		txt.type="text"; 
		txt.value="添加成功";
		*/
		// 設(shè)置類型第二種方式
		txt.setAttribute('type', 'text');
		txt.setAttribute('value', '添加成功');
		/*
		 * txt.type='password'
		 * txt.value='123'
		 */
		// 獲取容器
		var container=document.getElementById("container");
		// 將txt節(jié)點追加到container中。
		container.appendChild(txt);
	}
    
	// 添加下拉框的選項			
	function addOptions(){
		// 第一種方式
		/*
		// 創(chuàng)建下拉項
		var option=document.createElement("option") ;
		option.value="2" ;
		option.text="油菜花" ;
		// 獲取下拉框
		var sel=document.getElementsByTagName("select")[0];
		// 添加 下拉項 
		sel.appendChild(option);
		*/					
		// 第二種方式:
		var option=document.createElement("option") ;
		option.value="2" ;
		option.text="不該" ;
		// 獲取下拉框
		var sel=document.getElementsByTagName("select")[0];
		// 添加下拉項
		sel.options.add(option);		
		// 第三種方式: 添加下拉項
		var sel=document.getElementsByTagName("select")[0];
		sel.innerHTML +="<option value='2'>英雄</option>" ;
	}			
</script>

間接查找節(jié)點

方法|屬性描述childNodes返回元素的一個子節(jié)點的數(shù)組firstChild返回元素的第一個子節(jié)點lastChild返回元素的最后一個子節(jié)點nextSibling返回元素的下一個兄弟節(jié)點parentNode返回元素的父節(jié)點previousSibling返回元素的上一個兄弟節(jié)點

刪除節(jié)點

方法|屬性描述removeChild()從元素中移除子節(jié)點

<script type="text/javascript">
	function delNode(){
		var programmer=document.getElementById("programmer");
		// 從父元素中刪除節(jié)點，獲取要刪除對象的父元素，然后從父元素中刪除該對象
		programmer.parentNode.removeChild(programmer);
	}
</script>
<body>
	<span id="programmer">程序猿</span>
	<a href="javascript：void(0)" onclick="delNode();">刪除</a>
</body>

表單

? 表單是我們頁面向后臺傳輸數(shù)據(jù)的一種非常常見的方式，在進(jìn)行數(shù)據(jù)發(fā)送（請求發(fā)出）之前，我們應(yīng)該現(xiàn)在頁面進(jìn)行一系列數(shù)據(jù)合法性的驗證，節(jié)省不必要的錯誤數(shù)據(jù)的傳輸，以及提高用戶的體驗度。

獲取表單

前兩種常用

1、document.表單名稱
2、document.getElementById(表單 id);
3、document.forms[表單名稱]
4、document.forms[索引]; //從 0 開始

例如：

<body>
	<form id='myform' name="myform" action="" method="post"></form>
	<form id='myform2' name="myform2" action="" method="post"></form>
</body>
<script>
	//四種方式
	var form=document.getElementById("myform");
	form=document.myform;
	form=document.forms["myform"];
	form=document.forms[0];
	console.log(form);
</script>

獲取表單元素

獲取input元素

? 如 text password hidden textarea等，前兩種常用。

1)、通過 id 獲取：document.getElementById(元素 id);
2)、通過 form.名稱形式獲取: myform.元素名稱;    name屬性值
3)、通過 name 獲取 :document.getElementsByName(name屬性值)[索引] // 從0開始
4)、通過 tagName 數(shù)組 :document.getElementsByTagName('input')[索引] // 從0開始

<body>
	<form id='myform' name="myform" action="" method="get">		
		姓名:<input type="text" id="uname" name="uname" value="zs"/><br />
		密碼:<input type="password" id="upwd" name="upwd" value="1234"/><br />
		<input type="hidden" id="uno" name="uno" value="隱藏域" />
		個人說明:<textarea name="intro"></textarea>
		<button type="button" onclick="getTxt();" >獲取元素內(nèi)容</button>
	</form>
</body>
<script>
	function getTxt(){
		var uno=document.getElementById("uno");
		var uname=myform.uname;
		console.log(uname + "--------");
		var upwd=document.getElementsByTagName('input')[1] ;
		var intro=document.getElementsByName("intro")[0];				
		console.log(uno.value +"，"+ uname.value +"，"+ upwd.value +"，"+ intro.value);
	}
</script>

獲取單選按鈕

? 前提：將一組單選按鈕設(shè)置相同的name屬性值

? (1)獲取單選按鈕組：

document.getElementsByName("name屬性值");

(2)遍歷每個單選按鈕，并查看單選按鈕元素的checked屬性

? 若屬性值為true表示被選中，否則未被選中

? 選中狀態(tài)設(shè)定： checked=‘checked’ 或 checked=‘true’ 或 checked

? 未選中狀態(tài)設(shè)定：沒有checked屬性或 checked=‘false’

<form action="" name="myform">
	<input type="text" name="inputName" value="aaa" />
	<input type="radio" name="rad" value="1" />	1
	<input type="radio" name="rad" value="2"  /> 2
</form>
		
<script type="text/javascript">
	var radios=document.getElementsByName('rad');
	//radios[0].checked='checked'
	for(var i=0; i<radios.length; i++){
	    console.log(radios[i].checked + '---' + radios[i].value)
	}
</script>

獲取多選按鈕

? 操作方式與單選同理，不同之處在于可以多選

var ufav=document.getElementsByName("ufav");
var favstr="";
    for (i=0;i < ufav.length; i++){
        if(ufav[i].checked){
            favstr +=ufav[i].value+",";
        }
    }
favstr=favstr.substr(0,favstr.length-1);

獲取下拉選項

? （1）獲取 select 對象：

var ufrom=document.getElementById("ufrom");

? （2）獲取選中項的索引：

var idx=ufrom.selectedIndex;

? （3）獲取選中項 options 的 value屬性值：

var val=ufrom.options[idx].value;

? 注意：當(dāng)通過options獲取選中項的value屬性值時，

? 若沒有value屬性，則取option標(biāo)簽的內(nèi)容

? 若存在value屬性，則取value屬性的值

? （4）獲取選中項 options 的 text：

var txt=ufrom.options[idx].text;

? 選中狀態(tài)設(shè)定：selected=‘selected’、selected=true、selected

? 未選中狀態(tài)設(shè)定：不設(shè)selected屬性

<body onload="init()">
	<form id='myform' name="myform" action="" method="">		
		來自:
		<select id="ufrom" name="ufrom">
			<option value="-1" >請選擇</option>
			<option value="0" selected="selected">北京</option>
			<option value="1">上海</option>
		</select><br />
		<button type="button" id="sub" name="sub">提交</button>
	</form>
</body>
<script>
	function init () {
		var sub=document.getElementById("sub");
		sub.onclick=function () {
			//獲取select對象
			var ufrom=document.getElementById("ufrom");
			console.log("表單對象：" + ufrom);
			//獲取選中的索引
			var idx=ufrom.selectedIndex;
			console.log("選中項的索引值：" + idx);
			//獲取選中項的value值
			var val=ufrom.options[idx].value;
			console.log("選中項的value屬性值：" + val);
			//獲取選中項的text
			var txt=ufrom.options[idx].text;
			console.log("選中項的text：" + txt);
		}
	}
</script>

提交表單

? （1）使用普通button按鈕+onclick事件+事件中編寫代碼:

	獲取表單.submit();

（2）使用submit按鈕 + onclick="return 函數(shù)()" +函數(shù)編寫代碼:

? 最后必須返回：return true|false;

（3）使用submit按鈕/圖片提交按鈕 + 表單onsubmit="return 函數(shù)();" +函數(shù)編寫代碼:

? 最后必須返回：return true|false;

<form id='myform1' name="myform2" action="#" method="get" onsubmit="return onsub();">	
	<input  name="test"  id="uname"/><span id="msg"></span><br />
	<!--通過js事件：sub()提交表單-->
	<input type="button" onclick="sub();" value="提交表單1" />
	<input type="submit" onclick="return sub2();" value="提交表單2" />
	<input type="submit" value="提交onsubmit" /><br />
	<input type="image" src="img/u=71331624,2965806045&fm=23&gp=0.jpg" 
                  width="60px" height="40px" />
</form>
<script type="text/javascript">		
	// input的type=button，調(diào)用submit()方法提交
	function sub(){
		document.myform2.submit();
	}
	// 進(jìn)行校驗，返回值為true才能提交
	function sub2(){
		var uname=document.getElementById("uname");
		var val=uname.value;
		if(val.length>0){
			return true; // 提交
		}
		document.getElementById("msg").innerHTML="不能空著啊！！！";
		document.getElementById("msg").style.color="red";
		return false;  // 不提交
	}
	// onsubmit事件提交
	function onsub () {
		var uname=document.getElementById("uname");
		var val=uname.value;
		if(val.length>0){
			return true; // 提交
		}
		document.getElementById("msg").innerHTML="填寫點兒東西唄！(ˉ▽￣～) 切~~";
		document.getElementById("msg").style.color="red";
		return false; // 不提交
	}
</script>

表單校驗

者 | 六小登登

責(zé)編 | 屠敏

從 2013 年專科畢業(yè)開始，一路跌跌撞撞走了很多彎路，做過餐廳服務(wù)員，進(jìn)過工廠干過流水線，做過客服，干過電話銷售可以說經(jīng)歷相當(dāng)?shù)摹柏S富”。

最后的機緣巧合下，走上了前端開發(fā)之路，作為一個非計算機專業(yè)且低學(xué)歷的人來說，自學(xué)編程其實不是件容易的事情，不過慶幸的是自己堅持下來了。

目前工作還算不錯，收入在目前所在的城市不算高，不算低，生活也還過得去，繼續(xù)加油努力，也希望自己在今后更上一層。

從 2016 年下半年開始，我真正接觸前端，到現(xiàn)在 2 年多的時間。開始之初，我沒有任何的語言基礎(chǔ)，完全從零的小白開始，就連「對象」我都弄不明白，更別說那些高深莫測的什么封裝、繼承、多態(tài)等。

當(dāng)時自己也不知從何入手，怎么辦呢？于是每當(dāng)自己遇到困難時，就厚著臉皮去請教前輩大牛，然后就是去查閱資料，很多時候自己也很覺得不好意思，現(xiàn)在才發(fā)現(xiàn)人很多時候都恥于相別人請教，怕自己丟面子。

但作為一個過來人，我要告訴你請教前輩大牛真的很重要，可以讓你少走很多的彎路，不要怕丟人，沒面子，面子值幾個錢？學(xué)到真本事才最重要。沒有技能才叫真的沒有面子。當(dāng)然了我們在請教別人時，一定要掌握「度」，不要打擾到了別人的工作。

我現(xiàn)在非常感謝前輩們的賜教，也感謝那些在網(wǎng)上寫博客、文章分享的大牛們，給了我們這些自學(xué)的小白很多的資料，經(jīng)驗，心得。從中受益很多。

向優(yōu)秀的前輩們學(xué)習(xí)，我開始寫博客，希望也能幫到和我一樣，學(xué)渣、從零開始、喜歡技術(shù)的一群志同道合的人。

我深知自己的技術(shù)并不高，還處在繼續(xù)學(xué)習(xí)的路上，離大牛還差的很遠(yuǎn)，我本身也非常敬畏技術(shù)，也知道自己的渺小，只希望這篇文章的「學(xué)習(xí)之路」對于那些「從零開始」學(xué)習(xí)前端的同學(xué)有一些指引作用，不像自己一開始那樣的那么盲目，哪怕對你有一點點的幫助，就足夠了。

說了這么多，下面我們直接進(jìn)入正題，都是我平時學(xué)習(xí)和收集的一些資料希望能夠幫到你。

前言

首先我得告訴你，自學(xué)是件很苦的事情，學(xué)習(xí)本身就是件反人性的過程，更何況在一個從零開始的全新領(lǐng)域獨自奮斗，這里不是要打擊你，而是要你認(rèn)真想好，結(jié)合自身的環(huán)境、條件。不然半途而廢浪費的不僅是時間，還有精力、金錢。
如果你已經(jīng)想好決定去做，那就不要猶豫，堅持下去你就可以成功，像我這樣的學(xué)渣都可以，你沒有什么不可以的，一定要相信自己。
興趣是最好的老師，很多人對這句話非常反感，被生活所迫，談興趣不可笑嗎？其實不是，問問自己對技術(shù)有沒有興趣，做自己喜歡和感興趣的事情才能夠走的更遠(yuǎn)和更久，很多人不理解這一點，總有一天你會明白的，我當(dāng)時轉(zhuǎn)前端的時候也是因為自己挺喜歡，而且最接近用戶，都是所見所得的東西很好玩，另外一方面也覺得工資也挺高，所以自己打心里覺得做前端挺好。
做好持續(xù)學(xué)習(xí)，時刻保持學(xué)習(xí)的心態(tài)，說實話現(xiàn)在社會，科技的發(fā)展非常之快，技術(shù)的更新更是如此，如果你覺得學(xué)習(xí)一門技術(shù)就可以吃到老，我勸你還是打住，可能考個公務(wù)員更適合你（不要杠精，我并不是說公務(wù)員不要學(xué)習(xí)，自己體會就好）。
永遠(yuǎn)不要覺得遲，只要行動然后堅持下去，你就干掉了 80% 的人，自學(xué)的人很多，但是堅持下來的沒有幾個。就像郭德綱說過，不是我的相聲說的多好而是我活了下來。著名營銷人員「小馬宋」畢業(yè)時燒了很多年的鍋爐，但是自己對廣告營銷感興趣，所以離職從零開始，現(xiàn)在已經(jīng)是很有名的營銷大師。
與其把時間花在學(xué)與不學(xué)的糾結(jié)上，不如把這個時間放在行動上，如果發(fā)現(xiàn)自己不合適也堅持不下去，那就換個賽道，專注的去做一件事情，會提高你的成功概率。

工具篇

工欲善其事，必先利其器，所以在開始之前選擇一個合適好用的編輯器是很重要的，工具不再多，在于好用就行，除了編輯器，我們也要掌握其他的一些工具，才能夠讓我們在學(xué)習(xí)的道路上更加的順暢。

1. WebStorm

不必多說，前端最強大的編輯器，特別是那無敵的智能提示，但是它的缺點在于如果項目多于大時，出現(xiàn)的卡頓讓很多人苦惱。

WebStorm 官網(wǎng)下載地址：https://www.jetbrains.com/webstorm/。
WebStorm 有哪些過人之處？（https://www.zhihu.com/question/20936155）
激活 WebStorm2018（https://blog.csdn.net/qq_32135281/article/details/82696280）

2. Visual Studio Code

微軟開源免費產(chǎn)品，受到非常多技術(shù)人員的喜愛，基本上成為前端開發(fā)者的必備編輯器，強大的插件擴(kuò)展，可以靈活的打造自己喜歡的風(fēng)格。給你們送上常用插件列表拿走不謝。

Visual Studio Code 官網(wǎng)下載地址：https://code.visualstudio.com/。
VSCode 拓展推薦：https://github.com/varHarrie/varharrie.github.io/issues/10
使用頂級 VSCode 擴(kuò)展來加快開發(fā) JavaScript：https://www.html.cn/archives/9507
vscode 插件推薦：https://segmentfault.com/a/1190000006697219

3. atom

也是一款免費開源的編輯器，受到很多人的喜愛，但是我本人用的較少，所以插件方面就不推薦了，大家可以按照自己的愛好去尋找。

4. 科學(xué)上網(wǎng)

每個程序員都應(yīng)該具備的工具和能力，否則很多事情都無法辦到，至于怎么做，你可以自己查閱資料，這里不就不在多說了。而且下面推薦的很多資源都是需要科學(xué)上網(wǎng)之后才能訪問，所以一定要學(xué)會。

5. Google

在使用「Google」之前必須學(xué)會科學(xué)上網(wǎng)，不然無法訪問，學(xué)會使用搜索可以幫助我們解決很多問題，一個人的知識是有限的，掌握了搜索的技巧才能以不變應(yīng)萬變，很多時候百度出來的東西重復(fù)性很大，最重要的是垃圾信息很多，在百度找不到的答案，在這里很容易找到，Google 是我的必備搜索。

6. Github

全球最大的「同性」開源交流社區(qū)，沒有賬號的趕緊注冊，在這有很多優(yōu)秀的資源項目，各種大神。觀摩優(yōu)秀代碼是我們學(xué)習(xí)的很好路徑。另外在開發(fā)過程中，很多時候任務(wù)重、時間緊，應(yīng)該避免重復(fù)造輪子，這里能夠找到你需要的工具或代碼。

7. Stack Overflow

國外著名的技術(shù)問答交流社區(qū)，開發(fā)時碰到的很多問題在這里都能找到答案。

8. SegmentFault

對應(yīng)的國內(nèi)版的技術(shù)問答交流社區(qū)，如果你英文不好，也可以在這里找找答案。

9. Markdown

Markdown 輕量級標(biāo)記語言，簡潔的語法，讓作者專注內(nèi)容而非復(fù)雜的格式要求，我認(rèn)為人人都應(yīng)該掌握，特別是經(jīng)常寫博客的人。想想你在用 world 時的場景，每次寫完文章之后，不得不話費很多時間進(jìn)行格式的排版，使用它你就可以避免這些煩惱。

Markdown 中文文檔：https://markdown-zh.readthedocs.io/en/latest/

HTML 篇

一些準(zhǔn)備就緒之后，開始我們的學(xué)習(xí)之旅，首先我們先從 HTML 開始。

HTML名為「超文本標(biāo)記語言」，是整個頁面的結(jié)構(gòu)基礎(chǔ)，它承載了我們的頁面內(nèi)容。

1. 基礎(chǔ)

w3school 在線教程（http://www.w3school.com.cn/h.asp）：內(nèi)容非常的基礎(chǔ)，適合小白學(xué)習(xí)，對 HTML 有一個入門了解。
freeCodeCamp（https://www.freecodecamp.cn/）：一個非常好的入門學(xué)習(xí)網(wǎng)站，采用闖關(guān)的模式，就像游戲打怪升級一樣，非常的有樂趣，準(zhǔn)備自學(xué)的小伙伴不妨試試。

2. 進(jìn)階

MDN HTML（https://developer.mozilla.org/zh-CN/docs/Web/HTML）：這里的內(nèi)容質(zhì)量更好，錯誤更少，內(nèi)容也更加的全面。
HTML 和 CSS 編碼規(guī)范（https://codeguide.bootcss.com/）：掌握一些代碼技巧，寫出更好，更高質(zhì)量的代碼。

CSS 篇

HTML 承載了頁面的內(nèi)容，但是有時候會略顯單調(diào)與「丑陋」，CSS 的作用就是為這些內(nèi)容加上樣式，就像一個美女也要有漂亮的外衣去修飾才會更加漂亮，「人靠衣裝馬靠鞍」，網(wǎng)頁的內(nèi)容也是需要穿上一件漂亮的外衣去吸引用戶。而 CSS 則完成了這個裝飾。

1. 基礎(chǔ)

學(xué)習(xí) CSS 布局（http://zh.learnlayout.com/）：帶你一步一步的完成 CSS 的學(xué)習(xí)。
CSS 參考手冊（https://css.doyoe.com/）：對CSS可以有一個全面入門的學(xué)習(xí)。
w3school CSS 參考手冊（http://www.w3school.com.cn/cssref/index.asp）：同上也是非常基礎(chǔ)的知識，適合入門。

2. 進(jìn)階

書籍：

《CSS揭秘》（https://book.douban.com/subject/26745943/）：非常推薦的一本 CSS 書籍，可以學(xué)到很多鮮為人知的技巧。

在線系列：

MDN CSS（https://developer.mozilla.org/zh-CN/docs/Web/CSS）：和 HTML 都是 MDN 社區(qū)文檔，質(zhì)量保障。
HTML和CSS編碼規(guī)范（https://codeguide.bootcss.com/）：掌握一些代碼技巧，寫出更好，更高質(zhì)量的代碼。
大漠老師的CSS系列（https://www.w3cplus.com/CSS3）：大漠老師對CSS有非常深入的認(rèn)識和豐富的實踐經(jīng)驗，《圖解CSS3：核心技術(shù)與案例實戰(zhàn)》的作者。
大漠老師的SASS系列（https://www.w3cplus.com/blog/tags/302.html）：大漠老師的 sass 文章系列。
SASS中文網(wǎng)（https://www.sasscss.com/）：成熟、穩(wěn)定、強大的 CSS 擴(kuò)展語言解析器，它可以讓你使用變量，條件語句等書寫 CSS。
Stylus官網(wǎng)（https://stylus.bootcss.com/）：同樣是 CSS 預(yù)編譯器，但它省去了一些符號，讓 CSS 寫起來更加的簡潔，清爽。
HTML5和CSS3（https://github.com/qianguyihao/Web/tree/master/07-HTML5%E5%92%8CCSS3）：詳解HTML5 和 CSS3。

知識點：

別說你懂CSS相對單位（http://wuyuying.com/blog/archives/css-in-depth-relative-units/）：深入了解 CSS 的相對單位rem，em區(qū)別。
CSS 進(jìn)階內(nèi)容（https://github.com/coconilu/Blog/issues/29）：常見知識點的深入了解。
Flex 布局教程：語法篇（http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html）：阮一峰老師的flex講解。
Flex 布局教程：實例篇（http://www.ruanyifeng.com/blog/2015/07/flex-examples.html）：阮一峰老師的flex講解。
“CSS相關(guān)”目錄存檔（https://www.zhangxinxu.com/wordpress/category/css/）：張鑫旭大佬的CSS系列文章，深入淺出，《CSS世界》作者。
CSS繪制的40種形狀和圖形（http://www.open-open.com/lib/view/open1476240478941.html）：利用CSS繪制出的40各種圖形形狀。
CSS-大前端（http://www.daqianduan.com/tag/css）：一些 CSS 的知識點。

JavaScript 篇

有了 HTML 與 CSS，網(wǎng)頁也就有了內(nèi)容和樣式，但是會缺少與用戶的互動，所有的內(nèi)容都靜靜的躺在那里死氣沉沉。就好比一個美女穿著漂亮的衣服在你面前一動不動好像也沒有什么吸引力，但如果又唱歌，又跳舞，還向你拋媚眼，那可真就把持不住了。JavaScript 就是給網(wǎng)頁添加這樣的「行為」。

Javascript 簡史（https://blog.csdn.net/qq_32135281/article/details/81667714）：可以簡單了解下，JavaScript 發(fā)展由來。

1. 基礎(chǔ)

書籍

《JavaScript權(quán)威指南（第6版）》（https://book.douban.com/subject/10549733/）：俗稱「犀牛書」，JS 的經(jīng)典之作，提升JS技能的必備書籍，我的JS基礎(chǔ)知識全都是啃這本書啃下來的，剛開始讀時可能有會有些吃力，但是只要堅持下來收獲滿滿。
《JavaScript高級程序設(shè)計（第3版）》（https://book.douban.com/subject/10546125/）：俗稱「紅寶書」，JavaScript 超級暢銷書，全書闡述了JavaScript語言實現(xiàn)的各個組成部分，ECMAScript，DOM，BOM，事件，面向?qū)ο蟮鹊龋S時拿出來翻翻，更加深入了學(xué)習(xí) JS。

在線系列

除了書籍之外，也有很多優(yōu)秀的在線教程，可以幫助我們更好的學(xué)習(xí)。

現(xiàn)代 Javascript 教程（https://zh.javascript.info/）：非常全面的JavaScript 學(xué)習(xí)教程，從基礎(chǔ)到高階，非常詳細(xì)，相信你會愛上它的。
廖雪峰的JavaScript教程（https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000）：廖雪峰系列教程。
JavaScript 標(biāo)準(zhǔn)參考教程（alpha）（https://javascript.ruanyifeng.com/）：阮一峰老師的系列教程，通俗易懂，案例豐富。

2. 進(jìn)階

JavaScript語言精粹（https://github.com/qibaoguang/Study-Step-by-Step/blob/master/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/javascript_the_good_parts.md）：揭示JavaScript中的精華。
JavaScript 秘密花園（http://bonsaiden.github.io/JavaScript-Garden/zh/#other.timeouts）：對 JS 一些的核心知識點進(jìn)行梳理講解，例如：this，閉包/作用域，構(gòu)造函數(shù)，原型等等，都是面試必考知識點。
ECMAScript 6 入門（http://es6.ruanyifeng.com/）：阮一峰老師ES6入門書籍，全面介紹 ECMAScript 6 新引入的語法特性。
JavaScript使用技巧（http://www.jstips.co/zh_CN/）：可以認(rèn)識到一些你平時沒有接觸過的小技巧。
深入理解javascript原型和閉包系列（http://www.cnblogs.com/wangfupeng1988/p/4001284.html）：詳細(xì)解釋了原型和閉包，看完之后對原型與閉包讓你徹底明白。
大漠老師的JavaScript系列（https://www.w3cplus.com/JavaScript）：大漠老師的JavaScript系列文章。
JavaScript 算法與數(shù)據(jù)結(jié)構(gòu)（https://github.com/trekhleb/javascript-algorithms/blob/master/README.zh-CN.md）：基于 JavaScript 的算法與數(shù)據(jù)結(jié)構(gòu)，讓你愉快的學(xué)習(xí)。
JavaScript中的正則表達(dá)式（https://blog.csdn.net/qq_32135281/article/details/78274563）：我自己的一篇正則表達(dá)式的文章，希望對你有幫助。
30分鐘掌握ES6/ES2015核心內(nèi)容（上）（https://segmentfault.com/a/1190000004365693）
30分鐘掌握ES6/ES2015核心內(nèi)容（下）（https://segmentfault.com/a/1190000004368132）：闡述了一些常用的ES6的知識點。
學(xué)用 JavaScript 設(shè)計模式（https://www.oschina.net/translate/learning-javascript-design-patterns）：闡述JavaScript編程語言中經(jīng)典和現(xiàn)代的設(shè)計模式。
你不懂JS（系列叢書）（https://github.com/getify/You-Dont-Know-JS/tree/1ed-zh-CN）
InterviewMap（https://yuchengkai.cn/docs/frontend/#%E5%86%85%E7%BD%AE%E7%B1%BB%E5%9E%8B）：聚集了很多知識點，包括JS，瀏覽器，性能等。
30 秒就能理解的 JavaScript 代碼片段（https://www.html.cn/30-seconds-of-code/）：讓你更好的理解一些有用的JS代碼片段。

TypeScript篇

ES6 的超集擴(kuò)展，嚴(yán)格的數(shù)據(jù)類型，帶來更好的維護(hù)，適合大型項目的開發(fā)工作，有人說它是未來的發(fā)展趨勢，你說要不要了解？

TypeScript 中文手冊（https://typescript.bootcss.com/）：官網(wǎng)翻譯版。
TypeScript Handbook（中文版）（https://zhongsp.gitbooks.io/typescript-handbook/content/）：中文版。
RxJS 中文文檔（https://cn.rx.js.org/）：中文官網(wǎng)。
30 天精通 RxJS (01)：認(rèn)識 RxJS（https://ithelp.ithome.com.tw/articles/10186104）：繁體字可能閱讀起來并沒有那么順暢。

Jquery篇

雖說現(xiàn)在已經(jīng)是單頁面應(yīng)用時代，有React，Vue 這種強大的框架可以使用，但也不缺乏一些老的項目需要維護(hù)，而且在學(xué)習(xí)之初，可以用它做兩個簡單的應(yīng)用還是不錯的，可以相對了解下基本用法，它可以讓你更好，更方便的操作DOM。但不建議再深度學(xué)習(xí)。

《鋒利的jQuery(第2版)》（https://book.douban.com/subject/10792216/）：一本很不錯的 Jquery 學(xué)習(xí)書籍。
jQuery API中文文檔（https://www.jquery123.com/）：JQuery 中文教程。

Ajax篇

掌握了的HTML、CSS、JavaScript時，這時候可以嘗試自己做一些項目了，而項目中肯定會有數(shù)據(jù)的交互，這時候就是 Ajax 的用武之地了。

廖雪峰AJAX（https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499861493e7c35be5e0864769a2c06afb4754acc6000）：廖雪峰大佬的博客知識。
XMLHttpRequest 對象（https://wangdoc.com/javascript/bom/xmlhttprequest.html）：阮一峰老師的AJAX詳解。
JSON風(fēng)格指南（https://github.com/liuxiaodeng/free-programming-books/blob/master/free-programming-books-zh.md#javascript）：前后端的交互數(shù)據(jù)通常都是 JSON 格式，所以了解 JSON 是必要的。

NodeJS與模塊化

NodeJs 的出現(xiàn)讓前端發(fā)展進(jìn)入了一個新的領(lǐng)域，并且滋生出專業(yè)的 Node 工程師，不僅如此 Node 在前端模塊化，工程化起到很重要的作用，所以了解是必須的，如果感興趣的可以深入學(xué)習(xí)，可以向全棧工程師發(fā)展。

Javascript模塊化編程（一）（http://www.ruanyifeng.com/blog/2012/10/javascript_module.html）：模塊的寫法
Javascript模塊化編程（二）：AMD規(guī)范
Javascript模塊化編程（三）：require.js的用法
前端模塊化開發(fā)那點歷史（https://github.com/seajs/seajs/issues/588）：了解下，前端模塊化的發(fā)展。
Node.js 官方（https://nodejs.org/zh-cn/）
狼叔：如何正確的學(xué)習(xí)Node.js（https://github.com/i5ting/How-to-learn-node-correctly）：狼叔江湖地位頗高，《更了不起的 Node.js》的作者。
全棧工程師之路-Node.js（http://i5ting.github.io/nodejs-fullstack/）

框架篇

隨著日益復(fù)雜的用戶需求，與系統(tǒng)的復(fù)雜度上升，傳統(tǒng)的開發(fā)模式日漸的很難滿足，此時的三大框架孕育而生，讓開發(fā)者更加高效，可復(fù)用，把關(guān)注點都放在數(shù)據(jù)層的操作，免去那些繁瑣而又重復(fù)的視圖操作。

現(xiàn)在框架的能力已經(jīng)是前端開發(fā)人員必備的技能之一也是趨勢，三大框架的「最終目的」都是一致的，我認(rèn)為開發(fā)者不必糾結(jié)于到底應(yīng)該選擇哪一個學(xué)習(xí)，可以選擇其中的兩個是最好的。對于剛?cè)腴T的人來說，建議選擇 Vue 入手，比較簡單，靈活。

MVC，MVP 和 MVVM 的圖示（http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html）：在學(xué)習(xí)框架之前，你應(yīng)該了解下MVVM的設(shè)計思想。
框架原理（https://yuchengkai.cn/docs/frontend/framework.html）：了解一些框架的基本原理。

1. Angular

Angular（https://angular.cn/）：Angular官方社區(qū)。
Angular開發(fā)者（http://www.ngfans.net/）：大漠窮秋老師維護(hù)的站點，Angular中國布道者。
NG-ZORRO（https://ng.ant.design/docs/introduce/zh#%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83）：Angular UI 組件庫，阿里巴巴出品。

2. Vue

Vue（https://cn.vuejs.org/index.html）：官網(wǎng)，最好的學(xué)習(xí)資料。
我的Vue進(jìn)階之路（https://blog.csdn.net/qq_32135281/column/info/29689）
使用vue全家桶制作博客網(wǎng)站（https://www.cnblogs.com/xiaohuochai/p/9228543.html）
Element（http://element-cn.eleme.io/#/zh-CN）：一個高質(zhì)量的 Vue UI 組件庫。餓了么前端團(tuán)隊出品。
Vue 項目里戳中你痛點的問題及解決辦法（更新）（https://juejin.im/post/5b174de8f265da6e410e0b4e）：做項目難免回去到坑，這里你或許可以找到答案。

3. React

React我了解不多，所以就沒什么好推薦的了，大家可自行學(xué)習(xí)。

React官網(wǎng)（https://www.reactjscn.com/）

圖形可視化

隨著日益增長的數(shù)據(jù)，如何利用高效的利用數(shù)據(jù)，是每個企業(yè)都考慮的問題，而人的眼睛看到的東西要勝過閱讀的問題，俗話說「一圖勝千言」就是這個道理，所以數(shù)據(jù)的可視化就會格外的重要，以下都是我常看的一些技術(shù)，書籍，和關(guān)注的可視化開源庫。

《HTML5 Canvas核心技術(shù)》（https://book.douban.com/subject/24533314/）：學(xué)習(xí) Canvas 比較好的一本書籍。
Canvas系列（https://www.w3cplus.com/search/node/canvas）：大漠老師的 Canvas 系列。
Echarts（https://www.echartsjs.com/index.html）
D3（https://d3js.org/）
Highcharts（https://www.highcharts.com.cn/）
AntV（https://antv.alipay.com/zh-cn/index.html）
Mapv（https://mapv.baidu.com/）

工程化與版本控制篇

1. Git

版本控制工具，很多新手往往把 git 與 github 傻傻分不清楚，二者是不同的東西，一定要去區(qū)分清楚。

Git教程（https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000）：廖雪峰老師的教程。
Learn Git Branching（https://learngitbranching.js.org/）：一種有趣的學(xué)習(xí) Git 的方式。
GitHub 漫游指南（https://github.com/phodal/github）：作者是一個極客。
git - 簡易指南：http://www.bootcss.com/p/git-guide/

2. Gulp

自動化構(gòu)建工具，項目打包部署前的壓縮合并，節(jié)省時間，提高開發(fā)效率。

Gulp 中文網(wǎng)（https://www.gulpjs.com.cn/）：官方教程。
gulp詳細(xì)入門教程（http://www.ydcss.com/archives/18）：非常詳細(xì)的實現(xiàn)步驟。

3. Webpack

Webpack 是當(dāng)下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。

Webpack中文文檔：https://www.webpackjs.com/
webpack原理：https://juejin.im/entry/5b0e3eba5188251534379615
Webpack揭秘——走向高階前端的必經(jīng)之路：https://juejin.im/post/5badd0c5e51d450e4437f07a
Webpack HMR 原理解析：https://zhuanlan.zhihu.com/p/30669007
webpack 熱加載原理探索：http://shepherdwind.com/2017/02/07/webpack-hmr-principle/

4. Babel

JavaScript代碼編譯器，可以讓ES6及以上語法轉(zhuǎn)換成瀏覽器支持的語法，一般會在框架的腳手架中自行配置。

Babel（https://babel.bootcss.com/）：官網(wǎng)教程。

5. 代碼質(zhì)量

ESLint（https://eslint.bootcss.com/）：javascript代碼檢測工具幫助我們寫出更規(guī)范的代碼。

瀏覽器與HTTP

瀏覽器的常見知識點（https://yuchengkai.cn/docs/frontend/browser.html）：需要我們了解的常見知識。
網(wǎng)站安全（https://yuchengkai.cn/docs/frontend/safety.html）：幾種常見安全問題。
同源限制（https://wangdoc.com/javascript/bom/same-origin.html）
從URL輸入到頁面展現(xiàn)到底發(fā)生什么？（https://github.com/ljianshu/Blog/issues/24）
深入理解瀏覽器的緩存機制（https://github.com/ljianshu/Blog/issues/23）
網(wǎng)頁性能管理詳解（http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html）
關(guān)于Http協(xié)議，你必須要知道的（https://github.com/ljianshu/Blog/issues/22）
HTTP 協(xié)議（https://github.com/coconilu/Blog/issues/135）
HTTP2 協(xié)議（https://github.com/coconilu/Blog/issues/134）
瀏覽器同源政策及其規(guī)避方法（http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html）
跨域資源共享 CORS 詳解（http://www.ruanyifeng.com/blog/2016/04/cors.html）
總結(jié) XSS 與 CSRF 兩種跨站攻擊（https://segmentfault.com/a/1190000004623125）

性能優(yōu)化

性能優(yōu)化（https://yuchengkai.cn/docs/frontend/performance.html）：常見性能優(yōu)化。
前端性能優(yōu)化的七大手段（https://www.cnblogs.com/xiaohuochai/p/9178390.html）
延遲加載(Lazyload)三種實現(xiàn)方式（https://zhuanlan.zhihu.com/p/25455672）
詳解懶加載和預(yù)加載（https://www.geekjc.com/post/58d94d0f16a3655650d6fafe）
前端優(yōu)化帶來的思考，淺談前端工程化（http://www.cnblogs.com/yexiaochai/p/4901341.html）
推薦幾本與Web性能優(yōu)化有關(guān)的書籍（https://w3ctech.com/topic/108）
vue + webpack 前端性能優(yōu)化（https://juejin.im/post/5bc5c106e51d450e7a253e1b）

SEO

SEO優(yōu)化實戰(zhàn)（https://imweb.io/topic/5682938b57d7a6c47914fc00）

博客系列

1. 個人

現(xiàn)在是一個信息爆炸的時代，網(wǎng)上有很多優(yōu)秀的博客文章，每個人的精力都是有限的，不可能關(guān)注到所有的博客，每個人關(guān)注點可能不太一樣，所以關(guān)注的個人博客也會不同，這些推薦幾個我比較常看的幾個高質(zhì)量博客。而且是持續(xù)更新的。

阮一峰的個人網(wǎng)站（http://www.ruanyifeng.com/home.html）：阮一峰老師江湖地位不必多說，博客不止有技術(shù)，現(xiàn)在阿里任職。
廖雪峰的官方網(wǎng)站（https://www.liaoxuefeng.com/）：廖雪峰老師寫過很多優(yōu)秀的系列教程，值得去學(xué)習(xí)。
張鑫旭（https://www.zhangxinxu.com/）：專注前端技術(shù)的大牛之一，出版《css世界》一書。
W3cplus（https://www.w3cplus.com/）：大漠老師在手淘任職，CSS，HTML 有著豐富的經(jīng)驗。
前端入門和進(jìn)階學(xué)習(xí)筆記（https://github.com/qianguyihao/Web）：從零開始自學(xué)，然后進(jìn)入京東，記錄作者一路走來的學(xué)習(xí)筆記。
六小登登（https://blog.csdn.net/qq_32135281）：我自己的個人博客，記錄自己的一些學(xué)習(xí)總結(jié)，個人成長，認(rèn)識思維，雖然自己還是個菜鳥，但一直在路上。

2. 團(tuán)隊

奇舞周刊（https://weekly.75team.com/）：收集每周前端精華文章。
美團(tuán)技術(shù)團(tuán)隊（https://tech.meituan.com/）：分享一些美團(tuán)的技術(shù)路線。
JavaScript Weekly（https://javascriptweekly.com/）：每周都會分享一些 JavaScript 優(yōu)質(zhì)內(nèi)容。
印記中文周刊（https://weekly.docschina.org/）：如果你對英文有閱讀障礙的話，印記幫你翻譯。
凹凸實驗室（https://aotu.io/index.html）：京東團(tuán)隊。
淘寶前端團(tuán)隊FED（http://taobaofed.org/）：淘寶前端團(tuán)隊，不必多說了。
網(wǎng)易FEG前端團(tuán)隊（http://feg.netease.com/）：網(wǎng)易的前端團(tuán)隊，網(wǎng)易的產(chǎn)品一直都是我最喜歡的。
IMWeb前端博客（https://www.imweb.io/）：騰訊公司前端團(tuán)隊，負(fù)責(zé)QQ的相關(guān)業(yè)務(wù)你就知道了，都是億級別。
tutorialzine（https://tutorialzine.com/）：高質(zhì)量教程和文章庫。

項目資源

前端技能匯總（http://html5ify.com/fks/）：一個前端工程師需要的技能點和學(xué)習(xí)資料。
You-need-to-know-css（https://lhammer.cn/You-need-to-know-css/#/）：一個CSS的優(yōu)質(zhì)項目，純 CSS 實現(xiàn)我們項目中很多常用，不常用的樣式。
JavaScript libraries（https://www.javascripting.com/）：一些優(yōu)秀的JavaScript 開源庫。
awesome-web-dev-books（https://github.com/jobbole/awesome-web-dev-books）：前端經(jīng)典學(xué)習(xí)書單。
前端 TOP 100（https://www.awesomes.cn/rank）：基本涵蓋了所有前端在用的開源項目，我覺得收藏這一個就夠了。

常用工具

CSS Sprites Generator（https://www.toptal.com/developers/css/sprite-generator）：雪碧圖的在線制作工具。
Lorem Picsum（https://picsum.photos/）：好用的圖片臨時占位符。
Md2All（http://md.aclickall.com/）：優(yōu)秀的現(xiàn)在 Markdown 編輯器。
優(yōu)波設(shè)計（https://ubuuk.com/）：優(yōu)秀的設(shè)計導(dǎo)航網(wǎng)站，幫助你更好的尋找資料。
搬書匠（http://www.banshujiang.cn/）：書籍搜索下載。
史萊姆導(dǎo)航（http://www.slimegps.cn/）：資源搜索。
codePen（https://codepen.io/）：在線代碼編輯工具。
Iconfont（https://www.iconfont.cn/）：阿里的字體圖標(biāo)庫，支持多種格式，下載圖片，在線使用，SVG等等。
Can I use（https://www.caniuse.com/）：可以查看瀏覽器兼容 CSS 情況。
在線工具（https://tool.lu/）：工具資源導(dǎo)航。

最后

以上是我這兩年多一路走來收藏的一些資料，整理這份資料也花了我好幾天的時間，希望能夠在自學(xué)的道路上幫到你。

再次聲明，我并不是什么大神，我自認(rèn)為技術(shù)也沒有到達(dá)這個層級，但是我會一直堅持學(xué)下去，另外一定不要誤會這里面的知識我全部都會，這些都是我學(xué)習(xí)的一些資料想整理出來，免去小白的一些不知道如何查閱資料。

這里的資源可能并不適合每一個人，你也不一定全部都需要，只需要挑選自己想要的部分就行，任何事情并不是越多越好。

作者：六小登登，個人公眾號：六小登登（ID：liuxiaodengdeng）。目前在某創(chuàng)業(yè)公司任職前端開發(fā)工作，近 3 年前端開發(fā)經(jīng)驗，愛技術(shù)、愛寫作、愛分享。
聲明：本文為作者投稿，版權(quán)歸其個人所有。

OM的核心對象是window，它表示瀏覽器的一個實例。window對象有雙重角色，它既是通過JavaScript訪問瀏覽器窗口的一個接口，又是ECMAScript規(guī)定的Global對象。這意味著在網(wǎng)頁中定義的任何一個對象、變量和函數(shù)，都以window作為其Global對象，因此有權(quán)訪問parseInt()等方法。

如果頁面中包含框架，則每個框架都擁有自己的window對象，并且保存在frames集合中。在frames集合中，可以通過數(shù)值索引（從0開始，從左至右，從上到下）或者框架的名稱來訪問相應(yīng)的window對象。

一、Window對象方法

1、系統(tǒng)對話框

瀏覽器通過（實際是window對象的方法）alert()、confirm()、prompt()方法可以調(diào)用系統(tǒng)對話框向用戶顯示消息。

（1）消息框:alert，常用。

alert() 方法用于顯示帶有一條指定消息和一個 OK 按鈕的警告框。

（2）輸入框:prompt，返回提示框中的值。

prompt() 方法用于顯示可提示用戶進(jìn)行輸入的對話框。

參數(shù)（可選）：

第一個參數(shù)：要在對話框中顯示的純文本。

第二個參數(shù)：默認(rèn)的輸入文本。

（3）確認(rèn)框:confirm，返回 true/false.

confirm() 方法用于顯示一個帶有指定消息和 OK 及取消按鈕的對話框。

<style type="text/css">
	#aa{
		border: 1px solid red;
		height: 100px;
	}
</style>
<body>
	<div id="aa">
		This is a div
	</div>
	<button onclick="testAlert();">警告</button>
	<button onclick="testComfirm();">修改</button>
	<button onclick="testPrompt();">輸入</button>
	<script type="text/javascript">
		// 1.警告框
		function testAlert(){
			alert('警告框！！！');
		}			
	
        /*
		 2.輸入框
		 	返回值：輸入的內(nèi)容
		 * */
		function testPrompt(){
			var item=prompt('請輸入年齡'); // item得到輸入的值
			// console.log(item)
			// alert(prompt('請輸入年齡',18)); // 將輸入的值輸出
		}
        
		/*
		 3.確認(rèn)框
		 	返回值：boolean（true|false）
		 * */
		function testComfirm(){
			var result=confirm('真的要改嗎？');
			if(result){
				var ele=document.getElementById("aa");
				ele.style.color="red";
				ele.innerHTML="<span>fdsfsd</span>";
			}else{
				alert("沒事別瞎點。。。");
			}
		}
	</script>
</body>

2、打開窗口

window.open()方法既可以導(dǎo)航到一個特定的URL也可以用來打開一個新的窗口

<script type="text/javascript">
function openBaidu(){
	window.open('http://www.baidu.com','_self'); // _self、_blank等
	// window.open();		//空白窗口
}
</script>
<input type="button" name="open" value="百度" onclick='openBaidu();' />

3、關(guān)閉窗口

window.close()：關(guān)閉窗口。

例：點擊按鈕關(guān)閉當(dāng)前窗口。

<input type="button" value="關(guān)閉窗口" onclick="window.close();" />

二、JavaScript設(shè)計模式系統(tǒng)講解與應(yīng)用

關(guān)于JavaScript設(shè)計模式講解應(yīng)用這一塊，建議學(xué)習(xí)下面這套教程即可，獲取方式圖片中有。

課程內(nèi)容豐富完整，學(xué)習(xí)JavaScript非常不錯。歡迎來學(xué)習(xí)JavaScript設(shè)計模式講解與應(yīng)用。

三、時間函數(shù)

1、setTimeout()

setTimeout() : 在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達(dá)式。返回一個唯一的標(biāo)識；也可以通過返回的標(biāo)識cliearTimeout(id)：來清除指定函數(shù)的執(zhí)行。

var id=setTimeout(function,times);
clearTimeout(id);

2、setInteval()

setInterval():可按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達(dá)式，也可根據(jù)返回的標(biāo)識用來結(jié)束。該方法會不停地調(diào)用函數(shù)，直到 clearInterval() 被調(diào)用或窗口被關(guān)閉。

var id=setInterval(function,times);
clearInterval(id);
function test(){
	console.log(".....");
}
// window是一個全局對象，通過全局對象調(diào)用setInterval()函數(shù)
window.setInterval(test,1000);

關(guān)于BOM對象講到這里，下次再講 history對象，如需java入門到架構(gòu)師全套資料視頻等請留言評論或私聊。

在線咨詢

上一篇：優(yōu)秀內(nèi)容創(chuàng)作工具推薦：拖拽式排版工具、Markdow
下一篇：使用 SVG 符號和 CSS 變量實現(xiàn)多彩圖標(biāo)

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

JS事件、Bom和Dom對象

要內(nèi)容

事件

作用

事件中的幾個名詞

事件類型

事件流和事件模型

事件冒泡

事件捕獲

DOM 事件流

事件處理程序

HTML 事件處理程序

DOM0 級事件處理程序

DOM2 級事件處理程序

本節(jié)作業(yè)

BOM對象

Window對象方法

系統(tǒng)對話框

打開窗口

關(guān)閉窗口

時間函數(shù)

setTimeout()

setInteval()

history對象

location對象

本節(jié)作業(yè)

DOM對象

節(jié)點

操作元素的節(jié)點

獲取節(jié)點

創(chuàng)建節(jié)點和插入節(jié)點

創(chuàng)建節(jié)點

插入節(jié)點

間接查找節(jié)點

刪除節(jié)點

表單

獲取表單

獲取表單元素

獲取input元素

獲取單選按鈕

獲取多選按鈕

獲取下拉選項

提交表單

表單校驗

一、Window對象方法

1、系統(tǒng)對話框

2、打開窗口

3、關(guān)閉窗口

二、JavaScript設(shè)計模式系統(tǒng)講解與應(yīng)用

三、時間函數(shù)

您的項目需求