javascript基础:bom
一、BOM
1、概念:Browser Object Model 浏览器对象模型
* 将浏览器的各个组成部分封装成对象
2、组成:
* Window:窗口对象
* Navigator:浏览器对象
* Screen:显示器屏幕对象
* History:历史记录对象
* Location:地址栏对象
3、Window对象
1、与弹出框有关的方法
alert(): 显示带一段信息和一个确认按钮的警告框
confirm() 显示带有一段信息以及确认按钮和取消按钮的对话框
* 如果用户点击确定按钮,则方法返回true
* 如果用户点击取消按钮,则方法返回false
prompt() 显示可提示用户输入的对话框
*返回值:获取用户输入的值
2、与打开关闭有关的方法:
close():关闭浏览器窗口
* 谁调用close,就关谁
open():打开一个新的浏览器窗口
* 返回一个新的window对象
3、与定时器有关的方式
setTimeout() 在指定的毫秒数后调用函数或计算表达式
* 参数:
1、js代码或者方法对象
2、毫秒值
* 返回值:唯一标识,用于取消定时器
clearTimeout() 取消有setTimeout() 方法设置的 timeout setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式
clearInterval() 取消由 setInterval() 设置的 timeout
//1、alert
alert("666")
window.alert("555") //2、confirm
var flag = confirm("确定推出吗??")
alert(flag)
if(flag){
//退出
alert('欢迎下次再次登录')
}else{
//提示
alert('手别抖')
} //输入框
//3、prompt
var result = prompt('请输入用户名');
alert(result)
//open
//打开一个新窗口
var openBtn = document.getElementById("openBtn");
var newWindow;
openBtn.onclick = function(){
newWindow = open("http://www.baidu.com");
} //关闭一个新窗口
//close
var closeBtn = document.getElementById("closeBtn");
closeBtn.onclick = function(){
newWindow.close();
}
// 一次性定时器
setTimeout("fun()",3000);
var id = setTimeout(fun,3000);
// 取消定时器
clearTimeout(id);
function fun(){
alert('bbb~')
} // 循环定时器
var id = setInterval(fun,2000)
// 取消循环定时器
clearInterval(id)
// 获取history
var h1 = window.history;
var h2 = history;
alert(h1)
alert(h2) var openBtn = window.document.getElementById("openBtn");
alert(openBtn);
// document.getElementById("")
4、Location:地址栏对象
1、创建(获取):
1、window.location
2、location
2、方法:
* reload() 重新加载当前文档,刷新
3、属性:
* href 设置或返回完整的URL
<input type="button" id="btn" value="刷新">
<input type="button" id="goflypig" value="flypig"> <script>
// reload方法,定义一个按钮,点击按钮,刷新当前页面
//1.获取按钮
var btn = document.getElementById("btn");
//2.绑定单击事件
btn.onclick = function(){
//3.刷新页面
location.reload();
} // 获取href
var href = location.href;
alert(href) //1.获取按钮
var goflypig = document.getElementById("goflypig");
//2.绑定单击事件
goflypig.onclick = function(){
//3.访问flypig
location.href = "https://www.flypig666.cn";
}
</script>
5、History:历史记录对象
1、创建(获取):
1、windows.history
2、history
2、方法:
* back() 加载history 列表中的前一个 URL
* forward() 加载history 列表中的下一个 URL
* go(参数) 加载history 列表中的某个具体页面
* 参数
* 正数:前进几个历史记录
* 负数:后退几个历史记录
3、属性:
* length 返回当前窗口历史列表中的 URL 数量
<input type="button" id="btn" value="获取历史记录个数">
<a href="History_1.html">history1</a>
<input type="button" id="forward" value="前进"> <script> //一、
//1、获取按钮
var btn = document.getElementById("btn")
//2、绑定单击事件
btn.onclick = function(){
//3、获取当前窗口历史记录个数
var length = history.length;
alert(length)
} //二、
//1、获取按钮
var forward = document.getElementById("forward")
//2、绑定单击事件
forward.onclick = function(){
// history.forward();
history.go(+1)
}
</script>
javascript基础:bom的更多相关文章
- JavaScript基础 -- BOM
JavaScript三大核心: 1)核心(ECMAScript):描述了JS的语法和基本对象 2)文档对象模型(DOM):处理网页内容的方法和接口 3)浏览器对象模型(BOM):与浏览器交互的方法和接 ...
- 从零开始学习前端JAVASCRIPT — 5、JavaScript基础BOM
1:BOM(Browser Object Model)概念 window对象是BOM中所有对象的核心. 2:window属性(较少用) self:self代表自己,相当于window. windo ...
- javascript基础-BOM原理
图解: 1. Loction: 拼接参数时,应编码decodeURIComponent/encodeURIComponent(). 2. History: pushState+replaceStat ...
- JavaScript基础:BOM的常见内置方法和内置对象
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. BOM的介绍 JavaScript的组成 JavaScript基础分为三 ...
- JavaScript 基础知识 - BOM篇
前言 本篇文章是JavaScript基础知识的BOM篇,如果前面的<JavaScript基础知识-DOM篇>看完了,现在就可以学习BOM了. 注意: 所有的案例都在这里链接: 提取密码密码 ...
- 一步步学习javascript基础篇(0):开篇索引
索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...
- 前端之JavaScript基础
前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...
- javascript基础01
javascript基础01 Javascript能做些什么? 给予页面灵魂,让页面可以动起来,包括动态的数据,动态的标签,动态的样式等等. 如实现到轮播图.拖拽.放大镜等,而动态的数据就好比不像没有 ...
- javascript基础语法——词法结构
× 目录 [1]java [2]定义 [3]大小写[4]保留字[5]注释[6]空白[7]分号 前面的话 javascript是一门简单的语言,也是一门复杂的语言.说它简单,是因为学会使用它只需片刻功夫 ...
- javascript基础系列(入门前须知)
-----------------------小历史---------------------------- javascript与java是两种语言,他们的创作公司不同,JavaScript当时是借 ...
随机推荐
- 微信小程序(mpvue框架) 购物车
效果图: 说明:全选/全不选, 1.数据: products:[{checked:true,code:"4",echecked:false,hasPromotions:true,i ...
- POJ 1127 /// 判断线段与线段是否相交
题目大意: 给定n条线段 接下来n行是端点信息 接下来询问 a b 是否相交 若a与c相交 b与c相交 ,那么a与b就是相交的 先判断任两条线段是否相交 再用folyd #include <cs ...
- [WPF自定义控件库] 让Form在加载后自动获得焦点
原文:[WPF自定义控件库] 让Form在加载后自动获得焦点 1. 需求 加载后让第一个输入框或者焦点是个很基本的功能,典型的如"登录"对话框.一般来说"登录" ...
- html自定义分页
public class MyPager { /// <summary> /// 每一页数据的条数 /// </summary> public int PageSize { g ...
- PHP网络请求优化
目录 1. 设置超时时间 2. 将串行请求并行化 1. 设置超时时间 连接超时:200ms 读超时: 800ms 写超时: 500ms 2. 将串行请求并行化 使用curl_multi_*() 使用s ...
- Python全栈开发:冒泡排序
#!/usr/bin/env python # -*- coding;utf-8 -*- """ 第一次对比:找到最大值,放到最后 对比是两两对比,对比的两个数组合共有l ...
- shell 版本号比较_用shell如何比较软件版本号的大小
比如你想写个脚本来比较两个版本号 (如"1.2.30" 和"1.3.0")来辨认哪个版本是最新的,有可以比较两个版本号字符串的shell脚本吗? 当你写了一个s ...
- HTML - 内嵌标签相关
<html> <head></head> <body> <!-- iframe (内嵌标签) src : 要显示的网页资源路径(本地资源或网络资源 ...
- 廖雪峰Java11多线程编程-3高级concurrent包-6ExecutorService
Java语言内置多线程支持: 创建线程需要操作系统资源(线程资源,栈空间) 频繁创建和销毁线程需要消耗大量时间 如果可以复用一个线程 线程池: 线程池维护若干个线程,处于等待状态 如果有新任务,就分配 ...
- ThinkPHP 删除数据
ThinkPHP删除数据使用delete方法,例如: 直线电机价格 $Form = M('Form'); $Form->delete(5); 表示删除主键为5的数据,delete方法可以删除单个 ...