Java EE之旅05 JS基礎(下)

小楠總發表於2017-12-18

###js的BOM

迴歸一下,JS最初由網景公司創造,JS基本組成包括:

  1. 核心(ECMAScript):描述了JS的語法和基本物件
  2. 瀏覽器物件模型(BOM):與瀏覽器互動的方法和介面
  3. 文件物件模型 (DOM):處理網頁內容的方法和介面

下面先來介紹BOM。

(1)window物件
	彈框的方法:
		提示框:alert("提示資訊");
		確認框:confirm("確認資訊");
			有返回值:如果點選確認返回true  如果點選取消 返回false
			var res = confirm("您確認要刪除嗎?");
			alert(res);
		輸入框:prompt("提示資訊");
			有返回值:如果點選確認返回輸入框的文字 點選取消返回null
			var res =  prompt("請輸入密碼?");
			alert(res);
	open方法:
		window.open("url地址");			
		open("../jsCore/demo10.html");
		
	定時器:
		setTimeout(函式,毫秒值);
			setTimeout(
				function(){
					alert("xx");
				},
				3000
			);
		clearTimeout(定時器的名稱);
			var timer;
			var fn = function(){
				alert("x");
				timer = setTimeout(fn,2000);
			};
			var closer = function(){
				clearTimeout(timer);
			};
			fn();
		setInterval(函式,毫秒值);
		clearInterval(定時器的名稱)
			var timer = setInterval(
			function(){
				alert("nihao");
			},
			2000
		);
		var closer = function(){
			clearInterval(timer);
		};
	
	注意:
		setTimeout在執行時,是在載入後延遲指定時間後,去執行一次表示式,記住,次數是一次性的。 
	    setInterval則不一樣,它從載入後,每隔指定的時間就執行一次表示式,周而復始的。

	需求:註冊後5秒鐘跳轉首頁
	恭喜您註冊成功,<span id="second" style="color: red;">5</span>秒後跳轉到首頁,如果不跳轉請<a href="../jsCore/demo10.html">點選這裡</a>
	<script type="text/javascript">
		var time = 5;
		var timer;
		timer = setInterval(
			function(){
				var second = document.getElementById("second");
				if(time>=1){
					second.innerHTML = time;
					time--;
				}else{
					clearInterval(timer);
					location.href="../jsCore/demo10.html";
				}
			},
			1000
		);
	</script>
	
(2)location物件
	location.href="url地址";
(3)history物件
	back();
	forward();
	go();
	<a href="demo7.html">後一頁</a>
	<input type="button" value="上一頁" onclick="history.back()">
	<input type="button" value="下一頁" onclick="history.forward()">
	
	<input type="button" value="上一頁" onclick="history.go(-1)">
	<input type="button" value="下一頁" onclick="history.go(1)">
複製程式碼

###JS的DOM

####1、理解一下文件物件模型 html檔案載入到記憶體之後會形成一顆dom樹,根據這些節點物件可以進行指令碼程式碼的動態修改。 在dom樹中,一切皆為節點物件。

####2、dom方法和屬性

(1)getElementById-通過id獲得元素節點物件
	例子:
	<form name="form1" action="test.html" method="post">
	    <input type="text" name="username" value="哈哈" id="mid" onchange="">
	    <input type="button" name="ok" value="確定"/>
	</form>

    //輸出id為mid的標籤的資訊
    var inputNode = document.getElementById("mid");
    alert("type:" + inputNode.type + "\nvalue:" + inputNode.value);

(2)getElementsByName-通過name獲得節點物件集合(因為name同名可以有多個)
	例子:
	<form name="form1" action="test.html" method="post">
	    <input type="text" name="myname" value="哈哈1" id="tid_1"><br>
	    <input type="text" name="myname" value="哈哈2" id="tid_2"><br>
	    <input type="text" name="myname" value="哈哈3" id="tid_3"><br>
	    <input type="button" name="ok" value="確定"/>
	</form>

    //通過元素的name屬性獲取所有元素的引用
    var inputNodes = document.getElementsByName("myname");
    //測試該資料的長度
    alert(inputNodes.length);
    //遍歷元素,輸出所有value屬性的值
    for (var i = 0; i < inputNodes.length; i++) {
        var inputNode = inputNodes[i];
        alert(inputNode.value);
    }
    //為每個文字框(<input type="text">)增加chanage事件,當值改變時,輸出改變的值
    for (var i = 0; i < inputNodes.length; i++) {
        var inputNode = inputNodes[i];
        inputNode.onchange = function () {
            alert(this.value);
        };
    }

