JavaScript核心（三）

1.1 今日目標

能夠說出js中常見的系統對象
能夠查閱系統對象的常用方法
能夠創建節點並添加到頁面中
能夠完成節點的替換，刪除，克隆操作
能夠獲取元素的屬性節點
能夠修改或添加元素的屬性節點
能夠獲取和設置元素的css樣式
能夠用多種方法獲取（查找）頁面中的節點
能夠說出至少10個以上的事件名稱
能夠說出3種事件綁定方式及其區別
能夠理解事件冒泡及捕獲的過程,並能阻止冒泡事件

1.2 事件

1.2.1 簡介

鼠標、鍵盤所發生的動作就是事件，事件有onclick、onmouseover、onmouseout等等

事件發生需要有事件處理，該處理稱爲“事件處理”，事件處理通常由函數來執行。

1.2.2 DOM1級事件

1、添加DOM1級事件

事件以onclick爲例：

方法一：行內綁定
<input type="button"  onclick='事件處理函數()' >
方法二：行內綁定
<input type="button"  onclick='函數體' >
方法三：動態綁定
node.onclick=function(){
}
方法四：動態綁定
node.onclick=函數名

2、取消DOM1級事件

node.onclick=null

3、例題：點擊按鈕，只能彈出一次對話框

<script>
window.onload=function(){
	document.getElementById('btn').onclick=function(){
		alert('鋤禾日當午');
		this.onclick=null;	//取消事件綁定
	}
}
</script>
<input type="button" value="點擊" id='btn'>

1.2.2 DOM2級事件

1、添加DOM2級事件

注意：DOM2級事件中沒有’on’

<input type="button" value="點擊" id='btn'>
<script>
window.onload=function(){
	//DOM2級綁定
	document.getElementById('btn').addEventListener('click', function(){
		alert('鋤禾日當午');
	});
}
</script>

例題：鼠標移動到div上變顏色

<style>
#test{
	width: 100px;
	height: 100px;
	background-color: #ccc;
}
</style>
<div id="test"></div>
<script>
window.onload=function(){
	var oDiv=document.getElementById('test');
	//點擊尺寸變大
	oDiv.addEventListener('click', function(){
		var oStyle=window.getComputedStyle(oDiv);
		oDiv.style.width=parseInt(oStyle.width)+10+'px';
		oDiv.style.height=parseInt(oStyle.height)+10+'px';
	});
	//鼠標移上去更改顏色
	oDiv.addEventListener('mouseover',function(){
		this.style.backgroundColor='#FF0000';
	})
	//鼠標離開更改顏色
	oDiv.addEventListener('mouseout',function(){
		this.style.backgroundColor='#cccccc';
	})
}
</script>

運行結果

2、添加同類型事件

注意：DOM1級事件添加多個同類型的事件只有最後一個起作用。所有DOM1級是不支持添加多個同類型事件

DOM2 級可以添加多個同類型事件

<script>
window.onload=function(){
	var oBtn=document.getElementById('btn');
	oBtn.addEventListener('click', function(){
		alert('鋤禾日當午');
	});
	oBtn.addEventListener('click',function(){
		alert('汗滴禾下土');
	})
}
</script>
<input type="button" value="點擊" id='btn'>

3、取消DOM2級事件

語法：

oBtn.removeEventListener(事件, 函數名);

要取消DOM2級事件必須是有名函數，不可以是匿名函數

例題

<body>
<script>
function fun1(){
	alert('鋤禾日當午');
}
function fun2(){
	alert('汗滴禾下土');
}

window.onload=function(){
	var oBtn=document.getElementById('btn');
	oBtn.addEventListener('click',fun1);	//添加事件
	oBtn.addEventListener('click',fun2);	//添加事件

	document.getElementById('btn2').onclick=function(){	//取消DOM2級事件
		oBtn.removeEventListener('click', fun1);
		oBtn.removeEventListener('click',fun2);
	}
}
</script>
<input type="button" value="點擊" id='btn'><br>
<input type="button" value="取消事件" id='btn2'>
</body>

1.2.3 事件流

多個嵌套的標記擁有相同事件，一個元素的事件觸發，同時會觸發其他元素相同的事件，稱爲事件流

事件流有兩種：

1、冒泡型：事件有內往外（false）

2、捕捉型：事件由外往內（true）

注意：DOM1級不能操作事件流，只能是冒泡型，不能改變

例題：通過DOM2級事件操作事件流

<body>
<style>
#aa{
	width:150px;
	height: 150px;
	background-color: #F00;
}
#bb{
	width:100px;
	height: 100px;
	background-color: #090;
}
#cc{
	width: 50px;
	height: 50px;
	background-color: #00F;
}
</style>
<div id="aa">aa
	<div id="bb">bb
		<div id="cc">cc</div>
	</div>
