JavaScript中的客户端对象
2014-01-14 21:47
330 查看
JavaScript中的客户端对象框图如下：
下面详细说明：
1.window对象
window 对象是 JavaScript 层级中的顶层对象。
window 对象代表一个浏览器窗口或一个框架。
window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。
<1>
<html>
<head>
<script>
function open_win()
{ myWindow=window.open(); //打开空白页面
myWindow.document.write("this is myWindow");
myWindow.focus();
<2>
<html>
<head>
<script>
function show_popup()
{ var p=window.createPopup();
var pbody=p.document.body;
pbody.style.backgroundColor="lime";
pbody.style.border="solid black 1px";
pbody.innerHTML="This is a pop-up! Click outside to close.";
p.show(150,150,200,50,document.body);
}
</script>
</head>
<body>
<button onclick="show_popup()">Create pop-up!</button>
</body>
</html>
<3>
<html>
<head>
<script>
function clock()
{ var t=new Date();
document.getElementById("clock").value=t.toLocaleString(); }
</script>
</head>
<body>
<input type="text" id="clock" size="35" />
<script>
var ClockID=window.setInterval("clock()",1000);
</script>
<input type="button" value="停止" onclick="window.clearInterval(ClockID)">
</body>
</html>
<3>运行效果:
2. document对象
每个载入浏览器的 HTML 文档都会成为 document 对象。
document 对象可用来访问页面中的所有元素。
document 对象是 window 对象的一个部分
示例:
<1>document.getElementById()方法示例
<html>
<head>
<script>
function getValue()
{ var x=document.getElementById("username");
alert(x.value); }
</script>
</head>
<body>
<input type="text" id="username" >
<input type="button" value="OK" onclick="getValue()">
</body>
</html>
<2>document.open()示例
<html>
<head>
<script>
function createNewDoc()
{ var newDoc=document.open("text/html","replace");
var txt="<html><body>hello</body></html>";
newDoc.write(txt);
newDoc.close(); }
</script>
</head>
<body>
<input type="button" value="创建一个新文档" onclick="createNewDoc()">
</body>
</html>
3.location对象
location对象包含有关当前 URL 的信息。
location 对象是 window 对象的一个部分。
示例：
<html>
<head>
<script>
function currLocation()
{ alert(window.location) ; }
function newLocation()
{ window.location="http://www.wust.edu.cn"; }
</script>
</head>
<body>
<input type="button" onclick="currLocation()" value="显示当前的 URL">
<input type="button" onclick="newLocation()" value="改变 URL">
</body>
</html>
4. history对象
history 对象包含用户在浏览器窗口中访问过的 URL。
出于隐私方面的原因，history 对象不再允许脚本访问已经访问过的实际 URL。唯一保持使用的功能只有 back()、forward() 和 go() 方法。
history对象是window对象的一部分。
5. navigator对象
navigator对象包含有关浏览器的信息。
6.form对象
form 对象代表一个 HTML 表单。
在 HTML 文档中 <form> 每出现一次，form 对象就会被创建。
示例:
<html><head>
<script>
function formReset() { document.myForm.reset() }
function formSubmit() { document.myForm.submit() }
</script>
</head>
<body>
<form name="myForm" action="getData.html">
姓名: <input type="text" size="10" value="wustzz"><br />
密码: <input type="password" size="10"><br />
<input type="button" onclick="formSubmit()" value="提交">
<input type="button" onclick="formReset()" value="重置">
</form>
</body></html>
下面详细说明：
1.window对象
window 对象是 JavaScript 层级中的顶层对象。
window 对象代表一个浏览器窗口或一个框架。
window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。
<1>
<html>
<head>
<script>
function open_win()
{ myWindow=window.open(); //打开空白页面
myWindow.document.write("this is myWindow");
myWindow.focus();
}
</script> </head> <body> <input type=button value="Open Window" onclick="open_win()" /> </body> </html>
<2>
<html>
<head>
<script>
function show_popup()
{ var p=window.createPopup();
var pbody=p.document.body;
pbody.style.backgroundColor="lime";
pbody.style.border="solid black 1px";
pbody.innerHTML="This is a pop-up! Click outside to close.";
p.show(150,150,200,50,document.body);
}
</script>
</head>
<body>
<button onclick="show_popup()">Create pop-up!</button>
</body>
</html>
<3>
<html>
<head>
<script>
function clock()
{ var t=new Date();
document.getElementById("clock").value=t.toLocaleString(); }
</script>
</head>
<body>
<input type="text" id="clock" size="35" />
<script>
var ClockID=window.setInterval("clock()",1000);
</script>
<input type="button" value="停止" onclick="window.clearInterval(ClockID)">
</body>
</html>
<3>运行效果:
2. document对象
每个载入浏览器的 HTML 文档都会成为 document 对象。
document 对象可用来访问页面中的所有元素。
document 对象是 window 对象的一个部分
示例:
<1>document.getElementById()方法示例
<html>
<head>
<script>
function getValue()
{ var x=document.getElementById("username");
alert(x.value); }
</script>
</head>
<body>
<input type="text" id="username" >
<input type="button" value="OK" onclick="getValue()">
</body>
</html>
<2>document.open()示例
<html>
<head>
<script>
function createNewDoc()
{ var newDoc=document.open("text/html","replace");
var txt="<html><body>hello</body></html>";
newDoc.write(txt);
newDoc.close(); }
</script>
</head>
<body>
<input type="button" value="创建一个新文档" onclick="createNewDoc()">
</body>
</html>
3.location对象
location对象包含有关当前 URL 的信息。
location 对象是 window 对象的一个部分。
示例：
<html>
<head>
<script>
function currLocation()
{ alert(window.location) ; }
function newLocation()
{ window.location="http://www.wust.edu.cn"; }
</script>
</head>
<body>
<input type="button" onclick="currLocation()" value="显示当前的 URL">
<input type="button" onclick="newLocation()" value="改变 URL">
</body>
</html>
4. history对象
history 对象包含用户在浏览器窗口中访问过的 URL。
出于隐私方面的原因，history 对象不再允许脚本访问已经访问过的实际 URL。唯一保持使用的功能只有 back()、forward() 和 go() 方法。
history对象是window对象的一部分。
5. navigator对象
navigator对象包含有关浏览器的信息。
6.form对象
form 对象代表一个 HTML 表单。
在 HTML 文档中 <form> 每出现一次，form 对象就会被创建。
示例:
<html><head>
<script>
function formReset() { document.myForm.reset() }
function formSubmit() { document.myForm.submit() }
</script>
</head>
<body>
<form name="myForm" action="getData.html">
姓名: <input type="text" size="10" value="wustzz"><br />
密码: <input type="password" size="10"><br />
<input type="button" onclick="formSubmit()" value="提交">
<input type="button" onclick="formReset()" value="重置">
</form>
</body></html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JSP--从不懂到了解是一个过程
- 弹出层取值（取代prompt）
- JavaScript语法支持严格模式:"use strict"
- js控制图片大小的解决办法 非常实用哦，兼容ie6
- JavaScript中的基本对象
- [js综合问题汇总]js窗口关闭事件,表单名称,父窗口子窗口,var变量名
- jsoup 学习笔记
- <input type = "submit"> 提交方式和用js的form.submit()有什么区别？
- JS中的this
- 客户端javascript之脚本化文档
- 兼容所有浏览器的js复制插件Zero
- 客户端javascript之window
- JavaScript - document.write(String content) writes nothing on html page
- js操作userData保存临时数据
- 在jsp页面获取url请求参数
- 精通 JavaScript中的正则表达式
- jsoup选择器语法
- JS四级复选框选中层次关系
- 浅谈JSP自定义标签实现过程
- JS怎么刷新当前页面