JavaScript（二）

---

進階篇

事件

基本屬性

//onclick:單擊事件
<button onclick="myfun1()">按鈕</button>
<script>
     function myfun1(){
         alert("這裏是Onclick");
     }
</script>

//onmouseover:鼠標經過事件
//onmouseout:鼠標移出事件
//當把鼠標移動到藍色的div框中,出現myFunc1()的內容,移開後出現myFun2()的內容
<style>
    div{
        margin:20px;
        height:200px;
        width:200px;
        background-color:lightblue;
    }
</style>
<div onmouseout="myFunc2(this)" onmouseover="myFunc3(this)"></div>
<script>
    function  myFunc2(ooj) {
        ooj.innerHTML="welcome";
    }
    function myFunc3(ooj) {
        ooj.innerHTML="monkey";
    }
</script>

//onchange:文本內容改變事件
<fomr>
   <input type="text" onchange="myFun4(this)">
</form>
<script>
   function myFunc4(ch){
        alert("文本框內容已經改變!");
   }
</script>
//
<input type="text" onchange="alert('文本框內容已被改變!')">


//onselect:文本框選中事件
<input type="text" onselect="myFunc5(this)">
<script>
   function myFunc5(se){
       se.style.background="lightblue";/*選中後文本框背景色爲藍色*/
   }
</script>
//onfucus:光標聚集事件
//onblur：移開光標事件
//onLoad:網頁加載事件
//onUload:關閉網頁事件

---

DOM操作

HTML

<!--改變HTML輸出流--!>
//不能在文檔加載完後使用,否則之前的內容會被覆蓋
document.write();
<!--尋找元素--!>
//通過id得到
//通過標籤名找到
<!--改變HTML內容--!>
屬性:innerHTML
<!--改變HTML屬性--!>
屬性:attribute
<p id="monkey">Stay</p>
<button onclick="myFun1()">按鈕</button>
<script>
    function myFunc1(){
       var nv = document.getElementById("monkey");
       //var nv = ducument.getElementById("monkey").innerHTML = "Hungry";
       nv.innerHTML = "Hungry";
       var nb = document.ElementsByTagName(p);//返回相同標籤元素的集合
    }
</script>

CSS

<style>
   .div{
       margin:10px;
       width:200px;
       height:200px;
       backgroud:lightblue;//這是背景顏色
       color:red;//這是字體顏色
   }
</style>
<div id="div" class="div">Monkey</div>
<div onclick="myFunc2()">按鈕</div>
<script>
    function myFunc2(){
        document.getElementById("div").style.background = "blue";
    }
</script>

句柄

<button id="btn">按鈕</button>
<script>
    var x = document.getElementById("btn");
    x.addEventListener("click",myFunc1);//句柄
    x.addEventListener("click",myFunc2);//句柄
    x.removeEventListener("click",myFunc1);//移除句柄
    function myFunc1(){
        alert("welcome");
    }
    function myFunc2(){
        alert("monkey");
    }
</script>

DOM0級事件處理

<div>
    <button id="btn1">按鈕</button>
</div>
<script>
     var btn1 = document.getElementById("btn1");
     btn1.onclick = function () {alert("hello");}//hello這裏會被覆蓋掉
     btn1.onclick = function () {alert("monkey");}
     //btn1.onclick = null;//去除事件
</script>

DOM2級事件處理

<div>
       <button id="btn1">按鈕</button>
</div>
<script>
       var btn1 = document.getElementById("btn1");
       btn1.addEventListener("click",myFunc1);
       btn1.addEventListener("click",myFunc2);
       //myFunc2不會被覆蓋,在myFunc1彈出確認後立即彈出
       function myFunc1() {
            alert("monkey!");
       }
       function myFunc2() {
            alert("this is another monkey!");
       }
       //btn1.removeEventListener("click",myFunc1);
</script>

事件對象

 <div>
    <button id="btn1">按鈕</button>
 </div>
 <script>
     document.getElementById("btn1").addEventListener("click",myFun1);
     function myFunc1(event) {
         alert(event.type);//事件類型
         alert(event.target);//事件標籤
     }
 </script>
 
 //冒泡行爲？？？當點擊按鈕,myFunc1彈出兩次且確認後,出現了myFunc2彈出內容"div"
 即只想id爲btn1的按鈕點擊後,綁定事件myFunc1(),但在myFunc1執行完了之後又調用了id爲div的綁定事件,從內部到外部的冒泡執行
 <div id="div">
       <button id="btn1">按鈕</button>
 </div>
 <script>
       document.getElementById("btn1").addEventListener("click",myFunc1);
       document.getElementById("div").addEventListener("click",myFunc2);
       function myFunc1(event) {
           alert(event.type);
           alert(event.target);
           event.stopPropagation();//如果不加這句話,會出現冒泡行爲
       }
       function myFunc2() {
           alert("div");
       }
 </script>
 
 //阻止事件默認行爲:
 event.preventDefault();

