還在為電子版教材發愁嗎？這幾個網站趕快用起來

家好，我是檸檬

如今無紙化學習的出現，使得教材不只是有紙質版，電子版教材也得到越來越多人青睞。

但是從什么地方獲取文字排版清晰的電子教材，并不是一件容易的事。今天在這分享幾個查書下載的網站，不僅搞定教材，同樣搞定各類電子書籍。

1.中華人民共和國教育部

傳送門：http://www.moe.gov.cn/jyb_xxgk/s5743/s5744/202002/t20200213_420774.html?from=timeline&isappinstalled=0

前不久，教育部提供了各中小學免費電子版教材下載鏈接，點擊下載鏈接后會出現一個Excel表格，所有的下載鏈接都出現在表里了，選擇自己想要的就看見下載了。如果需要的是中小學生教材，這個渠道絕對不能錯過。

2.超星學習通

傳送門：https://www.chaoxing.com/

在里面搜索想要的教材名稱，就可以找到大量的教材信息，選擇自己需要的點擊后，找到獲取途徑就可以下載了。

3.微盤

傳送門：https://vdisk.weibo.com/

直接搜索想找的教材，選擇自己需要的下載即可。

如果有一個分享者不斷上傳相關資源，則可以進入這個分享者的主頁查看，往往這位大佬在主頁里放了大量書籍資源，即使并沒有想找的，也可以收獲許多意外資源。

4.全國圖書館參考咨詢聯盟

傳送門：http://www.ucdrs.superlib.net/

全國圖書館參考咨詢聯盟擁有廣闊的資源，在搜索欄輸入想要的教材名稱后，點擊搜索，同樣會出現大量書籍，選擇自己想要的內容，然后在跳轉后的界面點擊文獻傳遞，填上自己的郵箱后，就可以等著發送過來.。

5.蟲部落

傳送門：https://ebook.chongbuluo.com/

蟲部落相當于前面各個搜索工具的集合，在網站的左側提供了各個搜書平臺，真的是一站在手，天下我有。如果在一個平臺并沒有找到需要的內容，只需在側邊欄更換換一個平臺再次查詢，一般都能夠找到需要的教材。

當然如果前面方法都用過后，仍然找不到想要的話，則可以選擇萬能的淘寶，幫助你解決一切麻煩。

好啦，今天的分享就到這，大家可以持續關注哦，總有一款工具是你可以用到的。

、修改導航分類下面的背景色，代碼如下：

