BOM 浏览器对象模型

BOM (浏览器对象模型),它提供了与浏览器窗口进行交互的对象

一、window对象

Window对
象表示整个浏览器窗口。

1.系统消息框 alert()

alert('hello world!');

2.确认对话框 confirm() 

该方法返回一个boolean值,如果点击ok返回true,点击cancel返false;

if(confirm("确定要删除吗?")){

  //删除
}

3.输入对话框 prompt()

如果点击ok将文本框中的值作为函数值返回,如果点击cancel返回null

//如果用户不输入任何值或点击取消,那么脚本会一直弹出对话框
function requiredPrompt() {
while(true) {
var name = prompt("ssss");
if(name != null && name != "") {
console.log(name);
break;
}
}
}

4. 打开新窗口 window.open()

window.open("http://www.baidu.com","_blank","width=300, height=200");

5.定时器setInterva() 、 setTimeout() 

定时器可以说是js前端最常用的工具,几乎所有的逐渐变化的动态效果都会使用到定时器,比如 说图片滚动,渐隐渐现,拖拽等等.定时器分两种分别是settimeout和setinterval.

window.setInterval(); //设置循环定时器
var T = window.setInterval(test,1000); // test:执行的代码串或函数 设置1000毫秒
window.clearInterval(); //清除循环定时器
window.clearInterval(T);
window.setTimeout(); //设置单次定时器
var T = setTimeout(test,1000); // test:执行的代码串或函数 设置1000毫秒
window.clearTimeout() // 清除单次定时器
clearTimeout();

二、history对象

history对象是window对象的子对象,对应于浏览器的 历史记录。

window.history.go(-1);//跳转前一个页面
window.history.go(1);//跳转下一个页面
history.back();//跳转前一个页面
history.forward();//跳转下一个页面

三、Location对象

Location对象也是window对象的子对象,通过它可以获取或设置浏览器的当前地址。

1.跳转到其它页面

window.location.href = "http://www.163.com";
location.href = "http://www.163.com";

2.重新载入页面(刷新) 

location.reload(); 

四、navigator对象 

Navigator对象包含着有关web浏览器的信息,它也是window的属性,可以用 window.navigator 引用它,也可以用navigator引用

例:获取浏览器内部代号,名称,操作系统等信息

var info = navigator.userAgent;
alert(info);

效果图如下

Javascript初学篇章_6(BOM)的更多相关文章

  1. Javascript初学篇章_5(对象)

    对象 Javascript是一种面向对象的语言,因此可以使用面向对象的思想来进行javascript程序设计对象就是由一些彼此相关的属性和方法集合在一起而构成的一个数据实体.举个例子,一只猫是个对象, ...

  2. Javascript初学篇章_1(概念/数据类型)

    Javascript是一门脚本语言,主要由浏览器来执行.它可以说是页面的灵魂,让页面活过来.与之前学的HTML5+CSS样式的不同之处就在于,JS能让静态网页成为一个动态网页,实现与用户的互动. Ja ...

  3. Javascript初学篇章_4(循环与函数)

    七.循环语句 1.While 语法: while (exp){ //statements; } 说明: while (变量<=结束值){ 需执行的代码 } 例: var i=0; while(i ...

  4. Javascript初学篇章_3(注释/if/switch)

    五.javascript的注释 // 单行注释 /* …*/ 多行注释 注:多行注释不能互相嵌套 六.程序流程控制 一.条件语句 if 语法: if(condition) statements1 el ...

  5. Javascript初学篇章_8(事件)

    事件 HTML 事件是发生在 HTML 元素上的事情.例如用户点击按钮时,点击也是一个事件.事件可以用于处理表单验证,用户输入,用户行为及浏览器动作,如: 页面加载时触发事件 页面关闭时触发事件 用户 ...

  6. Javascript初学篇章_7(DOM)

    DOM 文档对象模型DOM (document object model) 文档对象模型,它定义了操作文档对象的接口.DOM 把一份html文档表示为一棵家谱树,使用parent(父), child( ...

  7. Javascript初学篇章_2(数据类型的查看和转换/运算符)

    三.数据类型的查看和转换 1.查看数据类型 typeof 说明:typeo可以查看变量的类型. 语法:alert(typeof  变量名或数据): 2.转换成字符串 var married = fal ...

  8. CSS3初学篇章_6(自定义动画)

    自定义动画 由于有一部分低版本的浏览器并不支持的问题,所以这个样式要多做兼容,各大浏览器兼容前缀如下: 前缀 浏览器  -webkit  chrome和safari  -moz  firefox  - ...

  9. JavaScript大杂烩9 - 理解BOM

    毫无疑问,我们学习JavaScript是为了完成特定的功能.在最初的JavaScript类型系统中,我们已经分析过JavaScript在页面开发中充当着添加逻辑的角色,而且我们知道JavaScript ...

随机推荐

  1. mysql安装时到最后start service时就不响应了的解决方法

  2. Java 中使用javah编译头文件出现找不到类的情况

    在工程的bin目录下,输入命令: javah -classpath . -jni 类路径.JNI类

  3. kettle系列-4.kettle定制化开发工具类

    要说的话这个工具类还是比较简单的,每个方法体都比较小,但用起来还是可以的,把开发中一些常用的步骤封装了下,不用去kettle源码中找相关操作的具体实现了. 算了废话不多了,直接上重点,代码如下: im ...

  4. yii2 关联查询,分页设置

    1.MODEL 如关联user table public function getUser(){        return$this->hasOne(User::className(),['i ...

  5. 那些年,坑死自己的事之fread/fwrite

    今天继续看牛人做过的东西,这个小程序并不大,加上相当多的注释行,才5000多行.这个小程序是在linux下实现的,之前自己也一直用vi来看并加以更加详细的注释,但是效率实在太低.于是将其转移到wind ...

  6. MVC 解决 readonly 问题

    <input type="text" class="form-control" name="UR_UserName" value=&q ...

  7. Linux deepin 下sublimes配置g++ openGL

    参考 :http://blog.csdn.net/u010129448/article/details/47754623 ubuntu 下gnome只要将代码中deepin-terminal改为gno ...

  8. react学习与简介

    简介: React是Facebook开发的一款JS库 React解决了什么问题? 1).首先是以往mvc模式的缺陷,当代码库庞大时,mvc非常的复杂,每添加新的功能,项目的复杂度就几何倍的增长,导致代 ...

  9. 【leetcode】Pascal's Triangle II

    题目简述: Given an index k, return the kth row of the Pascal's triangle. For example, given k = 3, Retur ...

  10. 【转】SqlServer将没有log文件的数据库文件附加到服务器中

    原文链接: http://www.cnblogs.com/xdotnet/p/attach_sqlserver_database_file_without_log_files.html 原作者删除了原 ...