Javascript基础知识点总结、十
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Javascript基础知识点总结、十，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8134字，纯文字阅读大概需要12分钟。
内容图文
Javascript基础知识点总结、十
JavaScript中的BOM对象
浏览器对象模型--Browser ObjectModel (BOM)
1.Window 对象
1.1 属性
有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
实用的 JavaScript 方案（涵盖所有浏览器）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var w = window.innerWidth|| document.documentElement.clientWidth||
document.body.clientWidth;
var h = window.innerHeight|| document.documentElement.clientHeight||
document.body.clientHeight;
window.alert(w+"*"+h);
}
</script>
</head>
<body>
</body>
</html>
1.2方法:
其他方法：open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口
格式:window.open(URL,name,features,replace)
| URL | 一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。 |
| name | 一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。 |
| features | 一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。 |
| replace | 一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值： true - URL 替换浏览历史中的当前条目。 false - URL 在浏览历史中创建新的条目。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script type="text/javascript">
function test1(){
window.open("http://www.baidu.com");
}
function open_aboutblank(){
window.open("about:blank","空白页","width=200,height=100 ",true);
}
</script>
</head>
<body>
<input onclick="test1()" type="button" name="" id="" value="测试" />
<input onclick="open_aboutblank()" type="button" name="" id="" value="打开空白页" />
</body>
</html>
重要事项：请不要混淆方法 Window.open() 与方法 Document.open()，这两者的功能完全不同。为了使您的代码清楚明白，请使用 Window.open()，而不要使用 open()。
close() 方法用于关闭浏览器窗口。
说明:
方法 close() 将关闭有 window 指定的顶层浏览器窗口。某个窗口可以通过调用 self.close() 或只调用 close() 来关闭其自身。
只有通过 JavaScript 代码打开的窗口才能够由 JavaScript 代码关闭。这阻止了恶意的脚本终止用户的浏览器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script type="text/javascript">
var mywindow=null;
window.onload=function(){
mywindow=window.open("about:blank","","width=200,height=100 ");
mywindow.document.write("this,my window");
}
function Clos(){
mywindow.close(mywindow);
}
</script>
</head>
<body>
<script type="text/javascript">
</script>
<input onclick="Clos()" type="button" name="" id="" value="closemywindow" />
</body>
</html>
2.JavaScript弹窗方法
在 JavaScript 中创建三种消息框：警告框、确认框、提示框。
警告框:window.alert("sometext");
确认框:window.confirm("sometext");
当确认卡弹出时，用户可以点击 "确认" 或者 "取消" 来确定用户操作。
当你点击 "确认", 确认框返回 true， 如果点击 "取消", 确认框返回 false。
提示框:window.prompt("sometext","defaultvalue");
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
参数1---提示信息
参数2---提示框的默认值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#div1{
width:300px ;height:300px ;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload=function(){
var butobj =document.getElementById("but1");
butobj.onclick=function(){
// window.alert("测试警告框");
var val=window.confirm("确定要删除吗？");
if(val){
var divobj=document.getElementById("div1");
var hobj=document.getElementById("h");
divobj.removeChild(hobj);
}
}
var butobj2=document.getElementById("but2");
butobj2.onclick=function(){
var val=window.prompt("请输入姓名","");
if(val.length>0){
alert(val);
}else{
alert("不能为空");
}
}
}
</script>
</head>
<body>
<div id="div1">
<h1 id="h">测试确认框</h1>
</div>
<input type="button" name="" id="but1" value="删除h1" />
<input type="button" name="" id="but2" value="测试提示框" />
</body>
</html>
3.Window Screen--屏幕
window.screen 对象包含有关用户屏幕的信息。
- 总宽度和总高度 --- screen.width / screen.height
- 可用宽度和可用高度----screen.availWidth / screen.availHeight
- 色彩深度----screen.colorDepth
- 色彩分辨率----screen.pixelDepth
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script type="text/javascript">
//总宽和总高 --- screen.width / screen.height
window.document.write("<h1>总高宽"+window.screen.width+"*"+window.screen.height+"</h1>");
//可用宽度和可用高度----screen.availWidth / screen.availHeight
window.document.write("<h1>可用高宽"+window.screen.availWidth+"*"+window.screen.availHeight+"</h1>");
//色彩深度--screen.colorDepth
window.document.write("<h1>色彩深度"+window.screen.colorDepth+"</h1>");
//色彩分辨率---screen.pixelDepth
window.document.write("<h1>像素深度/色彩分辨率"+window.screen.pixelDepth+"</h1>");
</script>
</head>
<body>
</body>
</html>
4.Window Location---页面的地址 (URL)
对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
location.href 属性返回当前页面的 URL。
location.pathname 属性返回 URL 的路径名。
location.assign() 方法加载新的文档。
location.search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script type="text/javascript">
document.write("<h1>href"+window.location.href+"</h1>");
document.write("<h1>pathname"+window.location.pathname+"</h1>");
document.write("<h1>seach"+window.location.search+"</h1>");
</script>
</head>
<body>
</body>
</html>
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户登录</title>
<script type="text/javascript">
window.onload=function(){
var but1=document.getElementById("but1");
var username=document.getElementById("text1");
var password=document.getElementById("pass1");
var span1=document.getElementById("span1");
but1.onclick=function(){
var uservalue=username.value;
var passwordvalue=password.value;
if(uservalue=="zhangsan"&&passwordvalue=="123456"){
window.location.href="success.html?username="+uservalue;
}else{
var span1=document.getElementById("span1");
span1.innerHTML="<font size='3' color='red'>用户名密码错误</font>"
}
}
//聚焦事件
username.onfocus=function(){
span1.innerHTML="";
username.value="";
password.value="";
}
}
</script>
</head>
<body>
<center>
<table border="1px" >
<tr align="center">
<td colspan="2">
<h1>用户登录</h><br>
<span id="span1"></span>
</td>
</tr>
<tr align="center">
<td>用户名</td>
<td><input type="text" name="username" id="text1" value="" /></td>
</tr>
<tr align="center">
<td>密码</td>
<td><input type="password" name="password" id="pass1" value="" /></td>
</tr>
<tr align="center">
<td><input type="button" name="butt" id="but1" value="用户登录" /></td>
</tr>
</table>
</center>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var serchvalue=window.location.search;
if(serchvalue.length<=0){
window.location.href="login.html";
}else{
var a=serchvalue.split("=");
var username=a[1];
var h1obj=document.getElementById("h1");
h1obj.innerHTML="欢迎"+username+"登陆成功";
}
}
</script>
</head>
<body>
<center>
<h1 id="h1">欢迎登陆成功</h1>
</center>
</body>
</html>
注：会自动跳转到用户登录界面；
内容总结
以上是互联网集市为您收集整理的Javascript基础知识点总结、十全部内容，希望文章能够帮你解决Javascript基础知识点总结、十所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。