.skin-box-bd .link{background:#000000;}

2、換成自己做圖片，然后連接上去，代碼如下：

.skin-box-bd .link{background:url(http://img03.taobaocdn.com/imgextra/i3/682206429/T210IOXCdXXXXXXXXX_!!682206429.jpg);}

將“圖片連接”換成你的圖片的連接

3、導航背景色代碼（除去“所有分類”）如下：

.menu-list .link{background:#000000;}

4、導航欄文字（除去“所有分類”）如下：

.menu-list .menu .title{color:#顏色代碼;font-size:字號px;}

5、“所有分類”的背景色代碼如下：

.all-cats .link{background:#000000;}

6、“所有分類”的文字代碼如下：

.all-cats .link .title{color:#顏色代碼;font-size:字號px;}

7、二級分類文字代碼如下：

.popup-content .cats-tree .fst-cat .cat-name{font-size:字號px;color:#顏色代碼;font-weight:bold/bolder/normal;}

8、二級分類背景代碼如下：

.popup-content{background:#000000;}

9、三級分類文字代碼（除去“所有寶貝”分類）如下.popup-content .cats-tree .snd-pop-inner{font-size:字號px;color:#顏色代碼;font-weight:bold/bolder/normal;}

10、一級導航分類（除去“所有寶貝”分類）分隔線顏色代碼如下：

.menu-list .menu{border-color:#FFFFFF;}

11、鼠標滑過一級分類導航文字變換背景色代碼如下：

.menu-list .menu-hover .link{background:#000000;}

12、鼠標滑過一級分類導航文字變換顏色代碼如下：

.menu-list .menu-hover .link .title{color:#FFFFFF;}

ouseout和mouseleave的區別

二者都是鼠標移出。mouseout冒泡。 mouseleave不冒泡。（出去冒泡，離開不冒泡）

mouseout對應上面的mouseover ，mouseleave對應上面的mouseenter。

注冊事件的第二種方法（監聽法）

就是誰發生、怎么發生、發生了什么的第二種表達方式。

誰發生.addEventListener(怎么發生，發生了什么的函數）

怎么發生：這里的觸發事件不帶on，比如click

發什么了什么的函數： function() { 要發生的事情 };

//例如上面的唐伯虎點秋香例子
btn.addEventListener('click', function() {
	alert('點秋香');
})

節點操作01

改變元素內容

element.innerText
//從起始位置到終止位置的內容。但它去除html標簽，同時空格和換行也會去掉

element.innerHTML
//起始位置到終止位置的全部內容，包括html標簽，同時保留空格和換行

innerText 和 innerHTML的區別

innerText 不識別html標簽非標準去除空格和換行
innerHTML 識別html標簽按照W3C標準保留空格和換行
這兩個屬性都是可讀寫的，可以獲取元素里面的內容。例如：

<p>2333</p>
<script>
	var p = document.getElementByTagName('p');
	console.log(p.innerText);
	console.log(p.innerHTML);
</script>

常見元素的屬性操作

三種操作情況：

innerText 、innerHTML 改變元素內容

src、 href

id、alt、title

表單元素的屬性操作

利用DOM可以操作如下表單元素的屬性：

type , value , checked , selected , disabled

<body>
	<button>按鈕</button>
	<input type="text" value="輸入內容" />
	<script>
		//1，獲取元素
		var btn = document.querySelector('button');
		var inp = document.querySelector('input');
		//2，注冊事件--誰發生 怎么發生 發生什么
		btn.addEventListener('click', function() {
		//inp.innerHTML = '被點擊了'; 這個是 普通盒子 比如div標簽里面的內容被修改，不是value里的內容被改變
		//表單里面的值 文字內容是通過valve來修改的
			inp.value = '我被點擊了';
		//如果想要某個表單被禁用，不能重復點擊disabled 我們想要這個按鈕 button禁用
		//btn.disbled = true; 這樣就被禁用了
		this.disabled = true;//這里的this就是btn，因為是btn發生的，這里的this就特指btn了。
		//this指向的是發生的那個元素 btn
		})
	</script>
</body>

案例：京東登陸界面的密碼表單輸入密碼時，默認不顯示密碼。點擊小眼睛圖標時，顯示密碼。再點擊又不顯示密碼。

//2，注冊事件 誰發生 怎么發生 發生什么
var flag = 0;
eye.addEventListener('click', function() {
	//每次點擊 flag一定要變化
	if(flag == 0) {
		pwd.type = 'text';
		eye.src = '---';
		flag = 1;//這里就是要變化了。原來是0，這里就要變成1
	} else {
			pwd.type = 'password';
			eye.src = '---';
			flag = 0;//這里又變化了。原來是1，點過一次就變成0了
		}
})

樣式屬性操作

我們可以通過JS修改元素的大小、顏色、位置等樣式。

element.style = ’ ';行內樣式操作

element.className 類名樣式操作

注意：

JS 里面的樣式采取駝峰命名法比如 fontSize , backgroundColor 。注意，這里沒有連接的 - 了。

JS修改style 樣式操作，產生的是行內樣式，css權重比較高。

className 會直接更改元素的類名，會覆蓋原先的類名。

第3條里，如果原來的類名還想保留，那就可以這樣做，假如原來的類名是class=‘first’ ，現在要用的是class='change’并且不想把原來的first類型替換掉，那就寫成元素.className = ‘first change’ 就闊以了。

<body>
	<div></div>
	<script>
		//1，獲取元素
		var div = document.querySelector('div');
		//2，注冊事件。誰發生 怎么發生 發生什么
		div.onclick = function() {
			//div.style里面的屬性  采取駝峰命名法
			this.style.backgroundColor = 'purple';
			this.style.width = '200px';
		}
	</script>
</body>

這里是this是指向函數的調用者，即div在調用這個函數。相當于div.style （如上圖的div）

如果調用者不是當前的元素，就不能用this了。（如下圖function里的box.style 就不能寫成this.style）

因為是btn在調用函數，然后讓box產生變化。如果用了this，就是指btn在發生變化了。所以這里不能用this。

當一個元素需要更改的樣式較多時，適合用element.className來完成。

<head>
<style>
.change {
	background-color: purple;
	color: #fff;
	font-size: 25px;
	margin-top: 100px;
}
</style>
</head>

<body>
	<div>文本</div>
	<script>
		//當元素樣式較多或者功能復雜的情況下，
		//使用element.className獲得修改元素樣式，
		var div = document.querySelector('div');
		div.onclick = function() {
			this.className = 'change';
		}
	</script>
</body>

JS排他思想

如果有同一組元素，我們想要其中一個元素實現某種樣式的情況下，不想讓其他同樣的元素跟著實現這種樣式，就需要用到循環的排他思想算法：

所有元素全部清除樣式（干掉其他人）
給當前元素設置樣式（留下我自己）
注意順序不能顛倒。首先干掉其他人，再設置自己。

<ul class='baidu'>
	<li><img src='1' /></li>
	<li><img src='1' /></li>
	<li><img src='1' /></li>
</ul>
<script>
	//1，獲取元素 
	var imgs = document.querySelector('.baidu').querySelectorAll('img');
	//console.log(imgs);
	//2，循環注冊事件
	for(var i = 0; i < imgs.length; i++) {
		imgs[i].onclick = function() {
		//this.src 就是我們點擊的圖片的路徑
		//console.log(this.src);
		//把這個路徑this.src給body就可以了
			document.body.style.backgroundImage = 'url(' + this.src + ')';
		}
	}
</script>

說白了，就是先讓包括自己的所有人都不顯示，然后再讓自己顯示。這樣在自己顯示的時候，別人就不顯示了。

全選反選案例：

<script>
	//1，全選和取消全選的做法： 
	//讓下面所有復選框的checked屬性（選中狀態） 跟隨 全選按鈕即可
	//獲取元素
	var j_acAll = document.getElementById('j_cbAll');
	var j_tbs = document.getElementById('j_tb').getElementByTagName('input');
	//即 選出下面所有的復選框
	//注冊時間 誰發生 怎么發生 發生什么
	j_cbAll.onclick = function() {
		//this.checked 它可以得到當前復選框的選中狀態 
		//如果是true 就是選中， 如果是false 就是未選中
		console.log(this.checked);
		for(var i = 0; i < j_tbs.length; i++) {
			j_tbs[i].checked = this.checked;
		}
	}
	//2，下面的復選框需要全部選中，上面全選才能選中做法：
	//給下面所有復選框綁定點擊事件，每次點擊，都要循環看是否都選中了
	for(var i = 0; i < j_tbs.length; i++) {
		j_tbs[i].onclick = function() {
			//flag控制全選按鈕是否選中
			var flag = true;
			//每次點擊下面的復選框都要循環檢查這4個小按鈕是否全被選中
			for(var i = 0; i < j_tbs.length; i++) {
				if( !j_tbs[i].checked) {
					flag = false;
					break;
				//退出for循環 這樣可以提高運行效率
				//因為只要一個沒有選中，剩下的就無需再循環判斷了
				}
			}
			j_cbAll.checked = flag;
		}
	}
</script>
//每次點擊，都要循環

操作屬性

自定義屬性的操作

獲取屬性值

element.屬性獲取屬性值
作用：獲取內置屬性值，即元素本身自帶的屬性
element.getAttribute(‘屬性’）；
作用：可以獲得原有屬性值，也可以獲得自定義的元素值。主要獲取自定義的屬性（標準）我們程序員自定義的屬性。

獲取、設置、移除元素屬性的應用例子：

<body>
	<div id="demo" index="1"></div>
	<script>
		var div = document.querySelector('div');
		//1，獲取元素的屬性值
		//（1）element.屬性
		console.log(div.id);//demo
		//(2)element.getAttribute('屬性')
		//程序員自己添加的屬性，我們稱為自定義屬性，比如這里的 index
		console.log(div.getAttribute('id'));//demo
		console.log(div.getAttribute('index'));//1
		//2，設置元素的屬性值
		//（1）element.屬性 = ‘值’；
		div.id = 'test';
		div.className = 'navs';
		//(2)element.setAttribute('屬性','值');
		//主要針對自定義屬性
		div.setAttribute('index', 2);
		div.setAttribute('class', 'footer');
		//class特殊 這里寫的就是class 不是className
		//3，移除屬性 element.removeAttribute('屬性');
		div.removeAttribute('index');
	</script>
</body>

屬性操作案例（必須會寫）

<script>
	//獲取元素
	var tab_list = document.querySelector('.tab_list');
	var lis = tab_list.querySelectorAll('li');
	var items = document.querySelectorAll('.item');
	//for循環綁定點擊事件
	for(var i = 0; i < lis.length; i++) {
		//開始給5個小li設置索引號index
		lis[i].setAttribute('index',i);
		lis[i].onclick = function() {
			//1，上面的模塊選項卡，點擊某一個，當前這個底色會是紅色，其他選項卡不變色。
			//所以用到排他思想。干掉所有人，其余的li清除class這個類
			for(var i = 0; i < lis.length; i++) {         		
				lis[i].className = '';		
			}
			//留下我自己
			this.className = 'current';
			//2，下面的顯示內容模塊
			var index = this.getAttribute('index');
			console.log(index);
			//干掉所有人 讓其余的item 這些div 隱藏
			for(var i = 0; i < items.length; i++) {
				items[i].style.display = 'none';
			}
			//留下我自己 讓對應的item顯示出來
			items[index].style.display = 'block';
		}
	}
</script>

關于自定義屬性

H5自定義屬性

自定義屬性目的：是為了保存并使用數據。有些數據可以保存到頁面中而不用保存到數據庫中。

1.設置H5自定義屬性

H5規定自定義屬性data- 開頭做為屬性名并且賦值。說白了就是，自定義屬性要用data- 做開頭。比如：

<div data-index="1"></div>

或者使用JS設置：

element.setAttribute('data-index', 2)

2.獲取H5自定義屬性

1，element.getAttribute(‘data-index’) 兼容性好

2，H5新增 element.dataset.index 或者element.dataset[‘index’] ， ie11才開始支持，而且只能取data- 開頭的自定義元素屬性。

如果自定義屬性里有多個 - 連接的單詞，我們獲取的時候，采取駝峰命名法。如 div.dataset.listName 或 div.dataset[‘listName’]

節點操作02

網頁中的所有內容都是節點（標簽，屬性，文本，注釋，空格等），在DOM中，節點使用node來表示。

HTML DOM樹中的所有節點均可通過JS進行訪問，所有HTML元素（節點）均可被修改，也可以創建或刪除。

一般地，節點至少擁有nodeType（節點類型），nodeName（節點名稱）和nodeValue（節點值）這三個基本屬性。

元素節點 nodeType 為1
屬性節點 nodeType 為2
文本節點 nodeType 為3（文本節點包含文字，空格，換行等）

我們實際開發中，節點操作主要操作的是元素節點。

節點層級

利用DOM樹可以把節點劃分為不同的層級關系，常見的是父子兄弟層級關系。

1，父級節點

node.parentNode

parentNode屬性可返回某節點的父節點，注意是最近的一個父節點（親爸爸）。

如果指定的節點沒有父節點，則返回null。

<div class="demo">
	<div class="box">
		<span class="erweima">X</span>
	</div>
</div>

<script>
	//1，父節點parentNode
	var erweima = document.querySelector('.erweima');
	//var box = document.querySelector('.box');
	//得到的是離元素最近的父級節點（親爸爸）
	//如果找不到父節點，就返回null
	console.log(erweima.parentNode);
</script>

2，子節點

有兩種獲得方式，標準和非標準。

第一種： parentNode.childNodes（標準）
//雖然是標準的，但是不提倡使用

parentNode.childNodes 返回包含指定節點的子節點的集合。該集合為即時更新的集合。

注意：返回值里面包含了所有的子節點，包括元素節點，文本節點（文字，空格，換行等）等。

如果只想要獲得里面的元素節點，則需要專門處理。所以我們**一般不提倡使用childNodes** 。專門處理需要的代碼：

var ul = document.querySelector('ul');
for(var i = 0; i < ul.childNodes.length; i++) {
	if(ul.childNodes[i].nodeType == 1) {
		//即 ul.childNodes[i]是元素節點
		console.log(ul.childNodes[i];
	}
}

第二種： parentNode.children（非標準）
//雖然是非標準，但是可以得到我們想要的元素節點，
//所以推薦使用這個

parentNode.children是一個只讀屬性，返回所有子元素節點，其余節點不返回。所以重點掌握這個方法。

獲取第一個子元素和最后一個子元素

實際開發中，firstChild 和 lastChild 包含其他節點，操作不方便，而firstElementChild 和 lastElementChild又有兼容性問題。那么我們如何獲取第一個子元素節點或最后一個子元素節點呢？

解決方案：

1.獲取第一個子元素節點， parentNode.children[0];

2,獲取最后一個子元素節點，

parentNode.children[parentNode.children.length - 1]

這樣既可以獲得想要的元素節點，又不存在兼容性問題。

節點操作案例：

<script>
	//1，獲取元素
	var nav = document.querySelector('.nav');
	var lis = nav.children;//得到4個小li
	//2，注冊循環事件 點誰誰發生
	for(var i = 0; i < lis.length; i++) {
		lis[i].onmouseover = function() {
			this.children[i].style.display = 'block';
		}
		lis[i].onmouseout = function() {
			this.children[i].style.display = 'none';
		}
	}
</script>

節點層級--兄弟節點

node.nextSibling返回當前元素的下一個兄弟節點，找不到則返回null 。同樣，也是包含所有的節點。
node.previousSibling返回當前元素上一個兄弟節點，找不到則返回null。同樣，也包含所有的節點。
node.nextElementSibling返回當前元素下一個兄弟元素節點，找不到則返回null。
node.previousElementSibling返回當前元素的上一個兄弟元素節點，找不到則返回null。

1和2 取兄弟節點的時候，會把空格文本節點也取到。不適合用。

3和4取出來的確實是想要的兄弟節點，但是會有兼容性問題。

如何解決兼容性問題？

需要自己封裝一個函數。

function getNextElementSibling(element) {
	var el = element;
	while(el == el.nextSibling) {
		if(el.nodeType === 1) {
			return el;
		}
	}
	return null;
}

不過兄弟節點用的較少。

創建元素節點

document.createElement('tagName');

創建由tagName指定的HTML元素。因為這些元素原先不存在，是根據我們的需求動態生成的，所以我們也稱為動態創建元素節點。

添加節點：先創建，后添加

node.appendChild(child)將一個節點添加到指定父節點的子節點列表末尾。類似于css里面的after偽元素。node是父節點，child是子級。
node.insertBefore(child,指定元素)將一個節點添加到父節點的指定子節點前面。類似于css里面的before偽元素。

<body>
	<ul>
		<li>2333</li>
	</ul>
	<script>
		//1，創建元素節點
		var li = document.createElement('li');
		//2，添加后節點 node.appendChild(child)
		var ul = document.querySelector('ul');
		ul.appendChild(li);
		//添加前節點 node.insertBefore(child,指定元素);
		var lili = document.creatrElement('li');
		ul.insertBefore(lili,ul.children[0]);
	</script>
</body>

發布留言板案例：

<body>
	<textarea name="" id=""></textarea>
	<button>發布</button>
	<ul>
	</ul>
	<script>
		//1，獲取元素
		var btn = document.querySelector('button');
		var text = document.querySelector('textarea');
		var ul = document.querySelector('ul');
		//2，注冊事件 誰發生 怎么發生 發生什么
		btn.onclick = function() {
			if(text.value == "") {
				alert('內容不能為空！');
				return false;
			} else {
					//(1)創建元素節點
					var li = document.createElement('li');
					//先創建li 才能賦值
					li.innerHTML = text.value;
					//(2)添加節點
					ul.insertBefore(li,ul.children[0]);
				}
		}
	</script>
</body>

刪除子節點

node.removeChild(child)
//舉例：
ul.removeChild(ul.children[0]);

從DOM中刪除一個子節點，返回刪除的節點。

復制（克隆）節點：先克隆，再添加

node.cloneNode()
//返回調用該方法的節點的一個副本。
//這里的node是要被克隆的那個元素節點

注意：

如果括號參數為空或者false，則是淺克隆，即只克隆節點本身，不克隆里面的子節點。
如果括號里面的參數為true，則是深克隆，會復制節點本身以及里面所有的子節點。

<body>

三種動態創建元素的區別

document.write()
element.innerHTML
document.createElement()

區別：

document.write()是直接將內容寫入頁面的內容流，但是文檔流執行完畢，它會導致頁面全部重繪。
innerHTML是將內容寫入某個DOM節點，不會導致頁面全部重繪。
innerHTML創建多個元素效率更高，不需要拼接字符串，采取數組形式拼接，結構稍微復雜。
createElement（）創建多個元素效率稍微低一點點，但是結構更清晰。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="uft-8" />
	</head>
	<body>
		<button>點擊</button>
		<div class="inner"></div>
		<ul class="create"></ul>
		<script>
			//1，document.write()創建元素
				var btn = document.querySelector('button');
				btn.onclick = function() {
					document.write('<div>2333</div>');
				}
				//2，innerHTML 創建元素
				var inner = document.querySelector('.inner');
				var arr = [];
				for(var i = 0; i <= 10; i++) {
					arr.push('<a href="">233</a>');
				}
				inner.innerHTML = arr.join(' ');
				//3，document.createElement()創建元素
				var create = document.querySelector('.create');
				for (var i = 0; i <= 10; i++) {
					var li = document.createElement('li');
					create.appendChild(li);
				}
		</script>
	</body>
</html>

DOM事件流

事件流描述的是從頁面中接收事件的順序。
事件發生時，會在元素節點之間按照特定的順序傳播，這個傳播過程就是DOM事件流。

事件冒泡：IE最早提出，事件開始時由最具體的元素接收，然后逐級向上傳播到DOM最頂層節點的過程。

事件捕獲：網景最早提出，由DOM最頂層節點開始，然后逐級向下傳播到最具體的元素接收的過程。

注意：

1，JS代碼中只能執行捕獲或者冒泡其中的一個階段。二者只能選其一。

2，onclick和attachEvent只能得到冒泡階段。

3，addEventListener()中function()后面的參數，如果是true，表示在事件捕獲階段條用事件處理程序；如果是不寫參數或者參數是false，表示在事件冒泡階段調用事件處理程序。

4，實際開發中我們很少使用事件捕獲，我們更關注事件冒泡。

5，有些事件是沒有冒泡的，比如 onblur，onfocus，onmouseenter，onmouseleave。

事件對象

什么是事件對象？

eventTarget.onclick = function(event) { };
或
eventTarget.addEventListener('click', function(event) { })
//這個event就是事件對象。可以寫成e或者evt。
//這個參數在前面學習中是沒有寫出來的。

官方解釋：event對象代表事件的狀態，比如鍵盤按鍵的狀態，鼠標的位置，鼠標按鈕的狀態。

簡單理解：事件發生后，跟事件相關的一系列信息數據的集合都放到這個對象里面，這個對象就是事件對象event，它有很多屬性和方法。

比如：

1，誰綁定了這個事件。

2，鼠標觸發事件的話，會得到鼠標的相關信息，如鼠標位置。

3，鍵盤觸發事件的話，會得到鍵盤的相關信息，如按了哪個鍵。

這個event是個形參，系統幫我們設定為事件對象，不需要傳遞實參過去。

當我們注冊事件時，event對象就會被系統自動創建，并依次傳遞給事件監聽器（即事件處理函數）。

兼容性問題

事件對象的兼容性方案

事件對象本身的獲取存在兼容性問題：

1,標準瀏覽器中是瀏覽器給方法傳遞的參數，只需要定義形參3 就可以獲得到。 2，在IE6~8中，瀏覽器不會給方法傳遞參數，如果需要的話，需要到window.event中獲取查找。

解決：

e = e || window.event;

阻止事件冒泡的兩種方式

事件冒泡：開始時由最具體的元素接收，然后逐級向上傳播到DOM最頂層節點。

事件冒泡本身的特性，會帶來壞處，也會帶來好處，需要我們靈活掌握。

阻止事件冒泡

標準寫法：利用事件對象里面的e.stopPropagation()方法
非標準寫法：IE6-8使用。利用事件對象cancelBubble屬性。

常用的是標準寫法。IE瀏覽器因為兼容問題，不經常用。如果用了非標準寫法，可以調試一下兼容性：

if(e && e.stopPropagation) {
	e.stopPropagation();
} else {
	window.event.cancelBubble = true;	
}

用法：

<body>
	<div class="father">
		<div class="son">son兒子</div>
	</div>
	<script>
		//常見事件對象的屬性和方法
		//阻止冒泡 dom 推薦的標準 stopPropagation()
		var son = document.querySelector('.son');
		son.addEventListener('click', function(e) {
		alert('son');
		e.stopPropagation();//停止傳播
		e.canselBubble = true;//非標準 取消泡泡
},false);
var father = document.querySelector('.father');
father.addEventListener('click', function() {
	alert('father');	
},false);
document.addEventListener('click', function() {
	alert('document');
}
	</script>
</body>

事件委托

事件委托也稱為事件代理，在jQuery里面稱為事件委派。

事件委托的原理

不是每個子節點單獨設置事件監聽器，而是事件監聽器在其父節點上，然后利用冒泡原理影響設置每個子節點。

比如，給ul注冊點擊事件，然后利用事件對象的target來找到當前點擊的li，因為點擊li，事件會冒泡到ul上，ul有注冊事件，就會觸發事件監聽器。

事件委托的作用

我們只操作了依次DOM，提高了程序的性能。

<body>
	<ul>
		<li>2333</li>
		<li>2333</li>
		<li>2333</li>
		<li>2333</li>
	</ul>
	<script>
		//事件委托的核心原理：給父節點添加監聽器，
		//利用事件冒泡影響每一個子節點。
		var ul = document.querySelector('ul');
		ul.addEventListener('click', function(e) {
			//alert('2333');
			//e.target 可以得到我們點擊的對象
			e.target.style.backgroundColor = 'pink';
		})
	</script>
</body>

鼠標事件對象

event對象代表事件的狀態，跟事件相關的一系列信息的集合。現階段我們主要是用鼠標事件對象mouseevent和鍵盤事件對象keyboardevent。

<style>
	img {
		position: absolute;
		top: 2px;
	}
</style>
<body>
	<img src=''>
	<script>
		var pic = document.querySelector('img');
		document.addEventListener('mousemove', function(e) {
		var x = e.pageX;
		var y = e.pageY;
		console.log(x, y);//輸出x 和 y坐標
		//千萬不要忘記給left和top添加px單位！
		pic.style.left = x + 'px';
		pic.style.top = y + 'px';
		});
	</script>
</body>

常用的鍵盤事件

注意：

1，如果使用addEventListener，就不需要加on

2，三個事件的執行順序是： keydown-keypress-keyup

鍵盤事件對象

注意：onkeydown和onkeyup不區分字母大小寫，onkeypress區分字母大小寫。

在我們實際開發中，我們更多的使用keydown和keyup，它能識別所有的鍵（包括功能鍵）

Keypress不識別功能鍵，但是keyCode屬性能區分大小寫，返回不同的ASCII值。

注意：keydown和keyup在文本框里面的特點：他們兩個事件觸發的時候，文字還沒有落入文本框中。keyup事件觸發的時候，文字已經落入文本框里面了。因為鍵已經松開了。

案例：按下s鍵，搜索框獲得焦點

<body>
	<input type="text">
	<script>
		//核心思路：檢測用戶是否按下了s鍵。
		//如果按下了s鍵，就把光標定位到搜索框里面。
		//使用鍵盤事件對象里面的keyCode，
		//判斷用戶按下的是否是s鍵。
		//搜索框獲得焦點：使用js里面的focus（）方法
		var sch = document.querySelector('input');
		document.addEventListener('keyup', function(e) {
			if(e.keyCode == 83) {
				sch.focus();
			}
		})
	</script>
</body>

--------------------DOM---end------------------------

BOM瀏覽器對象模型

什么是BOM？

BOM（Brower Object Model）即瀏覽器對象模型。它提供了獨立于內容而與瀏覽器窗口進行交互的對象，其核心對象是window 。

BOM由一系列相關的對象構成，并且每個對象都提供了很多方法和屬性。

BOM缺乏標準，JS語法的標準化阻止是ECMA，DOM的標準化組織是W3C，BOM最初是Netscape（就是網景公司）瀏覽器標準的一部分。

BOM構成

BOM比DOM更大，它包含DOM。

window對象是瀏覽器的頂級對象。它具有雙重角色。

1，它是JS訪問瀏覽器窗口的一個接口。

2，它是一個全局對象。定于在全局作用域中的變量和函數都會變成window對象的屬性和方法。

在調用的時候可以省略window，前面學習的對話框都屬于window對象方法，比如alert() ，prompt()等。

注意：window下的一個特殊屬性 window.name

window對象的常用事件

窗口加載事件

這樣就可以把js放在任何一個地方了，js代碼都會執行了。

window.onload = function() { }
或者
window.addEventListener('load', function() { }）（推薦使用，因為沒有次數限制）

window.onload是窗口（頁面）加載事件，當文檔內容完全加載完成時會觸發該事件（包括圖像，腳本文件，css文件等），就會調用處理函數。

注意：

1，有了window.onload就闊以把JS代碼寫在頁面元素的上方，因為onload是等頁面內容全部加載完畢，再去執行處理函數的。

2，window.onload傳統注冊事件方式只能寫一次，如果有多個，會以最后一個window.onload為準。

3，如果使用window.addEventListener則沒有限制。

另一種情況：（加載較慢的情況）

document.addEventListener('DOMContenLoaded', function() { })

DOMContentLoaded事件觸發時，僅當DOM加載完成時，不包括樣式表，圖片，flash等等。

IE9以上才支持。

如果頁面的圖片很多的話，從用戶訪問到onload觸發可能需要較長的事件，交互效果就不能實現，必然影響用戶的體驗，此時用DOMContentLoaded事件比較合適。

調整窗口大小事件

window.onresize = function() {}
window.addEventListener('resize', function() {})

window.onresize是調整窗口大小加載事件，當觸發時就調用的處理函數。注意：1，只要窗口大小發生像素變化，就會觸發這個事件。2，我們經常利用這個事件完成響應式布局。window.innerWidth是當前屏幕的寬度。

兩種定時器

第一種定時器：setTimeout()定時器

window.setTimeout（調用函數，延遲的毫秒數）；

setTimeout（）方法用于設置一個定時器，該定時器在定時器到期后執行調用函數。

注意：

1，window可以省略。

2，這個調用函數可以直接寫函數，或者寫函數名，或者 '函數名（）'三種形式。但是不推薦最后一種寫法。

3，延遲的毫秒數可以省略，默認是0，如果寫，必須是毫秒數。不需要帶單位。

4，因為定時器可能有很多，所以我們經常給定時器賦值一個標識符。

//語法規范： window.setTimeout(調用函數，延遲時間）；
//setTimeout(function() {
//	console.log('午時已到');
//}, 2000);
function callback() {
	console.log('立即斬首');
}
setTimeout(callback, 3000);

回調函數 callback

window.setTimeout(調用函數，延遲的毫秒數）；

setTimeout（）這個調用函數，我們也稱為回調函數callback。

普通函數是按照代碼順序直接調用。

而這個函數，需要等待時間，時間到了才能取調用這個函數，因此我們稱為回調函數。

簡單理解：回調，就是回頭調用的意思。上一件事干完，再回頭調用這個函數。

以前講的element.onclick = function() {}或者element.addEventListener(‘click’, fn);里面的函數也是回調函數。

停止定時器（讓定時器停下來，別執行函數里的程序了）

clearTimeout(定時器名字）；

window.clearTimeout(timeout ID)

注意：1，window可以省略。2，里面的參數就是定時器的標識符。

第二種定時器 setInterval()

window.setInterval(回調函數，間隔的毫秒數）；

setInterval()方法重復調用一個函數，每隔這個時間，就去調用一次回調函數。

這是與setTimeout()最大的不同。setTimeout()定時器只調用一次回調函數。

注意：

1，window可以省略。

2，這個調用函數可以直接寫函數，或者函數名或者采用字符串 ’ 函數名() ’ 三種形式。

3，間隔的毫秒數可以省略，默認是0，如果寫，必須是毫秒數，不用帶單位。

4，因為定時器可能有很多，所以我們經常給定時器賦值一個標識符。

案例：自動倒計時

<body>
	<div>
		<span class="hour">1</span>
		<span class="minute">2</span>
		<span class="second">3</span>
	</div>
	<script>
		//1，獲取元素
		var hour = document.querySelector('.hour');
		var minute = document.querySelector('.minute');
		var second = document.querySelector('.second');
		var inputTime = +new Date('2019-5-1 18:00:00');//用戶輸入時間總的毫秒數
		countDown();//現調用一次函數，防止第一次刷新頁面出現空白
		//2，開啟定時器
		setInterval(countDown, 1000);
		function countDown() {
			var nowTime = +new Date();
			//返回的是當前時間總的毫秒數
			var times = (inputTime - nowTime) / 1000;
			//times是剩余需要倒計時的總的秒數
			var h = parseInt(times / 60 / 60 / % 24);//小時
			h = h < 10 ? '0' + h: h;
			//格式搞的好看一點
			hour.innerHTML = h ;
			//把倒計時的小時數給小時盒子
			var m = parseInt(times / 60 % 60);//分鐘
			m = m < 10 ? '0' + m: m;
			minute.innerHTML = m;
			var s = parseInt(times % 60);//秒
			s = s < 10 ? '0' + s: s;
			second.innerHTML = s;
		}
	</script>
</body>

案例：發送短信驗證

JS執行機制

JS是單線程：同一時間只做一件事。代碼是從上到下一行一行的執行。

同步和異步：最新的js可以創建多個任務了。

為了解決這個問題，利用多核CPU的計算能力，HTML5提出Web Worker 標準，允許JS腳本創建多個線程。于是，JS中出現了同步和異步。

同步

前一個任務結束后再執行后一個任務，程序的執行順序與任務排列順序是一直的，同步的。比如做飯的同步做法：我們要燒水煮飯，等水開了（10分鐘后），再去切菜，炒菜。

異步

在做一件事情時，因為這件事情會話費很長時間。在做這件事情的同時，還可以去處理其他事情。比如做飯的異步做法，在燒開水的同時，利用這10分鐘，去切菜，炒菜。

同步任務

同步任務都在主線程上執行，形成一個執行線。

異步任務

JS的異步是通過回調函數實現的。一般而言，異步任務有以下三種類型： 1，普通事件，如click，resize等 2，資源加載，如load，error等 3，定時器，包括setTimeout，setInterval等。

異步任務相關回調函數添加到任務隊列中，任務隊列也稱為消息隊列。

執行機制：任務分成同步任務和異步任務。先執行完同步任務，再去執行異步任務。

1，先執行執行棧中的同步任務。

2，異步任務（回調函數）放入任務隊列中。

3，一旦執行棧中的所有同步任務執行完畢，系統就會按照次序讀取任務隊列中的異步任務，于是被讀取的異步任務結束等待狀態，進入執行棧，開始執行。

由于主線程不斷的重復獲得任務、執行任務、再獲取任務、再執行，所以這種機制被稱為事件循環（event loop）。

location對象

URL

統一資源定位符（Uniform Resource Locator，URL）是互聯網上標準資源的地址。互聯網上的每個文件都有一個唯一的URL，它包含的信息指出文件的位置以及瀏覽器應該怎么處理它。

URL的一般語法格式為：

protocol://host[:port]/path/[?query]#fragment
如：
http://www.itcast.cn/index.html?name=andy&age=18#link

location對象的屬性

案例：獲取URL參數數據：數據在不同網頁中傳遞

第一個頁面：輸入信息的界面

<body>
	<form action="index.html">
		用戶名：<input type="text" name="uname">
		<input type="submit" value="登錄" />
	</form>
</body>

第二個頁面：接收信息的界面

<body>
	<div></div>
	<script>
		console.log(location.search);//?uname=andy
		//1，先去掉? substr('起始位置', 截取幾個字符）；
		var params = location.search.substr(1);//uname=andy
		//2，利用 = 號把字符串分割為數組 split('=');
		var arr = params.split('=');
		console.log(arr);//["uname", "ANDY"]
		var div = document.querySelector('div');
		//3，把數據寫入div中
		div.innerHTML = arr[1] + "歡迎您";
	</script>
</body>

location對象的方法

navigator對象：知道用戶用了什么瀏覽器

navigator對象包含有關瀏覽器的信息，它有很多屬性，我們最常用的是userAgent，該屬性可以返回由客戶機發送服務器的user-agent頭部的值。

下面前端代碼可以判斷用戶哪個中斷打開的頁面，實現跳轉：

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobild|BlackBerry|IEMobild|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
window.location.href = ""; //手機
} else {
	window.location.href = ""; //電腦
}
//把這個代碼賦值到<script></script>里面就闊以了。
//要查哪個網頁地址，就把地址補齊到href里。

window對象給我們提供了一個history對象，與瀏覽器歷史紀錄進行交互。該對象包含用戶（在瀏覽器窗口中）訪問過的URL。

history.back();history.forward();history.go(1);

PC網頁端特效

知識點：

offset
client
scroll
封裝簡單動畫函數
網頁輪播圖

offset系列屬性

offset翻譯過來就是偏移量，我們使用offset系列相關屬性可以動態的得到該元素的位置（偏移）、大小等。

獲得元素舉例帶有定位父元素的位置
獲得元素自身的大小（寬度高度）
注意：返回的數值都不帶單位

offset系列常用屬性：

offset翻譯過來就是偏移量，我們使用offset系列相關屬性可以動態的得到該元素的位置（偏移）、大小等。

獲得元素舉例帶有定位父元素的位置
獲得元素自身的大小（寬度高度）
注意：返回的數值都不帶單位

offset系列常用屬性：

只有上和左，沒有下和右。

offset和style的區別

案例：獲取鼠標在盒子內的動態位置

![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200427005033196.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R1emkwMDdh,size_16,color_FFFFFF,t_70)

元素可視區client系列

client翻譯過來就是客戶端，我們使用client系列的相關屬性來獲取元素在可視區的相關信息。通過client系列的相關屬性可以動態的得到該元素的邊框大小、元素大小等。

注意和offset的區別。clientWidth是不含邊框的。

立即執行函數

<body>
	<script>
		//1，立即執行函數：不需要調用，立馬能夠子級執行的函數
		function fn() {
			console.log(1);
		}
		fn();
		//2，寫法也可以傳遞參數進來
		//(function() {})()或者(function() {}())
		(function(a, b) {
			console.log(a + b);
			var num = 10;
		})(1, 2);//第二個小括號可以看作是調用函數
		(function sun(a, b) {
			console.log(a + b);
			var num = 10;//局部變量
		}(2, 3));
		//3，立即執行函數最大的作用就是 獨立創建了一個作用域，
		//里面所有的變量都是局部變量，不會右命名沖突的情況。
	</script>
</body>

元素滾動scroll系列

scroll翻譯過來就是滾動的，我們使用scroll系列的相關屬性可以動態的得到該元素的大小、滾動距離等。

常用的是 element.scrollTop和element.scrollLeft。

window.pageXOffset 和 window.pageYOffset屬性，返回文檔在窗口左上角水平和垂直方向滾動的像素。

pageXOffset設置或返回當前網頁相對于窗口顯示區左上角的X位置。pageYOffset設置或返回當前頁面相對于窗口顯示區左上角的Y位置。

pageXOffset 和pageYOffset屬性相當于scrollX和scrollY屬性。

這些屬性是只讀的。

頁面被卷去的頭部兼容性解決方案

需要注意的是，頁面被卷去的頭部，有兼容性問題，因此被卷去的頭部通常有如下幾種寫法：

聲明了DTD，使用document.documentElement.scrollTop
未聲明DTD，使用document.body.scrollTop
新方法window.pageYOffset和window.pageXOffset , IE9開始支持。

function getScroll() {
	return {
	left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
	top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
	}
}
//使用的時候 
getScroll().left

動畫函數封裝

動畫實現原理：

實現步驟：

獲得盒子當前的位置
讓盒子在當前位置加上1個移動距離
利用定時器不斷重復這個操作
加一個結束定時器的條件
注意：此元素需要添加定位，才能使用element.style.left
因為要讓盒子脫離標準流，所以要添加定位。
函數封裝：

<script>
	//簡單動畫函數封裝obj目標對象 target 目標位置
	function animate(obj, target) {
		var timer = setInterval(function() {
			if (obj.offsetLeft >= target) {
			//運動到一定距離，就停止計時器
				clearInterval(timer);
			}
			obj.style.left = obj.offsetLeft + 1 + 'px';
		}, 200);
	}
	var div = document.querySelector('div');
	//調用函數
	animate(div, 300);
</script>

動畫函數給不同元素記錄不同定時器

如果多個元素都使用這個動畫函數，每次都要var聲明定時器。我們可以給不同元素使用不同的定時器（自己專門用自己的定時器）

核心原理：利用JS是一門動態語言，可以很方便的給當前對象添加屬性。

<script>
	//var obj = {};
	//obj.name = 'andy';
	//簡單動畫函數封裝obj是目標對象 target 是目標位置
	//給不同的元素指定了不同的定時器
	function animate(obj, target) {
		obj.timer = setInterval(function() {
			if(obj.offsetLeft >= target) {
				clearInterval(obj.timer);
			}
				obj.style.left = obj.offsetLeft + 1 + 'px';
		}, 200);
	}
	var div = document.querySelector('div');
	var span = document.querySelector('span');
	//調用函數
	animate(div,300);
	animate(span, 200);
</script>

改進版：

<script>
	//當我們不斷的點擊按鈕，這個元素的速度會越來越快，因為開啟了太多的定時器
	//解決方案就是 讓我們元素只有一個定時器執行
	//先清除以前的定時器，只保留當前一個定時器執行
	clearInterval(obj.timer);
	function animate(obj, target) {
		obj.timer = setInterval(function() {
			if(obj.offsetLeft >= target) {
				clearInterval(obj.timer);
			}
				obj.style.left = obj.offsetLeft + 1 + 'px';
		}, 200);
	}
	var div = document.querySelector('div');
	var span = document.querySelector('span');
	//調用函數
	animate(div,300);
	animate(span, 200);
</script>

案例：淘寶網頁輪播圖，也叫焦點圖

節流閥

防止輪播圖按鈕連續點擊造成播放過快。

節流閥目的：當上一個函數動畫內容執行完畢，再去執行下一個函數動畫，讓事件無法連續觸發。

核心思路:利用回調函數，添加要給變量來控制，鎖住函數和解鎖函數。

//開始設置一個變量 
var flag = true;
if(flag) {
	flag = false;
	do something...//關閉水龍頭
}
//利用回調函數，動畫執行完畢后，
flag = true;//打開水龍頭

案例：淘寶側邊欄的返回頂部

window.scroll(x,y) 整個窗口滾動到文檔中的特定位置。

x是距離文檔左邊的距離，y是距離文檔頂部的距離。x和y都不帶單位。

在線咨詢

上一篇：抓取網站源代碼（html抓取工具）
下一篇：「胖達分享」網頁中的圖片和html文檔的路徑

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商