js及jQuery总结（六）

07.01_innerHTML

innerHTML属性：
- 浏览器几乎都支持该属性，但不是DOM标准的组成部分
- 作用：获取文本内容；向标签里面设置内容，可以是html标签代码
- 使用场景：多用于div或span标签配合使用
  - 作用一：获取文本内容【结合span使用】
  - 作用二：设置内容【结合div使用】
  - 作用三：可以直接设置html的标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#divid{
				width: 200px;
				height: 200px;
				border: 2px dashed red;
			}
		</style>
	</head>
	<body>
		<span id="spanid">哈哈哈哈哈哈</span>
		<div id="divid"></div>
	</body>
	<script>
		//作用一：获取文本内容【结合span使用】
		var span = document.getElementById("spanid");
		document.write(span.innerHTML);
		
		//作用二：设置内容【结合div使用】
		var div = document.getElementById("divid");
		div.innerHTML = "hello";
	</script>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body div{
				width: 300px;
				height: 300px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div id="box">
			
		</div>
		<button onclick="change()">更换图片</button>
	</body>
	<script type="text/javascript">
		var box = document.getElementById("box");
		function change(){
			box.innerHTML = "<img src='../img/meinv.jpg' />"
		}
	</script>
</html>

07.02_事件

发生并得到处理的操作
有两种模式：内联模式【模型】，脚本模式
- 内联模式
  - 事件处理的函数是html标签的一个属性，用于处理指定的事件
  - 违背了js和html分离的原则

内联模式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--在html中把事件函数作为属性执行js代码-->
		<input type="button" value="按钮一" onclick="alert('hello')" />
		<input type="button" value="按钮二" onclick="func()" />
	</body>
	<script>
		function func(){
			document.write("aaaa");
		}
	</script>
</html>
* 脚本模式
	* 借助于DOM中的事件，结合匿名函数，可以直接触发相应的操作

脚本模式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="按钮一" />
		<input type="button" value="按钮二" />
	</body>
	<script>
		//获取按钮一的input对象
		var input = document.getElementsByTagName("input")[0];
		
		input.onclick = function(){
			alert("helo");
		}
	</script>
</html>

事件对象
- event对象【区别于document对象，window对象】
- event对象：浏览器通过函数把这个对象作为参数传递过来的

获取事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" id="input" value="按钮一" />
		<script>
			
			var input = document.getElementById("input");
			input.onclick = function(){
				alert(arguments.length);//1，得到了一个隐藏的参数
				alert(arguments[0]);//[object MouseEvent]
			}
			
			//通常使用下面的方式获取事件
//			input.onclick = function(event) {
//				alert(event);//[object MouseEvent]
//			}
			
		</script>
	</body>
</html>

07.03_鼠标事件

所有的事件处理函数都会都有两个部分组成，
- on + 事件名称，
- 例如 click 事件的事件处理函数就是：onclick。
- 我们主要谈论脚本模型的方式来构建事件，违反分离原则的内联模式，我们忽略掉。
按钮信息 — button 属性：
- 0 —— 左键
- 1 —— 滚轮
- 2 —— 右键
常用事件：
- onclick：当用户单击鼠标按钮或按下回车键时触发
- ondblclick：当用户双击主鼠标按钮时触发。
- onmousedown：当用户按下了鼠标还未弹起时触发。
- onmouseup：当用户释放鼠标按钮时触发。
- onmouseover：当鼠标移到某个元素上方时触发。
- onmouseout：当鼠标移出某个元素上方时触发。
- onmousemove：当鼠标指针在元素上移动时触发。
- onsubmit:表单提交时触发。
- onscroll :鼠标滚动时触发。

鼠标事件是 Web 上面最常用的一类事件，毕竟鼠标还是最主要的定位设备。那么通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等。

鼠标事件案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div1 a{
				margin: 20px;
				line-height: 30px;
			}
			
			#msg_id{
				width: 200px;
				/*自适应高度*/
				height: auto;
				background-color: lightgoldenrodyellow;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<a href="#">大娃（红娃）</a><br />
			<a href="#">二娃（橙娃）</a><br />
			<a href="#">三娃（黄娃）</a><br />
			<a href="#">四娃（绿娃）</a><br />
			<a href="#">五娃（青娃）</a><br />
			<a href="#">六娃（蓝娃）</a><br />
			<a href="#">七娃（紫娃）</a><br />
			<a href="#">葫芦小金刚</a><br />
			<!--显示每个葫芦娃的详细信息-->
			<div id="msg_id"></div>
		</div>
	</body>
	<script>
//	<!--鼠标事件的处理-->
		window.onload = function(){
			//获取div1
			var div1 = document.getElementById("div1");
			//获取所有的a标签
			var aaa = div1.getElementsByTagName("a");
			//获取信息div
			var msgDiv = document.getElementById("msg_id");
			
			var arrMsg = [
			"力大无穷，巨大化。(弱点：比较鲁莽，不知随机应变)", 
			"千里眼，顺风耳，灵活聪明，机敏过人，最善于谋划计策(弱点：攻击力与其兄弟相比较过于弱小了，眼睛和耳朵太脆弱)", 
			"铜头铁臂，钢筋铁骨，刀枪不入（弱点：第一部中根本就是没有弱点，但可以以柔克刚降服他。可是到了第二部就被强行加入了一个致命弱点：怕打屁股。性急骄傲）。",
			"喷火，吸火，霹雳(弱点：受不了激将法，也怕冷)",
			"吸水，吐水，口吐闪电产生降雨(弱点：水火不相溶，意气用事。第一部中水娃的能力也是没有弱点的，不用吸水也能喷水喷得无穷无尽。到了第二部就变得需要先吸水才能吐水，水量有限。）", 
			"隐身术，透体术，来无影去无踪，聪明机灵，最善于偷盗和行动(弱点：太顽皮。在第一部里能够在被金蛇冰封的情况下透体而出，在第二部前半段能够使用透体术逃出鳄鱼头领爪子的紧紧捉拿，直到被捉的那一下透体术就使不出来了)", 
			"最小，没多大本领，倍受哥哥们的关爱，有宝葫芦，可以吸入魔法、兵器和妖怪，在第一部刚出世时蒙蔽双眼，十分听从妖精的话，把六位哥哥吸进宝葫芦。(弱点:失去宝葫芦，到第二部中宝葫芦那么容易就碎了)", 
			"葫芦娃的合体，七颗葫芦娃的心都溶在他的胸中，七个葫芦娃的本领都长在他的身上，同时也具有七个葫芦娃的弱点。他大闹妖精洞府后，闯入十八层地道，毁掉青蛇精的两件宝物。后变成一座大山，镇压了青蛇精."];
			
			//遍历数组
			for(var i = 0;i < aaa.length;i++) {
				//循环的时候，给每个超链接的标签添加一个标记，方便后续获取数组中对应的信息
				aaa[i].index = i;
				
				//1.移入的时候:颜色改为橙色
				/*aaa[i].onmouseover = function(){
					this.style.color = "orange";
//					msgDiv.innerHTML = arrMsg[this.index];
				}
				
				//2.移出的时候，颜色变为蓝色，将msg隐藏掉
				aaa[i].onmouseout = function(){
					this.style.color = "blue";
					msgDiv.style.display = "none";
				}*/
				
				//3.当鼠标在a标签上移动的时候，让msgDiv跟着移动
				aaa[i].onmousemove = function(event){
//					msgDiv.style.display = "block";
					msgDiv.innerHTML = arrMsg[this.index];
					//跟着鼠标移动
					//event.clientX:鼠标的横坐标
//					msgDiv.style.left = event.clientX + 5 + "px";
					//event.clientY:鼠标的竖坐标
//					msgDiv.style.top = event.clientY + 5 + "px";
				}
			}
		}
	</script>
</html>

//萤火虫效果
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				background-image: url(../img/bg.jpg);
			}
			#box{
				width: 50px;
				height: auto;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<img src="../img/萤火虫.jpg" width="100%"/>
		</div>
	</body>
	<script>
		window.onload = function(){
			//获取div对象
			var box = document.getElementById("box");
			
			//当鼠标按下的时候【在div中移动】
			box.onmousedown = function(event){
				//记录按下的位置在当前元素中的偏移量  offset【参照点：坐标原点】
				var offsetX = event.offsetX;
				var offsetY = event.offsetY;
				
				//当鼠标移动的时候【同时也是按下的状态】
				//在整个页面中移动
				document.onmousemove = function(event){
					// 事件属性返回当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标。
					// 客户区指的是当前窗口。
					var clientX = event.clientX;
					var clientY = event.clientY;
					
					//拖动的时候，改变的top和left的值
					//设置div的left和top
					box.style.left = clientX - offsetX + "px";
					box.style.top = clientY - offsetY + "px";
				}
				
				//当鼠标抬起的时候
				//注意：释放资源
				document.onmouseup = function(){
					document.onmousemove = null;
				}	
			}
		}
	</script>
