1.window中的open、close、alert、confirm方法

在BOM编程中，顶级对象是window，window有open方法可以开启窗口，close方法关闭窗口，alert是弹出消息框，confirm会弹出一个确认框。话不多说，上代码。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>BOM编程实例</title></head><body><!-- 1.window.open()中的第二个参数表示了在哪里打开新页面，默认方式是_blank(新窗口) --><input type="button" value="跳转百度(当前窗口)" onclick="window.open('https://www.baidu.com','_self');"/><input type="button" value="跳转百度(新窗口)" onclick="window.open('https://www.baidu.com','_blank');"/><input type="button" value="跳转百度(父窗口)" onclick="window.open('https://www.baidu.com','_parent');"/><input type="button" value="跳转百度(顶级窗口)" onclick="window.open('https://www.baidu.com,'_top');"/><!-- 2.window.close()方法会关闭当前页面 --><input type="button" value="关闭页面" onclick="window.close()" /><!-- 3.window.confirm()方法会返回一个true或者false,用户点击确定就是true,反之则是false --><script type="text/javascript">function del(){if(window.confirm("确认删除数据吗？")){alert("delete data ....");}}</script><input type="button" value="弹出消息框" onclick="window.alert('消息框!')" /><!--删除操作的时候都要提前先得到用户的确认。--><input type="button" value="弹出确认框(删除)" onclick="del();" /></body>
</html>

2.history和location

2.1 history中的back和go方法

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>history对象</title></head><body><a href="链接">007页面</a><input type="button" value="后退" onclick="window.history.back()"/> <input type="button" value="后退" onclick="window.history.go(-1)"/> <input type="button" value="前进" onclick="window.history.go(1)"/> </body>
</html>

back方法会跳转上一个页面，go方法可以历史中的多个页面跳转。例如上面代码中，go(-1)就是返回上一个页面，go(1)是跳转下一个页面。

2.2 location的href属性

<script type="text/javascript">function golink(){   //这些方式都可以设置链接// window.location.href = "http://www.jd.com";// window.location = "http://www.126.com";     //document.location.href = "http://www.sina.com.cn";document.location = "http://www.tmall.com";}
</script><input type="button" value="新浪" onclick="golink();"/>

总结，有哪些方法可以通过浏览器往服务器发请求？
1、表单form的提交。
2、超链接。
3、document.location
4、window.location
5、window.open(“url”)
6、直接在浏览器地址栏上输入URL，然后回车。（这个也可以手动输入，提交数据也可以成为动态的。）
以上所有的请求方式均可以携带数据给服务器，只有通过表单提交的数据才是动态的。

2.3 设置当前窗口为顶级窗口

if(window.top != window.self){window.top.location = window.self.location;
}

JavaScript学习笔记（BOM编程案例）相关推荐

JavaScript学习笔记---面向对象编程-JS高级部分（pink老师）
目录一.面向对象编程介绍 1.1 两大编程思想 1.面向过程编程POP(Process-Oriented Programming) 2.面向对象编程OOP(Object Oriented Progr ...
JavaScript学习笔记07【6个经典案例——电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单验证】
Java后端学习路线笔记汇总表[黑马程序员] w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符. ...
JavaScript学习笔记04【高级——DOM和事件的简单学习、BOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript超全学习笔记+Web经典案例，赶快收藏
青春啊,永远是美好的,可是真正的青春,只属于这些永远力争上游的人,永远忘我劳动的人,永远谦虚的人! 最近收到不少的优秀学生投稿,他们有投稿手写笔记.有手写博客.也还有视频.小编也从中挑出几篇较为优秀的 ...
JavaScript学习笔记一
JavaScript学习笔记 1. 介绍 2. 基础语法输入输出变量数据类型简单数据类型复杂数据类型类型转换 3. 运算算术运算符递增递减运算符比较运算符逻辑运算符赋值运算符运 ...
千锋JavaScript学习笔记
千锋JavaScript学习笔记文章目录千锋JavaScript学习笔记写在前面 1. JS基础 1.1 变量 1.2 数据类型 1.3 数据类型转换 1.4 运算符 1.5 条件 1.6 循环 ...
JavaScript学习笔记06【高级——JavaScript中的事件】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript学习笔记05【高级——DOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript 学习笔记（第三天）
JavaScript 学习笔记(第三天) 一.数组 1.1.数组的基础 1.2.数据类型分类 1.3.创建数组 1.3.1.字面量创建一个数组 1.3.2.内置构造函数创建数组 1.4.数组的基本操作 ...
JavaScript学习笔记-B站动力节点
文章目录 1.1.什么是JavaScript,有什么用? 1.2.HTML,CSS,JavaSript三者关系 2.在HTML中怎么嵌入JavaScript代码? 3.JS的标识符和关键字 4.关于J ...

JavaScript学习笔记（BOM编程案例）

文章目录