06-初学JavaScript
今天是JavaScript基础最后一部分了，这几天学的可能有些遗漏 之后再补上
一、window对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="window.confirm('是否确认');">确认框</button>
<button onclick="window.prompt('请输入');">输入框</button>
<button onclick="window.alert('123');">弹出框</button>
<button onclick="window.open('http://127.0.0.1:8020/web02/html2/02-css3.0%E5%85%A5%E9%97%A8.html')">打开新窗口</button>
<button onclick="window.close()">关闭新窗口</button>
<button onclick="window.print()">打印</button>
<script>
// alert(window.parseInt("12.5"))
alert(this)
</script>
</body>
</html>
window 是客户端浏览器对象模型的基类，window 对象是客户端 JavaScript 的全局对象。一个 window 对象实际上就是一个独立的窗口，对于框架页面来说，浏览器窗口每个框架都包含一个 window 对象。
可以当做一个全局作用域
二、Navigator对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> // alert(navigator.userAgent) alert(navigator.language) </script> </body> </html>
一个是查看用户浏览器信息 一个是语言 具体什么作用还不知道 ，只是知道有这两个方法
三、screen对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> alert(screen.width); alert(screen.height); </script> </body> </html>
查看设备高和宽
四、history对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button type="button" value="后退" onclick="history.back()">后退</button> <button type="button" value="前进" onclick="history.forward()">前进</button> <button type="button" value="前进" onclick="history.go(-1)">跳到</button> </body> </html>
浏览器前进后退
五、loaction
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button onclick="location.href = '04-history对象.html'">跳到</button> <button onclick="location.reload()">刷新</button> </body> </html>
刷新 跳转 这些具体作用还不是很清楚
六、三级联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select id="pr">
<option value="">选择省份</option>
</select>
<select id="city">
<option value="">选择城市</option></select>
<select id="home">
<option value="">选择home</option></select>
<script>
var con = [
{state:'辽宁',city:['沈阳','大陆','葫芦岛'],home:['123','456','789']},
{state:'辽宁1',city:['沈阳1','大陆1','葫芦岛1']},
{state:'辽宁2',city:['沈阳2','大陆2','葫芦岛2']}
]
window.onload = function (){
var pr = document.getElementById('pr');
var cy = document.getElementById('city');
var hm = document.getElementById('home');
for (var i = 0; i <con.length; i++) {
var opt = new Option(con[i].state);
pr.add(opt);
}
pr.onchange = function (){
cy.options.length = 1;//来控制每次选完第一个以后来选第二个
var index = pr.selectedIndex;
if(index == 0){
return ;
}
var citys = con[index-1].city;
for (var i = 0; i < citys.length; i++) {
// console.log(citys[i]);
var opt = new Option(citys[i]);
cy.add(opt);
}
}
cy.onchange = function (){
hm.options.length=1;
var index1 = cy.selectedIndex;
if(index1 == 0){
return ;
}
var homes = con[index1-1].home;
for (var i = 0; i < homes.length; i++) {
// console.log(citys[i]);
var opt = new Option(homes[i]);
hm.add(opt);
}
}
}
</script>
</body>
</html>
其中 有几个方法值得注意一下
var opt = new Option(con[i].state);
pr.add(opt);
把数组转化成 下拉列表的值
var index1 = cy.selectedIndex; 获取下拉框的下标
浙公网安备 33010602011771号