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="点我呀!" οnclick="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="点我" οnclick="btnclick1()"/>
<form action="ok.html"> //<form>表单 action表单要提交的地址
<input type="text" id="textbox2"/>
<input type="button" value="点我" οnclick="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=”点我!” οnclick=”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="点我!" οnclick="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.οnclick=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 οnlοad=”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” οnclick=”click()” value=”=”/>
<input type=”text” id=”txt3” id=”txtresult” readonly/>
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="点我呀!" οnclick="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="点我" οnclick="btnclick1()"/>
<form action="ok.html"> //<form>表单 action表单要提交的地址
<input type="text" id="textbox2"/>
<input type="button" value="点我" οnclick="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=”点我!” οnclick=”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="点我!" οnclick="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.οnclick=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 οnlοad=”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” οnclick=”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);