一、前言

上一篇文章演示了一個簡易的購物車案例，可參考博文：web快速入門之基礎篇-js：3_3、案例效果演示：簡易購物車，這篇將繼續進行更多的案例介紹和演示，如：給html增加新節點元素、實現城市下拉列表

二、js代碼實例演示

1、給html增加新節點元素

（1）實例代碼

我們先來看看一個例子，如下代碼：js01_(增加新節點元素).html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>

<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<script src="jsCode1.js" type="text/javascript" language="javascript"></script>
</head>

<body>
	<form id="f1">
		<input type="button" value="增加新的節點" οnclick="addNode();" />
	</form>
</body>

</html>

接下來我們來看看 js 代碼：jsCode1.js


//封裝一個方法（名稱特殊）：根據id得到元素對象
//如下addNode方法裏面有調用：$("f1").appendChild(aObj);
//好處是，可以省去每次都要寫：document.getElementById
function $(id){
	return document.getElementById(id);
}


//***1、增加新節點元素
function addNode(){

	//1、添加按鈕後：超級鏈接<a href="http://www.baidu.com">click me</a>
	//createElement: 創建元素 （<a>...</a>）
	var aObj = document.createElement("a");
	aObj.href = "http://www.baidu.com";//添加一個連接地址
	// aObj.href="www.baidu.com";//注意：這樣寫不會跳轉
	aObj.innerHTML ="新節點-超鏈接：Click Me";//添加元素中間的文本
	//找到id爲"f1"的父元素, 追加到其子元素的後面
	$("f1").appendChild(aObj);


	//2、添加按鈕前：按鈕<input type="button" value="新節點-按鈕" οnclick="alert("Hello");" />
	var btn = document.createElement("input");
	btn.type ="button";
	btn.value ="新節點-按鈕";
	//添加點擊事件
	btn.onclick = function(){
		alert("Hello");
	};
	//找到id爲"f1"的父元素,  添加到其子元素的最前面
	//參數1: 要添加的元素   參數2: 添加到最前面
	$("f1").insertBefore(btn,$("f1").firstChild);
	//錯誤：$("f1").insertBefore(btn,$("f1"),firstChild);

}

（2）效果演示

用谷歌瀏覽器打開運行，效果如下：

點擊“增加新的節點”（再次點擊會再次添加），效果如下：

點擊“新節點-按鈕” 彈出“hello”的提示框，點擊“新節點-超鏈接” 它會跳轉到百度

2、實現城市下拉列表

（1）實例代碼

我們先來看看一個例子，如下代碼：js02_(城市下拉列表).html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>

<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<script src="jsCode1.js" type="text/javascript" language="javascript"></script>
</head>

<body>
	省:
	<!-- <select id="s1" οnchange="showCities1();"> -->
	<select id="s1" οnchange="showCities2();">
		<option>--請選擇--</option>
		<option>北京</option>
		<option>河北</option>
		<option>江蘇</option>
	</select>
	城市:
	<select id="s2">
		<option>--請選擇--</option>
	</select>
</body>

</html>

接下來我們來看看 js 代碼：jsCode1.js

//封裝一個方法（名稱特殊）：根據id得到元素對象
//如下addNode方法裏面有調用：$("f1").appendChild(aObj);
//好處是，可以省去每次都要寫：document.getElementById
function $(id){
	return document.getElementById(id);
}


//***2、城市下拉列表
//數組裏面嵌套數組：
//設計一個二維數組，存儲所有的城市信息
var array = [
				["--請選擇--"],
				["海淀","朝陽","東城"],
				["唐山"],
				["南京","無錫"]
			];


//根據省份顯示城市
function showCities1(){
	//清空原有的選項 
	//－>即：移出  某省  對應的所有城市
	//使用for循環, 下標不好控制, 清除不了； 
	//可以使用for循環, i--,從後面開始
	while($("s2").childNodes.length>0){
		//即當元素節點的長度大於0，說明還存在元素
		//只要還存在元素，我們就把第一個元素刪掉，這樣操作就跟下標沒有關係了
		$("s2").removeChild($("s2").firstChild);
	}

	//得到選擇的索引：0-3
	//0 －>--請選擇-- ;   1 －>北京
	//2 －>河北 ;  		  3 －>江蘇
	//selectedIndex 返回下拉列表中被選選項的索引號。
	var j = $("s1").selectedIndex;
	//根據索引得到--->對應的城市數據
	var data = array[j];
	//循環：把相應城市信息數據，添加進去
	for(var i=0;i<data.length;i++){
		//創建option節點
		var obj = document.createElement("option");
		//添加元素中間的文本
		obj.innerHTML =data[i];
		//把option添加到select裏面去
		$("s2").appendChild(obj);
	}
}


//根據省份顯示城市
//用 HTML DOM 封裝的方式來實現
function showCities2(){
	//清空－>原有的選項
	$("s2").options.length = 0;
	//加入
	//selectedIndex 返回下拉列表中被選選項的索引號。
	var data = array[$("s1").selectedIndex];
	for(var i=0;i<data.length;i++){
		//HTML DOM Option 對象
		//Option 對象代表 HTML 表單中下拉列表中的一個選項
		//在 HTML 表單中 <option> 標籤每出現一次，一個 Option 對象就會被創建
		var obj = new Option(data[i]);
		$("s2").options[i] = obj;
	}
}