</div>
<script>
window.onload=function(){
	document.getElementById('aa').addEventListener('click', function(){
		alert('aa')
	}, true);
	
	document.getElementById('bb').addEventListener('click', function(){
		alert('bb')
	}, true);

	document.getElementById('cc').addEventListener('click', function(){
		alert('cc')
	}, true);   //true 表示捕捉型， false表示冒泡型【冒泡】
}
</script>
</body>

運行結果

常用事件:

onblur：		失去焦點
onfocus:	獲得焦點
onload:		當頁面加載的時候
onunload:	當頁面卸載的時候
onchange:	發生改變的時候
onclick:	單擊的時候
onmouseover:	當鼠標移上去
onmouseout:		當鼠標移走
onmousemove:	當鼠標移動
onmousedown:	當鼠標按下去
onmouseup		當鼠標擡起
onsubmit:		當表單提交
onkeydown		當鍵盤按下去
onkeyup			當鍵盤擡起

1.3 事件對象

1.3.1 概述

每個事件發生的時候，計算機都會產生相應的對象，用來保存事件發生時候計算機的狀態。

1.3.2 獲取事件對象

當事件發生的時候，事件對象自動傳遞給事件處理函數。

//DOM1級獲取事件對象
btn.οnclick=function(evt){  //evt表示事件對象
	
}
//DOM2級獲取事件對象
btn.addEventListener('click', function(evt){
	
})

1.3.3 事件對象應用

應用一：阻止事件流

<script>
window.onload=function(){
	document.getElementById('aa').addEventListener('click', function(evt){
		alert('aa');
		evt.stopPropagation();	//停止事件流
	}, false);
	
	document.getElementById('bb').addEventListener('click', function(evt){
		alert('bb');
		evt.stopPropagation();	//停止事件流
	}, false);

	document.getElementById('cc').addEventListener('click', function(evt){
		alert('cc');
		evt.stopPropagation();	//停止事件流
	}, false);
}
</script>

//Propagation：傳播

提醒：事件對象也可以阻止DOM1級的事件流

<script>
window.onload=function(){
	document.getElementById('aa').onclick=function(evt){
		alert('aa');
		evt.stopPropagation();
	}
	document.getElementById('bb').onclick=function(evt){
		alert('bb');
		evt.stopPropagation();
	}
	document.getElementById('cc').onclick=function(evt){
		alert('cc');
		evt.stopPropagation();
	}
	
}
</script>

小結：可以通過事件對象阻止事件流，不管是DOM1級的還是DOM2級的都可以阻止

應用二：阻止瀏覽器默認動作

表單提交時候，瀏覽器會根據action的值進行跳轉，這個動作稱爲瀏覽器的默認動作。

return false：阻止DOM1級的默認動作

evt.preventDefault()：阻止DOM1和DOM2級的默認動作

例題

<body>
<form action="" id='frm'>
	請輸入一個數 <input type="text" name='num' id="num"><br>
	<input type="submit" value="提交">
</form>
<script>
window.onload=function(){
	//阻止DOM1級的默認動作
	document.getElementById('frm').onsubmit=function(evt){
		if(isNaN(document.getElementById('num').value)){
			alert('請輸入一個數');
			//return false;			//阻止DOM1級的默認動作
			evt.preventDefault();	//阻止DOM1級和DOM2的默認動作
		}
	}

	//阻止DOM2級的默認動作
	/*
	document.getElementById('frm').addEventListener('submit', function(evt){
		if(isNaN(document.getElementById('num').value)){
			alert('請輸入一個數');
			evt.preventDefault();	//阻止DOM1級和DOM2的默認動作
		}
	});
	*/
}
</script>

應用三：光標位置

evt.screenX		相對於屏幕的左上角
evt.screenY

evt.clientX		相對於客戶端的左上角，不包含滾動條的距離
evt.clientY

evt.pageX		相對於客戶端的左上角，包含滾動條的距離
evt.pageY

evt.offsetX		相對於自身的左上角
evt.offsetY

例題：小鳥跟隨鼠標

<style>
#bird{
	position: absolute;
}
</style>
<img src="bird.gif" id='bird'>
<script>
window.onload=function(){
	var oImg=document.getElementById('bird');
	window.onmousemove=function(evt){
		oImg.style.left=evt.clientX+'px';    //將鼠標的x位置付給小鳥距左的距離
		oImg.style.top=evt.clientY+'px';	  //將鼠標的y位置付給小鳥距上的距離
	}
}
</script>

運行結果

1.4 作業

作業一：判斷閏年