</html>

07.04_键盘事件

键盘事件案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		/*
		 * keydown:按下键盘上的任意按钮
		 * keyup:抬起键盘上的任意按钮
		 * keypress:按下键盘上除了ctrl/shift/alt/capslock/num lock【功能键】
		 * 类似于鼠标事件的用法，只要触发事件，则会自动调用事件【借助于匿名函数实现】
		 */
		
		//1. 按下键盘上的任意按钮
		document.onkeydown = function(event){
			// 作用：为了兼容不同的浏览器
			// 非IE   ||   IE
			// 其他浏览器会在发生点击事件的时候，把事件对象当做参数传递过来，
			// 但是，在IE浏览器中，event变量会是空，所以使用全局的window
			var eve = event || window.event;
			console.log("按下了按键");
			console.log(eve.altKey,eve.ctrlKey,eve.shiftKey,eve.keyCode);
		}
		
		//2. 抬起键盘上的任意按钮
		document.onkeyup = function(event){
			var eve = event || window.event;
			console.log("放开了按键");
			console.log(eve.altKey,eve.ctrlKey,eve.shiftKey,eve.keyCode);
		}
		
		//3. 按下键盘上除了ctrl/shift/alt/capslock/num lock【非功能键】
		document.onkeypress = function(event){
			var eve = event || window.event;
			console.log("按下了非功能键");
			console.log(eve.altKey,eve.ctrlKey,eve.shiftKey,eve.keyCode);
		}
	</script>