(3)getElementsByTagName-通過標籤名稱獲得元素節點的集合

(4)hasChildNodes-檢視元素節點是否含有子節點

(5)nodeName、nodeType、nodeValue屬性

	每個節點都擁有包含著關於節點某些資訊的屬性。這些屬性是:
	nodeName(節點名稱) 
	nodeValue(節點值) 
	nodeType(節點型別)

		1.nodeName
		nodeName 屬性含有某個節點的名稱。
		
		元素節點的 nodeName 是標籤名稱 
		屬性節點的 nodeName 是屬性名稱 
		文字節點的 nodeName 永遠是 #text 
		文件節點的 nodeName 永遠是 #document 
		註釋:nodeName 所包含的 XML 元素的標籤名稱永遠是大寫的

		2.nodeValue
		對於文字節點,nodeValue 屬性包含文字。
		對於屬性節點,nodeValue 屬性包含屬性值。
		nodeValue 屬性對於文件節點和元素節點是不可用的。

		3.nodeType
		nodeType 屬性可返回節點的型別。
		
		最重要的節點型別是:
		
		元素型別 節點型別 
		元素 	1 
		屬性		2 
		文字 	3 
		註釋 	8 
		文件 	9 

(6)childNodes屬性-子節點集合;parentNode(this.parentNode)-父節點

(7)replaceChild-父節點替換子節點
	例子:
	<ul>
		<li id="bj" value="beijing">北京</li>
		<li id="sh" value="shanghai">上海</li>
		<li id="cq" value="chongqing"> 重慶</li>
	</ul>
	
	<ul>
		<li id="fk" value="fangkong">反恐</li>
		<li id="ms" value="moshou">魔獸</li>
		<li id="cq1" value="chuanqi">傳奇</li>
	</ul>   
  
    //點選北京節點,將被反恐節點替換
    var bj = document.getElementById("bj");
    var fk = document.getElementById("fk");
    bj.onclick = function(){
		//
    	var parentNode = this.parentNode;
    	parentNode.replaceChild(fk,this);
    };

(8)查詢、設定屬性節點
	例子:
	<ul>
	    <li id="bj" value="beijing">北京</li>
	    <li id="sh" value="shanghai">上海</li>
	    <li id="cq" value="chongqing">重慶</li>
	</ul>

    var bj = document.getElementById("bj");
    alert(bj.getAttribute("value"));
    bj.setAttribute("value", "哈哈");
    alert(bj.getAttribute("value"));

(9)節點的建立與新增、刪除
	例子:
	<ul id="city">
		<li id="bj" value="beijing">北京</li>
		<li id="sh" value="shanghai">上海</li>
		<li id="cq" value="chongqing">重慶</li>
	</ul>
	
	
	//增加城市節點 <li id="tj" v="tianjin">天津</li>放置到city下
	var li = document.createElement("li");
	li.setAttribute("id", "tj");
	li.setAttribute("value", "tianjin");
	
	var txt = document.createTextNode("天津");
	li.appendChild(txt);
	
	var city = document.getElementById("city");
	
	city.appendChild(li);
	//city.insertBefore(tj, cq);
	//city.removeChild(tj);

(10)innerHTML屬性(比較重要)
	例子:
	<div id="subject">jquery</div>

    //將<h1>今天</h1>寫到div的層中
    var div = document.getElementById("subject");
    div.innerHTML = "<h1>今天</h1>";

    //使用innerHTML讀出id=subject中的文字內容
    var div = document.getElementById("subject");
    alert(div.innerHTML);
複製程式碼

相關文章