VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > temp > JavaScript教程 >

  • Web前端基础(13):JavaScript(七)

作者：@小灰灰
本文为作者原创，转载请注明出处：https://www.cnblogs.com/liuhui0308/p/11884207.html

回到顶部(go to top)

1. BOM

JavaScript基础分为三部分：

ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。

DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。

BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。

1.1 BOM的介绍

BOM：Browser Object Model，浏览器对象模型。

BOM的结构图:

从上图也可以看出：

window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。

DOM是BOM的一部分。

window对象：

window对象是JavaScript中的顶级对象。

全局变量、自定义函数也是window对象的属性和方法。

window对象下的属性和方法调用时，可以省略window。

下面讲一下 BOM 的常见内置方法和内置对象。

1.2 弹出系统对话框

比如说，alert(1)是window.alert(1)的简写，因为它是window的子方法。

系统对话框有三种：



    

  1. 
alert(); //不同浏览器中的外观是不一样的
    2. 

  2. 
confirm(); //兼容不好
    3. 

  3. 
prompt(); //不推荐使用
    4. 










1.3 打开窗口、关闭窗口







1.3.1 打开窗口






    

  1. 
window.open(url,target)
    2. 






参数解释：





url：要打开的地址。



target：新窗口的位置。可以是：_blank 、_self、 _parent 父框架。









1.3.2 关闭窗口






    

  1. 
close();
    2. 









    

  1. 
<!DOCTYPE html>
    2. 

  2. 
<html>
    3. 

  3. 
<head>
    4. 

  4. 
<meta charset="UTF-8">
    5. 

  5. 
<title></title>
    6. 

  6. 
</head>
    7. 

  7. 
<body>
    8. 

  8. 
 
    9. 

  9. 
<!--行间的js中的open() window不能省略-->
    10. 

  10. 
<button onclick="window.open('https://i-beta.cnblogs.com')">爱编程的小灰灰</button>
    11. 

  11. 
 
    12. 

  12. 
<button>打开百度</button>
    13. 

  13. 
<button onclick="window.close()">关闭</button>
    14. 

  14. 
<button>关闭</button>
    15. 

  15. 
 
    16. 

  16. 
</body>
    17. 

  17. 
<script type="text/javascript">
    18. 

  18. 
 
    19. 

  19. 
var oBtn = document.getElementsByTagName('button')[1];
    20. 

  20. 
var closeBtn = document.getElementsByTagName('button')[3];
    21. 

  21. 
 
    22. 

  22. 
oBtn.onclick = function(){
    23. 

  23. 
//open('https://www.baidu.com')
    24. 

  24. 
 
    25. 

  25. 
//打开空白页面
    26. 

  26. 
open('about:blank',"_self")
    27. 

  27. 
}
    28. 

  28. 
closeBtn.onclick = function(){
    29. 

  29. 
if(confirm("是否关闭？")){
    30. 

  30. 
close();
    31. 

  31. 
}
    32. 

  32. 
}
    33. 

  33. 
 
    34. 

  34. 
</script>
    35. 

  35. 
</html>
    36. 










1.4 location对象



window.location可以简写成location。location相当于浏览器地址栏，可以将url解析成独立的片段。







1.4.1 location对象的属性



href：跳转



hash 返回url中#后面的内容，包含#



host 主机名，包括端口



hostname 主机名



pathname url中的路径部分



protocol 协议 一般是http、https



search 查询字符串



location.href属性举例：



举例1：点击盒子时，进行跳转。






    

  1. 
<body>
    2. 

  2. 
<div>smyhvae</div>
    3. 

  3. 
<script>
    4. 

  4. 
 
    5. 

  5. 
var div = document.getElementsByTagName("div")[0];
    6. 

  6. 
 
    7. 

  7. 
div.onclick = function () {
    8. 

  8. 
location.href = "http://www.baidu.com"; //点击div时，跳转到指定链接
    9. 

  9. 
// window.open("http://www.baidu.com","_blank"); //方式二
    10. 

  10. 
}
    11. 

  11. 
 
    12. 

  12. 
</script>
    13. 

  13. 
</body>
    14. 






举例2：5秒后自动跳转到百度。



有时候，当我们访问一个不存在的网页时，会提示5秒后自动跳转到指定页面，此时就可以用到location。举例：






    

  1. 
<script>
    2. 

  2. 
 
    3. 

  3. 
setTimeout(function () {
    4. 

  4. 
location.href = "http://www.baidu.com";
    5. 

  5. 
}, 5000);
    6. 

  6. 
</script>
    7. 










1.4.2 location对象的方法



location.reload()：重新加载






    

  1. 
setTimeout(function(){
    2. 

  2. 
//3秒之后让网页整个刷新
    3. 

  3. 
window.location.reload();
    4. 

  4. 
 
    5. 

  5. 
},3000)
    6. 










1.5 navigator对象



window.navigator 的一些属性可以获取客户端的一些信息。





userAgent：系统，浏览器)



platform：浏览器支持的系统，win/mac/linux





 例子：






    

  1. 
console.log(navigator.userAgent);
    2. 

  2. 
console.log(navigator.platform);
    3. 










1.6 history对象



1、后退：





history.back()



history.go(-1)：0是刷新





2、前进：





history.forward()



history.go(1)





用的不多。因为浏览器中已经自带了这些功能的按钮。






    













相关教程