---

瀏覽器對象

window對象

對象不需創建可直接使用
window引用可省略,即 方法名();

//彈出框有關
alert() - 警告框
confirm() - 顯示帶有信息和確認,確認true,取消false
prompt() - 顯示可提示用戶輸入的對話框,返回用戶輸入的內容

//瀏覽器窗口長寬
window.innerHeight - 瀏覽器窗口的內部高度
window.innerWidth - 瀏覽器窗口的內部高度

//打開關閉
open() - 打開新窗口
close() - 關閉當前窗口

計時器

setInterval() -  按照指定毫秒數調用函數,循環
   clearInterval() - 取消設置的timeout
setTimeout(執行段,毫秒值) - 指定毫秒數後調用函數,只執行一次
   clearTimeout() - 取消設置的timeout

History對象

history.back() - 與在瀏覽器點擊後退按鈕相同
history.forward() - 與在瀏覽器中點擊按鈕向前相同
history.go() - 進入歷史中某個頁面

Location對象

location.hostname - web主機域名
location.pathname - 返回當前頁面的路徑和文件名
location.port - web主機的端口
location.protocol - 返回所使用的web協議
location.href - 當前頁面url
location.assign() - 加載新的文檔
location.reload() - 重新加載當前頁面,即刷新

Screen對象（用戶有關屏幕信息）

screen.availWidth - 可用屏幕寬度
screen.availHeight - 可用的屏幕高度
screen.Height - 屏幕高度
screen.Width - 屏幕寬度

---

簡單案例

1、if-else - 單擊多次實現電燈開和關

<img src="close.jpg" id="unlight" onclick="fun()"/>
<script>
    var res = document.getElementById("unlight");
    var flag = false; //燈關閉狀態
    res.onclick = function(){
        if(flag){ //
            res.src = "close.jpg"
            flag = true;
        }else{
            res.src = "open.jpg";     
            flag = false;
        }
    }
</script>

2、定時器 - 輪播圖

<img id="img1" src="img1.jpg" width="100%" height="500" />
<script>
    var num = 1;//全局
    function myfunc(){
       num++;
       if(num>3){
          num = 1; //三張圖片切換
       }
       var img1 = document.getElementById("img1");
       img1.src = "img"+num+".jpg";
    }
    setInterval(myfunc,3000);//3秒切換一次
</script>

3、刷新與點擊按鈕訪問

<input type="button" id="btn" value="刷新"/>
<input type ="button" id="gocsdn" value="去csdn" />
<script>	
		//獲取按鈕
		var btn = document.getElementById("btn");
		var btn2 = document.getElementById("gocsdn");
		//綁定事件
		btn.onclick = function fun(){
			//刷新
		   location.reload();
		}
		//獲取href
		//var href = location.href;
		//alert(href);
		//設置URL
		//點擊按鈕訪問csdn網頁
		btn2.onclick = function fun2() {
			location.href ="https://www.csdn.net/";
		}
</script>		

4、計時器 - 自動跳轉首頁

顯示頁面倒計時，文字部分p標籤
5秒之後自動跳轉

<style>
	p{
		text-align: center;
	 }
	span{
		color: red;
	 }
</style>
		<p>
			<span id="time">5</span>秒之後,自動跳轉到首頁...
		</p>
		<script>
			//定義一個方法，獲取span標籤，修改span標籤體內容
			//方法：每修改一次，時間減1,1秒執行一次,直到時間等於0
			var second = 5;
			function showTime(){
					second--;
			    if(second <= 0){
				    location.href = "https://www.csdn.net/";
			}
			var time = document.getElementById("time");
			time.innerHTML = second+"";//改變time對應標籤內容
		}
		//設置定時器,每1秒執行(調用)函數showTime
		//setInterval(showTime,1000);//注意這樣也行,若不加引號則也不加括號
		setInterval("showTime()",1000);
</script>