windows对象的属性

来源：互联网发布：北航软件学院导师编辑：程序博客网时间：2024/05/02 00:01

1、document是window对象的一个属性，因此可以省掉window，直接写document
document方法：

1>write writeln(带回车)动在页面中写入内容，原内容不受影响
title获取标题栏
<head>
<title></title>
<script type="text/javascript">
document.write("<a href='http://www.itcast.cn'>传智播客</a>");
document.write("<a href='http://www.rupeng.com'>如鹏网</a>");
</script>
</head>
<body>
<body>
<script type="text/javascript">
//<script>也可出现在<body>中
document.write("<font color=red>你好！</font>");
</script>
<input type="button" value="点我呀!" onclick="document.write('hello')"/>
哈哈哈哈哈哈哈
</body>

程序的执行结果：
1.开始运行时，页面显示“传智播客”、“如鹏网”的超级链接，显示红色字体的“你好！”，显示名称为“点我呀”的按钮，以及“哈哈哈哈哈哈哈”字样。
2.点击超级链接的字样，可实现超级链接，转到响应的网页。
3.点击按钮“点我呀”，只出现显示“hello”的页面。这是因为onclick事件的出发会冲掉也米那种的内容，只有在页面加载过程中write才会与原有内容融合在一起。

2>getElementById 页面中Id是唯一的，可直接通过Id来引用元素。
<head>
<title></title>
<script type="text/javascript">
function btnclick1(){
var txt=document.getElementById("textbox1");
alert(txt.value);
}
function btnclick2(){
var txt=document.getElementById("textbox2");
alert(txt.value);
}
</script>
</head>
<body>
<input type="text" id="textbox1"/>
<input type="button" value="点我" onclick="btnclick1()"/>
<form action="ok.html"> //<form>表单 action表单要提交的地址
<input type="text" id="textbox2"/>
<input type="button" value="点我" onclick="btnclick2()"/>
</form>
</body>

3>getElementsByName 页面中name不是唯一的，返回值为对象数组

<head>
<title></title>
<script type=”text/javascript”>
function radios(){
var r=document.getElementsByName(“gender”); //r中为一组数值
for(var i=0;i<r.length;i++){
var rad=r[i];
alert(rad.value);
}
}
</script>
</head>
<body>
<input type=”radio” name=”gender” value=”男”/>男
<input type=”radio “ name=”gender” value=”女”/>女
<input type=”radio” name=”gender” value=”保密”/>保密
<input type=”button” value=”点我！” onclick=”radios()”/>
</body>

4>getElementsByTagName 通过标签取值
<head>
<title></title>
<script type="text/javascript">
function radios(){
var r=document.getElementsByTagName ("input");

for(var i=0;i<r.length;i++){
var rad=r[i];
rad.value="hello";
}
}
</script>
</head>
<body>
<input type="text" />
<input type="radio" />
<input type="button" value="点我!" onclick="radios()"/>
</body>
程序的运行结果是所有input标签里对象的value都变为hello

练习1：使用getElementsByTagName()动态设事件
<head>
<title></title>
<script type=”text/javascript”>
function ini(){
var r1=document.getElementsByTagName(“input”);
for(var i=0;i<r1.length;i++){
var j=r1[i];
iuput.onclick=ini2();
}
}
function ini2(){
var r1=document.getElementsByTagName(“input”);
for(var i=0;i<r1.length;i++){
var j=r1[i];
if(j==window.event.srcElement){
// window.event.srcElement取得引发事件的控件
input.value=”你好啊！”
}
else{
input.value=”点我啊!”;
}
}
}
</script>
</head>
<body onload=”ini()”>
<input type=”button” value=”点我啊！”/>
<input type=”button” value=”点我啊！”/>
<input type=”button” value=”点我啊！”/>
<input type=”button” value=”点我啊！”/>
</body>
程序运行结果：点击的那个button的vulue值变为“你好“，其余为”点我啊“

练习2:加法计算器
<head>
<title></title>
<script type=”text/javascript”>
function click(){
var t1=document.getElementById(“txt1”).value;
var t2=document.getElementById(“txt2”).value;
t1=parseInt(t1,10); //parseInt将字符串转换为数，后面的10表示十进制
t2=parseInt(t2,10); //变量t1、t2为弱类型，不用重新声明
document.getElementById(“txtresult”).value=t1+t2;
}
</script>
</head>
<body>
<input type=”text” id=”txt1”/>+<input type=”text” id=”txt2”/>
<iput type=”button” onclick=”click()” value=”=”/>
<input type=”text” id=”txt3” id=”txtresult” readonly/>

</body>

//补充一个属性，走马灯效果document .title获取页面的标题(后面会用到）

2、 navigator属性navigator（“http://wwww.rupeng.com”）；
3、 windows.location属性：windows.location.href();
windows.location.reload();
windows可以省略
4、 screen属性的属性
screen.width;
screen.height;
5、 history属性的方法
windows.history.forward();
windows.history.back();
windows.history.go(-1/1);

0 0