</html>

改变背景颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 200px;
				height: 200px;
				background-color: red;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<!-- 在页面上有一个div，按下shift+c键的时候随机更改颜色 -->
		<div id="box"></div>
	</body>
	<script type="text/javascript">
		
		// 获取div的对象
		var jsDiv = document.getElementById("box");
		
		//1. 按下shift+c
		document.onkeydown = function(e){
			var evt = e || window.event;
			if(evt.shiftKey == true && evt.keyCode == 67){
				console.log("按下了shift+e");
				jsDiv.style.backgroundColor = randomColor();
			}
		}
		
		// 随机颜色
		function randomColor(){
			//rgb(0~255,0~255,0~255)
			
			var r = parseInt(Math.random() * 256);
			var g = parseInt(Math.random() * 256);
			var b = parseInt(Math.random() * 256);
			
			//red     #ffffff  rgb(r,g,b)   rgba(r,g,b,a)  alpha【透明度】
			return "rgb(" + r + "," + g + "," + b + ")";
		}
	</script>
</html>

07.05_事件的监听

事件监听器：
- addEventListener() 方法用于向指定元素添加事件句柄，IE8及其以下不支持，火狐和谷歌支持。
给事件绑定函数：
- 事件监听器target.addEventListener(“click”, fun, false);
  - “click” ：是事件名；注意，要去掉事件名的on
  - fun：是函数名;注意，函数名上没有双引号
  - 第三个参数是否使用捕捉(反向冒泡)，默认false，为冒泡。
    - 可以绑定多个函数在一个对象上
    - 执行顺序按照绑定的顺序来
    - 如： document.getElementById(“myBtn1”).addEventListener(“click”,myfun1,false);
    - 当绑定的函数有参数时，当传递参数值时，使用"匿名函数"调用带参数的函数：
      - document.getElementById(“myBtn”).addEventListener(“click”, function() { myFunction(p1, p2);});
    - 删除绑定的函数：
      - 使用 removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:
      - 如： document.getElementById(“myBtn1”).removeEventListener(“click”,myfun1);
    - 具体使用在下面的综合案例中演示