<script>
window.onload=function(){
	document.getElementById('btn').onclick=function(){
		var year=document.getElementById('year').value;
		if(year==''){
			alert('年份不能爲空');	
			document.getElementById('year').focus();	//獲取焦點
		}else{
			if(isNaN(year)){
				alert('您輸入的不是數字');
				document.getElementById('year').select();	//選中文本框的內容
			}else{
				if(year.indexOf('.')!=-1){
					alert('不能輸入小數');
					document.getElementById('year').select();
				}else{
					if(year<1){
						alert('必須輸入正整數');
						document.getElementById('year').select();
					}else{
						if(year%4==0 && year%100!=0 || year%400==0){
							alert(year+'是閏年');
						}else{
							alert(year+'是平年');
						}
					}
				}
			}
		}
	}
}
</script>
<form action="">
	請輸入年份： <input type="text" id="year">
	<input type="button" id='btn' value="判斷閏年">
</form>

作業二：判斷成績

<form action="">
	語文：<input type="text" id="ch"> <br>
	數學：<input type="text" id="math"> <br>
	<input type="button" value="判斷成績" id='btn'>
</form>
<script>
window.onload=function(){
	document.getElementById('btn').onclick=function(){
		var ch=document.querySelector('#ch').value;	//語文成績
		var math=document.querySelector('#math').value;	//數學成績
		if(ch=='' || isNaN(ch) || ch<0 ||ch>100){
			alert('語文成績必須在0-100之間');
			document.getElementById('ch').select();
		}else if(math=='' || isNaN(math) || math<0 || math>100){
			alert('數學成績必須在0-100之間');
			document.getElementById('math').select();
		}else{
			//ch=parseInt(ch);		//轉成整數類型
			//math=parseInt(math);	//轉成整數類型
			ch=parseFloat(ch);		//轉成浮點型
			math=parseFloat(math);
			var avg=(ch+math)/2;
			alert('您的平均分是：'+avg);
			if(avg>=90)
				alert('A');
			else if(avg>=80)
				alert('B');
			else if(avg>=70)
				alert('C');
			else if(avg>=60)
				alert('D');
			else
				alert('E')
		}
		
	}
}
</script>

作業三：更改顏色

<div id="content">
	離離原上草，一歲一枯榮。<br>
	野火燒不盡，春風吹又生。<br>
	遠芳侵古道，晴翠接荒城。<br>
	又送王孫去，萋萋滿別情。<br>
</div>
<select id="color">
	<option value="#000000">---請選擇顏色---</option>
	<option value="#FF0000">紅色</option>
	<option value="#009900">綠色</option>
	<option value="#0000FF">藍色</option>
</select>
<script>
	window.onload=function(){
		document.getElementById('color').onchange=function(){
			document.getElementById('content').style.color=this.value;
		}
	}
</script>

運行結果

作業四：打印圖形

<style>
	body{
		text-align: center;
		font-size: 20px;
	}
	span{
		width: 28px;
		display:inline-block;
	}
</style>
<script>
	for(var i=1;i<=9;i++){
		n=i<=5?i:(10-i);
		n=(2*n)-1;
		for(var j=1;j<=n;j++){
			document.write('<span>*</span>');
		}
		document.write('<br>');
	}
</script>

運行結果

作業五：打印圖形

<style>
span{
	display: inline-block;
	width: 27px;
	font-size: 20px;
	text-align: center;
}
</style>
<script>
for(var i=0;i<=9;i++){
	for(var j=0;j<=9;j++){
		if(i>=2 && i<=7 && j>=2 && j<=7)
			document.write('<span></span>');
		else
			document.write('<span>*</span>');
	}
	document.write('<br>');
}
</script>

運行結果

作業六：打字機的效果

<body>
<style>
	div{
		width: 300px;
		height: 100px;
		border: #000 solid 1px;
		margin-bottom: 30px
	}
</style>
<div id='content'></div>
<textarea id="txt" cols="30" rows="5"></textarea><br>
<input type="button" value="打印" id='btn'>
<script>
window.onload=function(){
	document.getElementById('btn').onclick=function(){
		var str=document.getElementById('txt').value;		//獲取打印的內容
		if(str=='')	//打印內容爲空，就終止
			return;
		var n=0;
		var id=setInterval(function(){
			if(n==str.length){
				document.getElementById('content').innerHTML=str;
				clearInterval(id);	//關閉時鐘
			}
			else{
				document.getElementById('content').innerHTML=str.substr(0,n)+'_';
				n++;
			}
		}, 100);	//每隔100毫秒截取一次字符串
	}
}
</script>
</body>

運行結果

作業七：自選彩票（36選）

<style>
	div{
		width: 50px;
		height: 50px;
		float: left;
		border: #000 solid 1px;
		margin-right: 10px;
		text-align: center;
		line-height: 50px;
	}
