JS知识总结之BOM对象
window对象
window对象是BOM的核心，window对象指当前的浏览器窗口。javascript
window对象方法:html
警告消息对话框---alert
语法:java
alert(字符串或变量); 复制代码
确认消息对话框---confirm
confirm 消息对话框一般用于容许用户作选择的动做，如：“你对吗？”等。弹出对话框(包括一个肯定按钮和一个取消按钮)。浏览器
语法:bash
confirm(str);复制代码
参数说明:app
str：在消息对话框中要显示的文本
返回值: Boolean值复制代码
返回值:框架
当用户点击"肯定"按钮时，返回true
当用户点击"取消"按钮时，返回false复制代码
注: 经过返回值能够判断用户点击了什么按钮ide
提问消息对话框---prompt
prompt弹出消息对话框,一般用于询问一些须要与用户交互的信息。弹出消息对话框（包含一个肯定按钮、取消按钮与一个文本输入框）。函数
语法:工具
prompt(str1, str2);复制代码
参数说明：
str1: 要显示在消息对话框中的文本，不可修改
str2：文本框中的内容，能够修改复制代码
返回值:
1. 点击肯定按钮，文本框中的内容将做为函数返回值
2. 点击取消按钮，将返回null复制代码
打开新窗口---window.open
open() 方法能够查找一个已经存在或者新建的浏览器窗口。
语法：
window.open([URL], [窗口名称], [参数字符串])复制代码
参数说明:
URL：可选参数，在窗口中要显示网页的网址或路径。若是省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
1.该名称由字母、数字和下划线字符组成。
2."_top"、"_blank"、"_self"具备特殊意义的名称。
_blank：在新窗口显示目标网页
_self：在当前窗口显示目标网页
_top：框架网页中在上部窗口中显示目标网页
3.相同 name 的窗口只能建立一个，要想建立多个窗口则 name 不能相同。
4.name 不能包含有空格。
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。复制代码
参数表:
例如:打开http://www.baidu.com网站，大小为300px * 200px，无菜单，无工具栏，无状态栏，有滚动条窗口：
<script type="text/javascript"> window.open('http://www.baidu.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>复制代码
关闭窗口---window.close
close()关闭窗口
用法：
window.close(); //关闭本窗口复制代码
或
<窗口对象>.close(); //关闭指定的窗口复制代码
例如:关闭新建的窗口。
<script type="text/javascript">
var mywin=window.open('http://www.imooc.com'); //将新打的窗口对象，存储在变量mywin中
mywin.close();
</script>复制代码
注意:上面代码在打开新窗口的同时，关闭该窗口，看不到被打开的窗口。
JavaScript 计时器
在JavaScript中，咱们能够在设定的时间间隔以后来执行代码，而不是在函数被调用后当即执行。
计时器类型：
一次性计时器：仅在指定的延迟时间以后触发一次。
间隔性触发计时器：每隔必定的时间间隔就触发一次。
计时器方法：
计时器每隔指定的时间执行代码---setInterval()
在执行时,从载入页面后每隔指定的时间执行代码。
语法:
setInterval(代码,交互时间);复制代码
参数说明：
1. 代码：要调用的函数或要执行的代码串。
2. 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。
返回值:
一个能够传递给 clearInterval() 从而取消对"代码"的周期性执行的值。
调用函数格式(假设有一个clock()函数):
setInterval("clock()",1000)
或
setInterval(clock,1000)复制代码
咱们设置一个计时器，每隔100毫秒调用clock()函数，并将时间显示出来，代码以下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
var int=setInterval(clock, 100)
function clock(){
var time=new Date();
document.getElementById("clock").value = time;
}
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
</form>
</body>
</html>复制代码
取消计时器---clearInterval()
clearInterval() 方法可取消由 setInterval() 设置的交互时间。
语法：
clearInterval(id_of_setInterval)复制代码
参数说明:
id_of_setInterval：由 setInterval() 返回的 ID 值。
每隔 100 毫秒调用 clock() 函数,并显示时间。当点击按钮时，中止时间,代码以下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
function clock(){
var time=new Date();
document.getElementById("clock").value = time;
}
// 每隔100毫秒调用clock函数，并将返回值赋值给i
var i=setInterval("clock()",100);
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
<input type="button" value="Stop" onclick="clearInterval(i)" />
</form>
</body>
</html>复制代码
计时器延迟指定时间后执行一次表达式---setTimeout()
setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。
语法:
setTimeout(代码,延迟时间);复制代码
参数说明：
1. 要调用的函数或要执行的代码串。
2. 延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。
当咱们打开网页3秒后，在弹出一个提示框，代码以下:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
setTimeout("alert('Hello!')", 3000 );
</script>
</head>
<body>
</body>
</html>复制代码
当按钮start被点击时，setTimeout()调用函数，在5秒后弹出一个提示框。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function tinfo(){
var t=setTimeout("alert('Hello!')",5000);
}
</script>
</head>
<body>
<form>
<input type="button" value="start" onClick="tinfo()">
</form>
</body>
</html>复制代码
要建立一个运行于无穷循环中的计数器，咱们须要编写一个函数来调用其自身。在下面的代码，当按钮被点击后，输入域便从0开始计数。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var num=0;
function numCount(){
document.getElementById('txt').value=num;
num=num+1;
setTimeout("numCount()",1000);
}
</script>
</head>
<body>
<form>
<input type="text" id="txt" />
<input type="button" value="Start" onClick="numCount()" />
</form>
</body>
</html>复制代码
取消计时器---clearTimeout()
setTimeout()和clearTimeout()一块儿使用，中止计时器。
语法:
clearTimeout(id_of_setTimeout)复制代码
参数说明:
id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。
下面的例子和上节的无穷循环的例子类似。惟一不一样是，如今咱们添加了一个 "Stop" 按钮来中止这个计数器：
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var num=0,i;
function timedCount(){
document.getElementById('txt').value=num;
num=num+1;
i=setTimeout(timedCount,1000);
}
setTimeout(timedCount,1000);
function stopCount(){
clearTimeout(i);
}
</script>
</head>
<body>
<form>
<input type="text" id="txt">
<input type="button" value="Stop" onClick="stopCount()">
</form>
</body>
</html>复制代码
History 对象
history对象记录了用户曾经浏览过的页面(URL)，并能够实现浏览器前进与后退类似导航的功能。
注意:从窗口被打开的那一刻开始记录，每一个浏览器窗口、每一个标签页乃至每一个框架，都有本身的history对象与特定的window对象关联。
语法：
window.history.[属性|方法]复制代码
注意：window能够省略。
History 对象属性
History 对象方法
使用length属性，当前窗口的浏览历史总长度，代码以下：
<script type="text/javascript">
var HL = window.history.length;
document.write(HL);
</script>
复制代码
返回前一个浏览的页面---back()
back()方法，加载 history 列表中的前一个 URL。
语法：
window.history.back();复制代码
好比，返回前一个浏览的页面，代码以下：
window.history.back();复制代码
注意：等同于点击浏览器的倒退按钮。
back()至关于go(-1),代码以下:
window.history.go(-1);复制代码
返回下一个浏览的页面---forward()
forward()方法，加载 history 列表中的下一个 URL。
若是倒退以后，再想回到倒退以前浏览的页面，则可使用forward()方法,代码以下:
window.history.forward();复制代码
注意：等价点击前进按钮。
forward()至关于go(1),代码以下:
window.history.go(1);复制代码
返回浏览历史中的其余页面---go()
go()方法，根据当前所处的页面，加载 history 列表中的某个具体的页面。
语法：
window.history.go(number);复制代码
参数：
浏览器中，返回当前页面以前浏览过的第二个历史页面，代码以下：
window.history.go(-2);复制代码
注意：和在浏览器中单击两次后退按钮操做同样。
同理，返回当前页面以后浏览过的第三个历史页面，代码以下：
window.history.go(3);复制代码
Location对象
location用于获取或设置窗体的URL，而且能够用于解析URL。
语法:
location.[属性|方法]复制代码
location对象属性图示:
location 对象属性：
location 对象方法:
Navigator对象
Navigator 对象包含有关浏览器的信息，一般用于检测浏览器与操做系统的版本。
对象属性:
查看浏览器的名称和版本，代码以下:
<script type="text/javascript">
var browser=navigator.appName;
var b_version=navigator.appVersion;
document.write("Browser name"+browser);
document.write("<br>");
document.write("Browser version"+b_version);
</script>复制代码
userAgent
返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
语法
navigator.userAgent复制代码
几种浏览的user_agent.，像360的兼容模式用的是IE、极速模式用的是chrom的内核。
使用userAgent判断使用的是什么浏览器(假设使用的是IE8浏览器),代码以下:
function validB(){
var u_agent = navigator.userAgent;
var B_name="Failed to identify the browser";
if(u_agent.indexOf("Firefox")>-1){
B_name="Firefox";
}else if(u_agent.indexOf("Chrome")>-1){
B_name="Chrome";
}else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){
B_name="IE(8-10)";
}
document.write("B_name:"+B_name+"<br>");
document.write("u_agent:"+u_agent+"<br>");
}
复制代码
screen对象
screen对象用于获取用户的屏幕信息。
语法：
window.screen.属性复制代码
对象属性:
屏幕分辨率的高和宽
window.screen 对象包含有关用户屏幕的信息。
1. screen.height 返回屏幕分辨率的高
2. screen.width 返回屏幕分辨率的宽
注意:
1.单位以像素计。
2. window.screen 对象在编写时能够不使用 window 这个前缀。
咱们来获取屏幕的高和宽，代码以下:
<script type="text/javascript">
document.write( "屏幕宽度："+screen.width+"px<br />" );
document.write( "屏幕高度："+screen.height+"px<br />" );
</script>复制代码
屏幕可用高和宽度
1. screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，好比任务栏。
2. screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，好比任务栏。
注意:
不一样系统的任务栏默认高度不同，及任务栏的位置可在屏幕上下左右任何位置，因此有可能可用宽度和高度不同。
咱们来获取屏幕的可用高和宽度，代码以下：
<script type="text/javascript">
document.write("可用宽度：" + screen.availWidth);
document.write("可用高度：" + screen.availHeight);
</script>复制代码
- 1. JS总结--------BOM经常使用对象
- 2. JS知识总结以内置对象
- 3. JS中BOM相关知识点总结
- 4. JS-BOM对象
- 5. BOM知识简易总结
- 6. BOM知识点总结
- 7. js bom location对象
- 8. JS 总结之对象
- 9. JS面向对象知识点汇总
- 10. BOM对象之location对象
- 更多相关文章...
- • 与传输层有关的基本知识 - TCP/IP教程
- • ADO Parameter 对象 - ADO 教程
- • 算法总结-双指针
- • 算法总结-回溯法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. JS总结--------BOM经常使用对象
- 2. JS知识总结以内置对象
- 3. JS中BOM相关知识点总结
- 4. JS-BOM对象
- 5. BOM知识简易总结
- 6. BOM知识点总结
- 7. js bom location对象
- 8. JS 总结之对象
- 9. JS面向对象知识点汇总
- 10. BOM对象之location对象