JavaWeb-03
JavaWeb-JavaScript 和BOM
补充：CSS中Link标签中的rel属性的补充-在IE浏览器中点击查看样式从而调用代码中的CSS文件改变样式
<!doctype html>
<html lang="en">
<head>
<link rel = "stylesheet" href="http://blog.163.com/faith_yee/blog/a.css"></link>
<link rel = "alternate stylesheet" href="http://blog.163.com/faith_yee/blog/b.css" title = "b"></link>
<link rel = "alternate stylesheet" href="http://blog.163.com/faith_yee/blog/c.css" title = "c"></link>
<title></title>
<style type="text/css">
/*
rel属性：
取值：1. stylesheet: 定义样式表
2. alternate stylesheet : 候选样式表
*/
/*在IE浏览器中点击查看中的样式选择b样式或c样式*/
</style>
</head>
<body>
<div id = "d"></div>
</body>
</html>
JavaScript
七、JavaScript常用对象介绍（掌握）
1、 Array对象 数组对象，进行数组操作
定义方式
1.采用new的方式
2.采用中括号[]来定义
数组的长度可以随时改变
特点：
1.javascript中数组的大小可以随时改变
2.javascript中数组的下标可以是任意对象。
方法：
1.join() : 把数组的所有元素放入一个字符串. 默认用逗号连接
2.push() : 向数组的末尾添加一个元素
4.reverse() :反转
3.shift() : 删除并返回数组的第一个元素
4.sort() ; 排序 .默认同类型的数据相比较.
JavaScript中Array对象.html
<!doctype html>
<html lang="en">
<head>
<title>Array对象</title>
</head>
<body>
<script type="text/javascript">
<!--
/*
array对象：
1、创建数组：
a、new Array();
b、采用[]
2、JavaScript中的数组和java数组中的区别：
a、JavaScript中的数组长度可以任意改变，java不行
b、存储类型一致与不一致的区别。JavaScript中的数组里面的类型可以任意的、java不行。
c、JavaScript中的数组的下标可以是任意对象，java不行
3、JavaScript中的数组的常用方法
*/
//var arr = new Array();//定义一个数组，没有大小
//var arr = new Array(5);//定义一个数组，初始大小是5.
//var arr = new Array(1,2,3,4);//定义一个数组，初始化数据是1,2,3,4
var arr = new Array();
arr[0] = 10;//直接指定位置上的元素，初始化。
arr[4] = 12;//同上
arr[10] = "Abc";//存的元素不是同类型没事。
alert(arr.length);//报11
alert(arr[50]);//undefined
//如何把长度缩小
arr.length = 5;//将数组的长度缩短为5
alert(arr[10]);//undefined，"Abc"被抛弃了
//..................................
//方式2
var ar = [];
ar = [1,2,"abc",true];
//虽然数组可以放入不同类型，但开发时没必要存不同类型的变量。
alert(ar.length);
//.............................重要
//c、JavaScript中的数组的下标可以是任意对象，java不行
var arrr = ["中国","美国","日本"];//因为JavaScript不能表达二维数组，所以下标可以是任意对象。
arrr["中国"] = ["北京","深圳","上海"];
arrr["美国"] = ["纽约","华盛顿","旧金山"];
alert(arrr["中国"][0]);
alert(arrr[arrr[1]][0]);
//-->
</script>
</body>
</html>
JavaScript中的数组的常用方法.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>JavaScript中的数组的常用方法</title>
</head>
<body>
<script type="text/javascript">
<!--
/*
array对象：
3、JavaScript中的数组的常用方法
a、join():将数组当中的所有的元素链接在一起，默认用，链接
b、push():想数组的最后添加一个元素
c、reverse():反转数组元素的顺序
d、shift():删除并返回数组的第一个元素
e、sort()：对数组的元素进行排序，默认情况下分组进行排序。如果数组中的元素都是数字类型，那么调用元素的toString方法进行排序，如果数组中的元素含有非数字类型的，则分组进行比较.如果希望按照我们希望的顺序来排列，则需要传递一个函数，此函数制定比较的方式
*/
var arr = ["中国","美国","日本"];
//alert(arr.join());//默认用，隔开，返回字符串
//alert(arr.join(""));//用空字符串链接元素
arr.push("菲律宾");//向数组的最后添加一个元素
//alert(arr.join());
arr.reverse();//反转数组的顺序
alert(arr.join());
var a =arr.shift();
alert(a);
//.............................
//e
var ar = [12,34,"abc",28,"123","wwq",54,"32"];
ar.sort();
alert(ar.join());
var ar1 = [12,"123",27,"34",32];
ar1.sort(function(a,b){ //制定我们自己的比较方式
if(a*1 > b*1)
return 1 ;
else
return -1 ;
}) ;
alert(ar1.join()) ;
//-->
</script>
</body>
</html>
Javascript习题：让标题栏的文字实现跑马灯的效果.html
<!doctype html>
<html lang="en">
<head>
<title>**让标题栏的文字实现跑马灯的效果**</title>
</head>
<body onload = "">
<script type="text/javascript">
<!--
/*
特效：让标题栏的文字实现跑马灯的效果
*/
function fun(){
//拿到标题栏的文字
var title = document.title;
//alert(title);
//将标题转换成数组
var arr = title.split("");//采用空字符串拆分
//alert(arr.join());
//拿到数组中的第一个元素
var first = arr.shift();
//alert(first);
//将第一个元素添加到数组的最后
arr.push(first);
//将数组合并成字符串
var s = arr.join("");
document.title = s;
//每隔一秒调用一次fun函数
setTimeout("fun()",1000);
}
fun();
//-->
</script>
</body>
</html>
2、 String对象 ----- 字符串类型的引用类型
String对象：
方式：
substr: 截取字符串 两个参数第一个是下标，第二个是长度
substring: 截取字符串 两个参数第一个是下标，第二个是下标
toUppercase:
toLowercase:
indexOf:
charAt() :
replace():
JavaScript中String对象.html
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<script type="text/javascript">
<!--
function fun(){
var p = document.getElementById("p") ; //拿到p标签对象
var txt = p.innerHTML ; //拿到文本
txt = txt.big().big().big() ;
p.innerHTML = txt ;
}
/*
String对象的方法：
1、subString():截取字符串，两个参数代表的都是下标。
2、substr():截取字符串，两个参数第一个参数代表下标，第二个参数是长度
*/
var s = "absasd";
alert(s.substring(1,3));
alert(s.substring(3,1));
alert(s.substr(1,3));
//-->
</script>
<body>
<p id = "p">嗯嗯哈哈</p><input type = "button" value ="变变变" onclick = "fun()">
</body>
</html>
3、 Number对象 ---- 数字原始类型引用类型
Num对象：
random() : 获得随机数[0,1)
ceil() : 返回大于等于次数的最大整数
floor() : 返回小于等于次数的最大整数
round(): 返回四舍五入后的整数
4、 Boolean对象 ---- 布尔原始类型引用类型
5、 Math对象 执行数学任务
JavaScript中Math对象.html
<!doctype html>
<html lang="en">
<head>
<title>Math对象</title>
</head>
<script type="text/javascript">
<!--
/*
Math对象的方法：
1、random():获得小于1的double类型的数
2、ceil():获取大于等于参数的最小整数
3、floor():获得小于等于参数的最大整数
4、round():获得四舍五入参数后的整数
*/
alert(Math.random());
alert(Math.ceil(2.25));
alert(Math.ceil(Math.random()*10));
//-->
</script>
<body>
</body>
</html>
6、 Date对象 用于处理日期和时间
Date对象： 代表一个时间
方法： getXXX() : 拿到年月日
JavaScript中Date对象.html
<!doctype html>
<html lang="en">
<head>
<title>Date对象</title>
</head>
<script type="text/javascript">
<!--
/*
Date对象的方法：
1、getXXX():获得年月日，时分秒
*/
var d = new Date();
alert(d);
alert(d.toString());
alert(d.toLocaleString());
alert(d.getYear());
alert(d.getMonth()+1);
alert(d.getDate());
alert(d.getTime());
//-->
</script>
<body>
</body>
</html>
7、 RegExp 对象正则表达式对象
正则表达式
写法：
1. new的方式 var r = new RegExp("ab") ;
2. 采用/正则表达式/ (推荐) var r = /ab/ ;
3.
JavaScript中正则表达式.html
<!doctype html>
<html lang="en">
<head>
<title>正则表达式</title>
</head>
<script type="text/javascript">
<!--
var r = /.../;
var s = "abcsd";
alert(r.test(s));//test的含义是测试字符串中是否存在正则表达式所表示的字符串
//-->
</script>
<body>
</body>
</html>
正则表达式
文档js_regular_expression.pdf和js_regular_expression_blueidea.pdf
BOM
一、BOM的概述
-
browser object modal :
浏览器对象模型。 -
浏览器对象：
window对象。 Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。
二、window的属性
innerHeight:
innerWidth: IE不支持
通用写法：document.body.clientWidth
document.body.clientHeight
Demo
<!doctype html>
<html lang="en">
<head>
<title>window对象的属性</title>
</head>
<body>
aaaaaaaaaaaaaaa
<script type="text/javascript">
<!--
/*
innerHeight:可见区域的高度 IE不支持
innerWidth:可见区域的宽度 IE不支持
IE如何支持？通用写法：document.body.clientHeight;document.body.clientWidth;
*/
var x = document.body.clientHeight;
var y = document.body.clientWidth;
alert(x+":"+y);
//-->
</script>
</body>
</html>
self :等同于window对象
parent：是打开窗口的父窗口对象
opener：是打开窗口的父窗口对象。
2种情况下使用opener:
1.使用winodw.open()方法打开的页面
2.超链（里面的target属性要设置成_blank）
window对象的opener属性.html
<!doctype html>
<html lang="en">
<head>
<title>window对象的opener属性</title>
</head>
<script type="text/javascript">
<!--
/*
opener属性： 代表了父窗体(window对象)
两种情况下用opener
1. 超链接
2. open方法打开的页面
*/
//希望在子窗体中传递数据到父窗体中
//-->
</script>
<body>
父窗体：
<input type="text" name="" id = "txt"> <br>
<a href="http://blog.163.com/faith_yee/blog/sub.html" target = "_blank">sub.html</a>
<script type="text/javascript">
<!--
window.open("sub.html") ;
//-->
</script>
</body>
</html>
sub.html
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
<script type="text/javascript">
<!--
function fun(){
//拿到子窗体中文本框的内容
var txt = document.getElementById("txt").value ;
//拿到父窗体对象
var w = window.opener ;
//拿到父页面的文本框对象
var t = w.document.getElementById("txt") ;
//数据传递过去
t.value = txt ;
}
//-->
</script>
</head>
<body>
子窗体
<input type="text" name="" id = "txt"><input type="button" value="向父窗口传递数据" onclick="fun()">
</body>
</html>
2种情况下使用parent:
1.iframe 框架
2.frame 框架
frames[]: 数组类型，代表子窗口的window对象的集合,可以通过frames[索引]拿到子窗口的window对象。
示例：父子窗口相互传参.
window对象的parent属性(示例：父子窗口相互传参.).html
<!doctype html>
<html lang="en">
<head>
<title>window对象的parent属性</title>
<script type="text/javascript">
<!--
/*
parent属性:代表了父窗口对象
两种情况下用parent属性：
1. frame中
2. 内嵌框架
*/
/*frames[] 返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架或 <iframe>。属性 frames.length 存放数组 frames[] 中含有的元素个数。注意，frames[] 数组中引用的框架可能还包括框架，它们自己也具有 frames[] 数组。 */
function fun(){
//拿到父窗口中文本框的内容
var value = document.getElementById("txt").value ;
//拿到子窗口中的文本框对象
var txt = window.frames[0].document.getElementById("txt") ;
//设置内容
txt.value = value ;
}
//-->
</script>
</head>
<body>
父窗口： <input type="text" name="" id = "txt"> <input type="button" value="向子窗口传递数据" onclick="fun()"><br>
<iframe src="http://blog.163.com/faith_yee/blog/sub1.html"></iframe>
</body>
</html>
sub1.html
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<script type="text/javascript">
<!--
function fun(){
//拿到子窗口中文本框的内容
var value = document.getElementById("txt").value ;
//拿到父窗口中的文本框对象
var txt = self.parent.document.getElementById("txt") ;
//设置内容
txt.value = value ;
}
//-->
</script>
<body>
子窗体
<input type="text" name="" id = "txt"><input type="button" value="向父窗口传递数据" onclick="fun()">
</body>
</html>
open方法，是打开一个页面.
对话框：
1)消息框 alert() ;
2)确认框 confirm() ;
3)输入框 prompt() ; (了解)
Demo
<!doctype html>
<html lang="en">
<head>
<title>Window对象弹出框方法</title>
</head>
<script type="text/javascript">
<!--
/*
Window对象的弹出框：
1、alert():消息框，可以用于排查网页编程错误。
2、confirm：确认框
3、prompt():输出框
*/
self.alert("大家好"); //1、alert():消息框
while(true)
{
if(confirm("你到底爱不爱我")==false){//2、confirm：确认框
continue;
}
break;
}
var a = prompt("请输入你的年龄");//3、prompt():输出框
alert(a);
//-->
</script>
<body>
</body>
</html>
定时器：setTimeout ,setInterval
1.setTimeout() :只会调用1次
2.setInterval() ：每隔一段时间调用1次
window对象的计时器.html
<!doctype html>
<html lang="en">
<head>
<title>window对象的计时器</title>
</head>
<script type="text/javascript">
<!--
/*计时器:
1、setTimeout():隔多长时间调用一次（只调用一次）某个函数，返回的是一个计时器。
2、setInterval()：方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
3、clearTimeout：清除计时器
4、clearInterval：清除计时器
innerHTML:表示开始标签和结束标签之间的HTML代码
注意：使用innerHTML属性必须有开始和结束标签
innerText：表示开始标签和结束标签之间的文本
*/
//如何停止？
var t ;//全局变量
function fun_start(){
//拿到p标签的内容
var txt = document.getElementById("p").innerText;
//将txt转换为number然后减1
txt = txt*1 -1 ;
//将转换后的值赋回去
document.getElementById("p").innerHTML = "<font color = pink>"+txt+"</font>";
//隔一秒调用一次
//t =setTimeout("fun_start()",100);
}
t =setInterval("fun_start()",100);
function fun_end(){
//clearTimeout(t);//停止刷新页面了
clearInterval(t);
}
//-->
</script>
<body>
<p id = "p">10</p><input type = "button" value ="开始" onclick= "fun_start()"><input type = "button" value ="结束" onclick= "fun_end()">
</body>
</html>
window对象的open方法.html
<!doctype html>
<html lang="en">
<head>
<title>window对象的open方法</title>
</head>
<script type="text/javascript">
<!--
window.open("2.5Window对象的弹出框方法.html","","width=300,height=300,location=yes,menubar=no,titlebar=no") ;
//-->
</script>
<body>
</body>
</html>
Window对象的属性练习：图片轮播.html
<!doctype html>
<html lang="en">
<head>
<title>图片轮播</title>
<style type="text/css"> /*CSS样式*/
label{
width:20px;
height:20px;
margin-left:5px;
}
div{
position:relative;
top:-32px;
}
.one{
background-color:red ;
border:1px solid white;
}
</style>
</head>
<script type="text/javascript">
<!--
var n = 0;
var t ;
function fun(){ /*方法1*/
n++ ;
if(n == 7)
n = 1 ;
//拿到图片对象
var img = document.getElementById("img") ;
//指定新的图片
img.src="http://blog.163.com/faith_yee/blog/images/photo_0" + n + ".jpg" ;
f();
//指定label所用的样式表
var label = document.getElementById("i" + n) ;
label.className = "one" ;
t = setTimeout("fun()",2000) ;
}
function fun1(){ /*方法2*/
//对所有的label添加事件
for(var i = 1 ;i<=6; i++){
var lbl = document.getElementById("i" + i) ;
lbl.onclick = function(){
//清空计时器
clearTimeout(t) ;
//拿到图片对象
var img = document.getElementById("img") ;
//指定新的图片
img.src="http://blog.163.com/faith_yee/blog/images/photo_0" + this.id.substring(1,2) + ".jpg" ;
f() ;
this.className = "one" ;
//改变n 的数字
n = this.id.substring(1,2) ;
setTimeout("fun()",2000) ;
}
lbl.onmouseover=function(){
this.style.cursor = "hand" ;
}
}
}
function f(){ /*方法3*/
//先清空所有label控件的样式表
for(var i = 1 ;i<=6;i++){
var lbl = document.getElementById("i" + i) ;
lbl.className = "" ;
}
}
//-->
</script>
<body onload ="fun(),fun1()"> <!--默认加载-->
<center>
<img src="http://blog.163.com/faith_yee/blog/images/photo_01.jpg" width = "300" height = "300" id = "img">
<div>
<label id = "i1"> 1 </label>
<label id = "i2"> 2 </label>
<label id = "i3"> 3 </label>
<label id = "i4"> 4 </label>
<label id = "i5"> 5 </label>
<label id = "i6"> 6 </label>
</div>
</center>
</body>
</html>
三、history对象
a. forward()前进
b. back() 后退
c. go(n) 正数是前进，负数是后退.
Demo
<!doctype html>
<html lang="en">
<head>
<title>history对象</title>
</head>
<script type="text/javascript">
<!--
/*
history对象；
1. forward() ;
2. back() ;
3. go() ;
*/
function fun(){
window.history.forward() ;
}
function fun1(){
window.history.back() ;
}
//-->
</script>
<body>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
<a href="http://blog.163.com/faith_yee/blog/b.html">b.html</a><button onclick = "fun1()">返回</button><button onclick = "fun()">前进</button>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<script type="text/javascript">
<!--
function fun(){
window.history.forward() ;
}
function fun1(){
window.history.back() ;
}
//-->
</script>
<body>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>
<a href="http://blog.163.com/faith_yee/blog/c.html">c.html</a><button onclick = "fun1()">返回</button><button onclick = "fun()">前进</button>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<script type="text/javascript">
<!--
function fun(){
window.history.forward() ;
}
function fun1(){
window.history.back() ;
}
function fun2(){
window.history.go(-2) ;
}
//-->
</script>
<body>
cccccccccccccccccccccccccccc<br>
<a href="http://blog.163.com/faith_yee/blog/d.html">d.html</a><button onclick = "fun1()">返回</button><button onclick = "fun()">前进</button><button onclick = "fun2()">直接去a页面</button>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<script type="text/javascript">
<!--
function fun(){
window.history.forward() ;
}
function fun1(){
window.history.back() ;
}
function fun2(){
window.history.go(-3) ;
}
//-->
</script>
<body>
ddddddddddddddddddddddddddd<br>
<button onclick = "fun1()">返回</button><button onclick = "fun()">前进</button><button onclick = "fun2()">直接去a页面</button>
</body>
</html>
四、location对象。
1.href 属性： 是指要连接到其他的URL
写法一、window.location.href='http://blog.163.com/faith_yee/blog/demo_window对象的close方法.html' ；
写法二、window.location='demo_window对象的close方法.html' ；
2.reload方法: 刷新
写法： window.location.reload() ；
Demo
<!doctype html>
<html lang="en">
<head>
<title>Location对象</title>
</head>
<script type="text/javascript">
<!--
/*
location对象；
1、reload():重新加载本页面
2、href属性：指定要跳转的目标页面
*/
function fun(){
//window.location.reload();
//window.location.href="http://blog.163.com/faith_yee/blog/1Window对象的弹出框方法.html";
//同等于上面
window.location = "3.1history对象.html";
}
//-->
</script>
<body>
<input type="button" value="go" onclick="fun()">
</body>
</html>
五、常用事件
1、鼠标移动事件
onmousemove(event) : 鼠标移动事件 event是事件对象。名字固定
onmouseover : 鼠标悬停事件
onmouseout : 鼠标移出事件
Demo
<!DOCTYPE HTML>
<!DOCTYPE html PUBLIC "" ""><HTML lang="en"><HEAD><META content="IE=11.0000"
http-equiv="X-UA-Compatible">
<TITLE>鼠标移动事件</TITLE>
<STYLE type="text/css">
div{
width:500px;
height:300px;
border:1px dashed red;
}
</STYLE>
<SCRIPT type="text/javascript">
<!--
/*
鼠标移动事件：鼠标在控件上移动时触发
event:代表了事件对象，写在哪个事件里面，就代表了哪个事件对象。
*/
function fun(e){
var x = e.clientX ;
var y = e.clientY ;
document.getElementById("txt").value = x + ":" + y ;
}
//-->
</SCRIPT>
</HEAD>
<BODY><INPUT id="txt" type="text">
<DIV onmousemove="fun(event)"></DIV></BODY></HTML>
Demo
<!doctype html>
<html lang="en">
<head>
<title>鼠标的悬停事件和移出事件</title>
<style type="text/css">
.one{
color:red;
border:1px dashed pink;
font-size:30px;
}
</style>
</head>
<body>
<p onmouseover = "this.style.cursor='help';this.className = 'one'" onmouseout = "this.style.sursor = '';this.className = ''">你好</p>
</body>
</html>
2、鼠标点击事件
onclick
3、加载与卸载事件
onload ,onunload
Demo
<!doctype html>
<html lang="en">
<head>
<title>加载与卸载事件</title>
</head>
<script type="text/javascript">
<!--
/*
加载事件onload：是在将页面所有的元素加载完毕后发生
卸载事件onunload：关闭页面的时候发生
这两个事件写的位置必须在body标签或者img标签里
*/
function fun(){
window.close() ;
}
//-->
</script>
<body onload ="alert('谢谢光临')" onunload = "fun()">
</body>
</html>
4、聚焦与离焦事件
onfocus, onblur
Demo
<!doctype html>
<html lang="en">
<head>
<title>聚焦与离焦事件</title>
<style type="text/css">
.one{
border:2px dashed pink;
}
</style>
</head>
<script type="text/javascript">
<!--
function fun(obj){
obj.className = "one";
}
function fun1(obj){
if(obj.value=="")
{
alert("必须填写内容");
obj.focus();
}
}
//-->
</script>
<body>
<input type="text" name="" onfocus = "fun(this)" onblur="fun1(this)">
</body>
</html>
5、键盘事件
onkeypress,onkeyup,onkeydown
Demo
<!doctype html>
<html lang="en">
<head>
<title>键盘事件</title>
</head>
<script type="text/javascript">
<!--
function fun(e){
var a = e.keyCode;//拿到按键的ASCII
document.getElementById("txt").value=a;
}
//-->
</script>
<body>
<input type="text" name="" id = "txt" onkeypress = "fun(event)">
</body>
</html>
6、提交与重置事件
onsubmit,onreset
7、选择与改变事件
Demo
<!doctype html>
<html lang="en">
<head>
<title>改变事件onChange事件</title>
</head>
<script type="text/javascript">
<!--
function fun(value,index){
alert(value+":"+index);
}
//-->
</script>
<body>
<select onchange = "fun(this.value,selectedIndex)">
<option value ="zhongguo">中国</option>
<option value ="meiguo">美国</option>
<option value ="riben">日本</option>
</select>
</body>
</html>
Demo
<!doctype html>
<html lang="en">
<head>
<title>省市联动</title>
</head>
<script type="text/javascript">
<!--
var arr = ["中国","美国","日本"] ;
arr["中国"] = ["北京","上海","钓鱼岛"] ;
arr["美国"] = ["纽约","华盛顿","旧金山"] ;
arr["日本"] = ["东京","大阪","神户"] ;
arr["北京"] = ["海淀","朝阳","昌平","丰台"] ;
arr["上海"] = ["浦东","金山","崇明","浦西"] ;
arr["钓鱼岛"] = ["钓鱼岛东","钓鱼岛南","钓鱼岛西","钓鱼岛北"] ;
arr["纽约"] = ["纽约1","纽约2","纽约3","纽约4"] ;
arr["华盛顿"] = ["华盛顿1","华盛顿2","华盛顿3","华盛顿4"] ;
arr["旧金山"] = ["旧金山1","旧金山2","旧金山3","旧金山4"] ;
arr["东京"] = ["东京1","东京2","东京3","东京4"] ;
arr["大阪"] = ["大阪1","大阪2","大阪3","大阪4"] ;
arr["神户"] = ["神户1","神户2","神户3","神户4"] ;
function init(){
//填充国家
fillOption(arr,"country") ;
//填充省市
fillOption(arr[arr[0]],"province")
//填充地区
fillOption(arr[arr[arr[0]][0]],"area") ;
}
//改变省市
function changePro(country){
//改变省市
fillOption(arr[country],"province") ;
//改变地区
fillOption(arr[arr[country][0]],"area") ;
}
function changeArea(pro){
//改变地区
fillOption(arr[pro],"area") ;
}
function fillOption(array,id){
//先清空对应select的option
document.getElementById(id).options.length = 0 ;
for(var i=0 ;i<array.length;i++){
//创建一个option对象
//第一种方式
/*var option = new Option() ;
option.value = array[i] ;
option.text =array[i] ;*/
//第二种方式
var option = new Option(array[i],array[i]) ;
document.getElementById(id).options.add(option) ;
}
}
//-->
</script>
<body onload = "init()">
国家： <select id = "country" onchange = "changePro(this.value)"></select>省市：<select id = "province" onchange = "changeArea(this.value)"></select>地区:<select id = "area"></select>
</body>
</html>
<!--1、先把多维数组给定义好。
2、定义好3个select标签。
3、定义一个核心函数：把select标签的ID和数组传递进去然后进行填充option。
4、自定义两个onchange事件启动的函数，一个是导致province指定后area需要做出改变的函数，另一个是导致country指定后，province需要作出改变和area需要做出改变的函数，他们导致option改变的原理都是调用fillOption函数来进行改变
5、最后定义一个初始化函数，在加载页面时启动-->
<!--由此可以推理：如果有n个select需要联动，那么我们需要一个公共的改变某个option属性的函数，然后再定义n-1个调用fillOption的函数，而且他们之间是存在关联的，并且要实现这种现象是需要多维函数来支持-->
384
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