</style>
<div class="num"></div>
<div class="num"></div>
<div class="num"></div>
<div class="num"></div>
<div class="num"></div>
<div class="num"></div>
<div class="num"></div>
<input type="button" value="機選" id='btn'>
<script>
window.onload=function(){
	document.getElementById('btn').onclick=function(){
		var oDiv=document.getElementsByClassName('num');
		var array=[];	//保存已經生成的數字
		for(var i=0;i<7;i++){
			while(true){
				var num=Math.floor(Math.random()*36)+1;	//生成隨機數
				if(array.indexOf(num)==-1){	//數組中不存在
					oDiv[i].innerHTML=num;	//顯示數字
					array.push(num);		//將數字保存到數組中
					break;
				}
				
			}
		}
	}
}
</script>

運行結果

作業八：本月第一天是星期幾

<script>
var array=['天','一','二','三','四','五','六'];
var date=new Date();
date.setDate(1);	//設置本月的第一天
var n=date.getDay();	//返回星期的索引號
console.log('本月第一天星期'+array[n]);
</script>

作業九：倒計時

<div id="t"></div>
<script>
window.onload=function(){
	var date2=new Date(2020,1,1,0,0,0);	//2020年元旦
	var time2=date2.getTime();		//2020年元旦的時間戳
	setInterval(function(){
		var date1=new Date();	//當前時間
		var time1=date1.getTime();	//當前時間戳
		var diff_time=parseInt((time2-time1)/1000);	//距離目標剩餘時間（數）
		var day=parseInt(diff_time/3600/24);		//剩餘天數
		var hour=parseInt((diff_time/3600)%24);	//剩餘小時
		var minute=parseInt((diff_time/60)%60);	//剩餘分鐘數
		var second=diff_time%60;		//剩餘秒數
		document.getElementById('t').innerHTML='距離2020年元旦還有:'+day+'天'+hour+'小時'+minute+'分鐘'+second+'秒';
	}, 1000);
}
</script>

運行結果

作業十：年月日

<select id="year"></select>年
<select id="month"></select>月
<select id="day"></select>日
<script>
//加載年
function initYear(){
	var date=new Date();
	var y=date.getFullYear();
	appendOption('year',y-100,y);
	document.getElementById('year').children[80].setAttribute('selected', 'selected');
}
//加載月
function initMonth(){
	appendOption('month',1,12);
}
//加載日
function initDay(){
	document.getElementById('day').innerHTML='';	//清空日期下的所有子元素
	var n=getDayCount();
	appendOption('day',1,n);
}
/*
*作用：在select元素下添加option
*@param target string 目標id,
*@param start int 起始值
*@param end int 結束值
*/
function appendOption(target,start,end){
	for(var i=start;i<=end;i++){
		var option=document.createElement('option');
		option.innerHTML=i;
		option.setAttribute('value', i);
		document.getElementById(target).appendChild(option);
	}
}
//獲取指定月份的天數
function getDayCount(){
	var y=document.getElementById('year').value;
	var m=document.getElementById('month').value;
	if(m==1||m==3||m==5||m==7||m==8||m==10||m==12){
		return 31;
	}else if(m==2){
		if(y%4==0 && y%100!=0 || y%400==0)
			return 29;
		return 28;
	}else{
		return 30;
	}
}
//調用方法
window.onload=function(){
	initYear();
	initMonth();
	initDay();
	document.getElementById('year').onchange=initDay;    //年發生了改變
	document.getElementById('month').onchange=initDay;	  //月發生了改變
}
</script>

運行結果

作業十一：div尺寸變大

<style>
#test{
	width:100px;
	height: 100px;
	background-color: #ccc;
}
</style>
<div id='test'></div>
<script>
window.onload=function(){
	document.getElementById('test').onclick=function(){
		oStyle=window.getComputedStyle(this);
		var w=oStyle.width;	//獲取寬度，帶有px
		var h=oStyle.height;
		w=parseInt(w);		//去除px
		h=parseInt(h);		//去除px
		w+=5;
		h+=5;
		document.getElementById('test').style.width=w+'px';//樣式都要帶有px
		document.getElementById('test').style.height=h+'px';
	}
}
</script>

運行結果

JavaScript核心（三）

1.1 今日目標

1.2 事件

1.2.1 簡介

1.2.2 DOM1級事件

1.2.2 DOM2級事件

1.2.3 事件流

1.3 事件對象

1.3.1 概述

1.3.2 獲取事件對象

1.3.3 事件對象應用

1.4 作業

JavaScript核心（三）

phpstudy配置虛擬主機後,localhost不能訪問

JavaScript高級（一）

IE瀏覽器僅在Ajax get請求的緩存問題的幾種解決方案

redis配置文件中文版

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結