事件监听案例–按下方向键移动方块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 200px;
				height: 200px;
				background-color: red;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<!-- 通过上下左右的键来控制div向不同 的方向移动 -->
		<div id="box"></div>
	</body>
	<script type="text/javascript">
		//按下上下左右键
		//事件的监听
		//事件【不添加on】   需要触发的函数  false
		//获取div的对象
		var jsDiv = document.getElementById("box");
		document.addEventListener("keydown",funcMove,false);
		function funcMove(e){
			// 适配
			var evt = e || window.event;
			// 根据不同的keyCode执行不同的移动
			switch(evt.keyCode){
				//左
				case 37:{
					jsDiv.style.left = jsDiv.offsetLeft - 5 + "px";
					break;
				}
				//上
				case 38:{
					jsDiv.style.top = jsDiv.offsetTop - 5 + "px";
					break;
				}
				//右
				case 39:{
					jsDiv.style.left = jsDiv.offsetLeft + 5 + "px";
					break;
				}
				//下
				case 40:{
					jsDiv.style.top = jsDiv.offsetTop + 5 + "px";
					break;
				}
				default:{
					console.log("无效按键");
				}
			}
		}
	</script>
</html>

07.06_事件传递和处理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 200px;
				height: 200px;
				background-color: red;
			}
			#box2{
				width: 100px;
				height: 100px;
				background-color: blue;
			}
			#box3{
				width: 50px;
				height: 50px;
				background-color: green;
			}			
		</style>
	</head>
	<body>
		<div id="box1">
			<div id="box2">
				<div id="box3">
					
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		//获取三个div的对象
		var jsDiv1 = document.getElementById("box1");
		var jsDiv2 = document.getElementById("box2");
		var jsDiv3 = document.getElementById("box3");
		
		//事件监听
		/*
		 * false:   box3-->box2--->box1  冒泡
		 * true:    box1--->box2--->box3  捕获
		 */
		jsDiv1.addEventListener("click",func,false);
		jsDiv2.addEventListener("click",func,false);
		jsDiv3.addEventListener("click",func,false);
		
		/*jsDiv1.addEventListener("click",func,true);
		jsDiv2.addEventListener("click",func,true);
		jsDiv3.addEventListener("click",func,true);*/
		
		function func(){
			console.log(this);
		}
	</script>
</html>

07.07_轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*整体效果*/
			#box{
				width: 790px;
				height: 340px;
				margin: 0px auto;
				position: relative;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<!--初始图片-->
			<img src="../img/1.jpg" id="pic" />
		</div>
	</body>
	<script type="text/javascript">
		//1. 获取所有的标签对象
		var jsBox = document.getElementById("box");
		var jsPic = document.getElementById("pic");
		//2. 定义一个变量，记录当前的选中的图片
		var currentPage = 1; 
		//3. 创建定时器，每隔1秒切换一张图片
		var timer = setInterval(startLoop,1000);
		//4. 定时器开始工作时触发的函数
		function startLoop(){
			//改变页码
			changePage();
			currentPage++;
		}
		
		//5. 切换图片的具体操作
		function changePage(){
			//判断
			if(currentPage == 9){
				//当图片显示到最后一张的时候，重新显示第一张图片
				currentPage = 1;
			} else if(currentPage == 0){
				//当图片显示到第一张的时候，重新显示最后一张图片
				currentPage = 8;
			}
			//重新设置图片
			jsPic.src = "../img/"+ currentPage+".jpg";
		}
	</script>
</html>

