Java

1.1 案例六：使用JS完成省市聯動的效果：1.1.1 需求：
在註冊頁面上有兩個下拉列表,左側省份的下拉列表一改變,右側的市的下拉列表也要跟著發生變化.

1.1.2 分析：1.1.2.1 技術分析:
【JS中創建數組】

【JS的事件】
下拉的列表的改變的事件.onchange.
【JS的DOM的操作】
創建元素：
添加元素：
1.1.2.2 步驟分析
【步驟一】創建一個HTML文件.
【步驟二】確定事件：onchange事件.
【步驟三】觸發函數,在函數中編寫代碼.
【步驟四】獲得到所選擇的省份的信息.
【步驟五】根據選擇的省份的信息獲得到對應的數組中的市的數據.
【步驟六】遍歷數組中的市的信息.
【步驟七】創建元素，創建文本,最後將元素添加到第二個列表中.
1.1.3 代碼實現:

// 定義數組：二維數組：
var arrs = new Array(5);
arrs[0] = new Array("杭州市","紹興市","溫州市","義烏市","嘉興市");
arrs[1] = new Array("南京市","蘇州市","揚州市","無錫市");
arrs[2] = new Array("武漢市","襄陽市","荊州市","宜昌市","恩施");

arrs[3] = new Array("石家莊市","唐山市","保定市","邢臺市","廊坊市");
arrs[4] = new Array("長春市","吉林市","四平市","延邊市");
function changeCity(value){
// 獲得到選中的省份的信息.
var city = document.getElementById("city");
// 清除第二個列表中的內容:
for(var i=city.options.length;i>0;i--){
city.options[i] = null;
}
// city.options.length = 0;
// alert(value);
for(var i= 0 ;i< arrs.length;i++){
if(value == i){
// 獲得所有的市的信息.
for(var j=0;j<arrs[i].length;j++){
// alert(arrs[i][j]);
// 創建元素：
var opEl = document.createElement("option");// <option></option>
// 創建文本節點:
var textNode = document.createTextNode(arrs[i][j]);
// 將文本的內容添加到option元素中.
opEl.appendChild(textNode);
// 將option的元素添加到第二個列表中.
city.appendChild(opEl);
}
}
}
}
1.1.4 總結：
1.1.4.1 JS的內置對象:
[/i][/i][/i][/i][attach]227068[/attach][i][i][i][i]

? Array:
[/i][/i][/i][/i][attach]227069[/attach][i][i][i][i]
? Boolean:
[/i][/i][/i][/i][attach]227070[/attach][i][i][i][i]
? Date:
[/i][/i][/i][/i][attach]227071[/attach][i][i][i][i]

• [url=http://www.baidu.com?time=new]http://www.baidu.com?time=new[/url] Date().getTime();
  ? Math對象:
  

? String對象:

• charAt();
• indexOf();
• lastIndexOf();
• split();
• replace();
• substring();

• substr();
  1.1.4.2 JS的全局函數：
  

• parseInt();
  • parseInt(“11”);

• parseFloat();

  • parseFloat(“32.09”);
• 編碼和解碼的方法：
  // 解碼
• decodeURI();
• decodeURIComponent();

// 編碼

• encodeURI();
• encodeURIComponent();

eval函數：

• 將一段內容當成是JS的代碼執行.
  //var sss = “alert(‘aaaa’)”;
  //eval(sss);

JavaWeb03-HTML篇筆記（七）