省市二级下拉菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body onload="init()">
		<select id="province" onchange="getCity()" style="width: 80px;height: 30px;">
			<option value= 0 >北京</option> 
			<option value= 1 >上海</option> 
			<option value= 2 >天津</option> 
			<option value= 3 >重庆</option> 
			<option value= 4 >河北</option> 
			<option value= 5 >山西</option> 
			<option value= 6 >内蒙古</option> 
			<option value= 7 >辽宁</option> 
			<option value= 8 >吉林</option> 
			<option value= 9 >黑龙江</option> 
			<option value= 10 >江苏</option> 
			<option value= 11 >浙江</option> 
			<option value= 12 >安徽</option> 
			<option value= 13 >福建</option> 
			<option value= 14 >江西</option> 
			<option value= 15 >山东</option> 
			<option value= 16 >河南</option> 
			<option value= 17 >湖北</option> 
			<option value= 18 >湖南</option> 
			<option value= 19 >广东</option> 
			<option value= 20 >广西</option> 
			<option value= 21 >海南</option> 
			<option value= 22 >四川</option> 
			<option value= 23 >贵州</option> 
			<option value= 24 >云南</option> 
			<option value= 25 >西藏</option> 
			<option value= 26 >陕西</option> 
			<option value= 27 >甘肃</option> 
			<option value= 28 >宁夏</option> 
			<option value= 29 >青海</option> 
			<option value= 30 >新疆</option> 
			<option value= 31 >香港</option> 
			<option value= 32 >澳门</option> 
			<option value= 33 >台湾</option> 
		</select>
		<select id="city" style="width: 80px;height: 30px;">
			
		</select>
	</body>
	<script type="text/javascript">
		var arr = new Array();
		arr[0 ]="东城,西城,崇文,宣武,朝阳,丰台,石景山,海淀,门头沟,房山,通州,顺义,昌平,大兴,平谷,怀柔,密云,延庆"; 
		arr[1 ]="黄浦,卢湾,徐汇,长宁,静安,普陀,闸北,虹口,杨浦,闵行,宝山,嘉定,浦东,金山,松江,青浦,南汇,奉贤,崇明"; 
		arr[2 ]="和平,东丽,河东,西青,河西,津南,南开,北辰,河北,武清,红挢,塘沽,汉沽,大港,宁河,静海,宝坻,蓟县"; 
		arr[3 ]="万州,涪陵,渝中,大渡口,江北,沙坪坝,九龙坡,南岸,北碚,万盛,双挢,渝北,巴南,黔江,长寿,綦江,潼南,铜梁,大足,荣昌,壁山,梁平,城口,丰都,垫江,武隆,忠县,开县,云阳,奉节,巫山,巫溪,石柱,秀山,酉阳,彭水,江津,合川,永川,南川"; 
		arr[4 ]="石家庄,邯郸,邢台,保定,张家口,承德,廊坊,唐山,秦皇岛,沧州,衡水"; 
		arr[5 ]="太原,大同,阳泉,长治,晋城,朔州,吕梁,忻州,晋中,临汾,运城"; 
		arr[6 ]="呼和浩特,包头,乌海,赤峰,呼伦贝尔盟,阿拉善盟,哲里木盟,兴安盟,乌兰察布盟,锡林郭勒盟,巴彦淖尔盟,伊克昭盟"; 
		arr[7 ]="沈阳,大连,鞍山,抚顺,本溪,丹东,锦州,营口,阜新,辽阳,盘锦,铁岭,朝阳,葫芦岛"; 
		arr[8 ]="长春,吉林,四平,辽源,通化,白山,松原,白城,延边"; 
		arr[9 ]="哈尔滨,齐齐哈尔,牡丹江,佳木斯,大庆,绥化,鹤岗,鸡西,黑河,双鸭山,伊春,七台河,大兴安岭"; 
		arr[10 ]="南京,镇江,苏州,南通,扬州,盐城,徐州,连云港,常州,无锡,宿迁,泰州,淮安"; 
		arr[11 ]="杭州,宁波,温州,嘉兴,湖州,绍兴,金华,衢州,舟山,台州,丽水"; 
		arr[12 ]="合肥,芜湖,蚌埠,马鞍山,淮北,铜陵,安庆,黄山,滁州,宿州,池州,淮南,巢湖,阜阳,六安,宣城,亳州"; 
		arr[13 ]="福州,厦门,莆田,三明,泉州,漳州,南平,龙岩,宁德"; 
		arr[14 ]="南昌市,景德镇,九江,鹰潭,萍乡,新馀,赣州,吉安,宜春,抚州,上饶"; 
		arr[15 ]="济南,青岛,淄博,枣庄,东营,烟台,潍坊,济宁,泰安,威海,日照,莱芜,临沂,德州,聊城,滨州,菏泽"; 
		arr[16 ]="郑州,开封,洛阳,平顶山,安阳,鹤壁,新乡,焦作,濮阳,许昌,漯河,三门峡,南阳,商丘,信阳,周口,驻马店,济源"; 
		arr[17 ]="武汉,宜昌,荆州,襄樊,黄石,荆门,黄冈,十堰,恩施,潜江,天门,仙桃,随州,咸宁,孝感,鄂州"; 
		arr[18 ]="长沙,常德,株洲,湘潭,衡阳,岳阳,邵阳,益阳,娄底,怀化,郴州,永州,湘西,张家界" 
		arr[19 ]="广州,深圳,珠海,汕头,东莞,中山,佛山,韶关,江门,湛江,茂名,肇庆,惠州,梅州,汕尾,河源,阳江,清远,潮州,揭阳,云浮"; 
		arr[20 ]="南宁,柳州,桂林,梧州,北海,防城港,钦州,贵港,玉林,南宁地区,柳州地区,贺州,百色,河池"; 
		arr[21 ]="海口,三亚"; 
		arr[22 ]="成都,绵阳,德阳,自贡,攀枝花,广元,内江,乐山,南充,宜宾,广安,达川,雅安,眉山,甘孜,凉山,泸州"; 
		arr[23 ]="贵阳,六盘水,遵义,安顺,铜仁,黔西南,毕节,黔东南,黔南"; 
		arr[24 ]="昆明,大理,曲靖,玉溪,昭通,楚雄,红河,文山,思茅,西双版纳,保山,德宏,丽江,怒江,迪庆,临沧"; 
		arr[25 ]="拉萨,日喀则,山南,林芝,昌都,阿里,那曲"; 
		arr[26 ]="西安,宝鸡,咸阳,铜川,渭南,延安,榆林,汉中,安康,商洛"; 
		arr[27 ]="兰州,嘉峪关,金昌,白银,天水,酒泉,张掖,武威,定西,陇南,平凉,庆阳,临夏,甘南" 
		arr[28 ]="银川,石嘴山,吴忠,固原"; 
		arr[29 ]="西宁,海东,海南,海北,黄南,玉树,果洛,海西"; 
		arr[30 ]="乌鲁木齐,石河子,克拉玛依,伊犁,巴音郭勒,昌吉,克孜勒苏柯尔克孜,博尔塔拉,吐鲁番,哈密,喀什,和田,阿克苏"; 
		arr[31 ]="香港";
		arr[32 ]="澳门"; 
		arr[33 ]="台北,高雄,台中,台南,屏东,南投,云林,新竹,彰化,苗栗,嘉义,花莲,桃园,宜兰,基隆,台东,金门,马祖,澎湖";
		
		// 页面加载后初始化页面，onload在页面加载完成后执行
		function init(){
			var citys = document.getElementById("city");
			// 获取北京所有的区
			var cityArr = arr[0].split(",");
			//遍历这些区
			for (var i = 0;i < cityArr.length;i++) {
				// new Option(str1,str2)可以创建一个下拉选项 
				//<option value="str2">str1</option>
				// 给select标签添加下拉选项
				citys[i] = new Option(cityArr[i],cityArr[i]);
			}
		}
		
		function getCity(){
			// 获取两个select控件
			var province = document.getElementById("province");
			var citys = document.getElementById("city");
			
			// 获取province选中的值
			var index = province.selectedIndex;
			// 获取所有的城市
			var cityArr = arr[index].split(",");
			// 给select标签添加下拉选项
			for (var i = 0;i < cityArr.length;i++) {
				citys[i] = new Option(cityArr[i],cityArr[i]);
			}
		}
	</script>
</html>

如有错误，请在下面评论。好及时更正，谢谢！

js及jQuery总结（六）

07.01_innerHTML

07.02_事件

内联模式

脚本模式

获取事件

07.03_鼠标事件

鼠标事件案例

07.04_键盘事件

键盘事件案例

改变背景颜色

07.05_事件的监听

事件监听案例–按下方向键移动方块

07.06_事件传递和处理

07.07_轮播图

省市二级下拉菜单

猜你喜欢