JavaScript - BOM
一.理解
ECMAScript是JavaScript的核心,但如果要在Web中使用JavaScript,那么BOM(浏览器对象模型)则无疑才是真正的核心。BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何的网页内容无关。多年来,缺少事实上的规范导致BOM既有意思又有问题,因为浏览器厂商会按照各自的想法随意去扩展它。于是,浏览器之间共有的对象就成为了事实上的标准。这些对象在浏览器中得以存在,很大程度上是由于他们提供了与浏览器的互操作型。W3C为了把浏览器中JavaScript最基本的部分标准化,已经将BOM的主要方面纳入了HTML5的规范当中。
二.window对象
BOM的核心对象是window,它表示浏览器的一个实例。window对象有双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。这意味着在网页中定义的任何一个对象、变量和函数,都以window作为其Global对象,因此有权访问parseInt()等方法。如果页面中包含框架,则每个框架都拥有自己的window对象,并且保存在frames集合中。在frames集合中,可以通过数值索引(从0开始,从左至右,从上到下)或者框架的名称来访问相应的window对象。
1、window对象方法
1.1、系统对话框
浏览器通过(实际是window对象的方法)alert()、confirm()、prompt()方法可以调用系统对话框向用户显示消息。
a.消息框:alert
, 常用。
alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
b.输入框:prompt
,返回提示框中的值。
prompt() 方法用于显示可提示用户进行输入的对话框。
参数(可选):
第一个参数:要在对话框中显示的纯文本。
第二个参数:默认的输入文本。
c.确认框:confirm
,返回 true/false.
confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。
代码示例:
<div id="dv">this is a div</div>
<button onclick="test_alert();">消息框</button>
<button onclick="test_prompt();">输入框</button>
<button onclick="test_comfirm();">确认框</button>
<script type="text/javascript">
// 消息框
function test_alert() {
alert('消息框!');
}
// 输入框
function test_prompt() {
var item = prompt('请输入年龄'); // item得到输入的值
alert(item);
alert(prompt('请输入年龄', 18)); // 将输入的值输出
}
/**
* 确认框
* 返回值:boolean(true|false)
*/
function test_comfirm() {
var result = confirm('真的要改吗?');
if (result) {
var ele = document.getElementById("dv");
ele.style.color = "red";
ele.innerHTML = "<span>div is red</span>";
} else {
alert("没事别瞎点");
}
}
</script>
消息框:
输入框:
确认框:
确定
取消
1.2、打开窗口
window.open()方法
window.location.href = "index.html";
既可以导航到一个特定的URL也可以用来打开一个新的窗口
<input type="button" name="open" value="sxt" onclick='open_sxt();' />
<script type="text/javascript">
function open_sxt() {
window.open('http://www.shsxt.com', '_block');
// window.open(); // 空白窗口
}
</script>
window.open() 打开
1.网址
2.打开方式 _self _blank
3.样式...
1.3、关闭窗口
window.close()
:关闭窗口。
例:点击按钮关闭当前窗口。
<input type="button" value="关闭窗口" onclick="window.open('about:blank', '_self').close();" />
1.4、时间函数
setInterval(function(){},时间)
定时器
内置的方法
作用:
每隔一段时间或者延迟一段事件执行某些代码
分类:
1.重复执行定时器 执行多次
返回值=setInterval(function(){},时间)
时间ms为单位
2.延迟执行定时器 只执行一次
setTimeout(function(){},时间)
清除定时器
clearInterval(返回值)
clearTimeout(返回值)
setTimeout(function(){},时间)
在指定的毫秒数后调用函数或计算表达式。通过返回的标识也可以clearTimeout(id)来清除指定函数的执行。
<h1 id="h1"></h1>
<input type="button" value="停止显示时间" onclick='stop_show();' />
<script type="text/javascript">
// 延迟3 秒后出现 alert
function hello() {
alert("对不起, 久等了!");
}
window.setTimeout("hello()", 3000);
// 不停的打印当前时间,当时间秒数为0时显示为红色
var timeout;
function show_time() {
// 拿到当前时间
var date = new Date();
var time = date.toLocaleString();
// 拿到相应对象
var h1 = document.getElementById('h1');
h1.innerHTML = time;
console.log(date.getSeconds());
var sec = date.getSeconds();
sec = sec % 10; // 对10取余
// 根据需求添加样式
if(0 == sec) { // 当时间的秒数变成0时,显示红色字体
h1.innerHTML = '<span style="color:red">' + time + '</span>';
} else {
h1.innerHTML = time;
}
/*
* 定时操作,只执行一次
* 第一个参数:执行的方法;
* 第二个参数:定时,单位是毫秒
*/
timeout = window.setTimeout(show_time, 1000); // 接收setTimeout()返回的 ID值
}
window.setTimeout(show_time, 1000); // 只执行了一次
// 停止操作
function stop_show() {
clearTimeout(timeout); // 返回的ID值用来停止函数
}
</script>
2、window对象属性
window对象的双重身份决定着,在该对象中既有着核心语法中的全局方法和属性,又有着和浏览器相关的属性和方法,以下的一些对象都是属于window对象的属性值。
三.history历史对象
history 对象是历史对象。包含用户(在浏览器窗口中)访问过的 URL。history 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。
history对象的属性:
length,返回浏览器历史列表中的 URL 数量。
history对象的方法:
back()
:加载 history 列表中的前一个 URL。
forward()
:加载历史列表中的下一个 URL。
当页面第一次访问时,还没有下一个url。
go(number|URL)
: URL 参数使用的是要访问的 URL。
而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。go(-1),到上一个页面。go(-2)上上个
JS_BOM_history_a.html
<body>
<h1>A页面</h1>
<a href="JS_BOM_history_b.html">进入B页面</a><br />
<button type="button" onclick="window.history.forward();">前进至B页面</button>
</body>
JS_BOM_history_b.html
<body>
<h1>B页面</h1>
<a href="JS_BOM_history_c.html">进入C页面</a><br />
<button type="button" onclick="window.history.forward();">前进至C页面</button><br />
<button type="button" onclick="window.history.back();">后退至A页面</button>
</body>
JS_BOM_history_c.html
<body>
<h1>C页面</h1>
<button type="button" onclick="window.history.go(-1);">后退至B页面</button><br />
<button type="button" onclick="window.history.go(-2);">后退至A页面</button>
</body>
四.location位置对象
location 对象是window对象之一,提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。也可通过 window.location 属性来访问。
location 对象的属性:
href
:设置或返回完整的 URL
location 对象的方法:
reload()
:刷新 重新加载当前文档。
window.location.reload();
replace()
:替换 用新的文档替换当前文档。
window.location.replace();
<input type="button" value="刷新" onclick="window.location.reload();" />
<input type="button" name="" id="" value="shsxt官网" onclick="open_sxt();" />
<script type="text/javascript">
function open_sxt() {
// 用新的文档替换当前文档
alert(window.location.href); // 获取完整的url
window.location.href = "http://www.shsxt.com";
// 用新的文档替换当前文档
// window.location.replace("http://www.baidu.com");
}
</script>
五.document对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分,也可通过 window.document 属性对其进行访问。
document对象的body属性,提供对元素的直接访问,cookie属性,用来设置或返回与当前文档有关的所有cookie,write()方法,向文档写HTML表达式或JavaScript代码。还有其他属性和方法。在Document对象中讲解。
该对象作为DOM中的核心对象存在。
六、cookie对象
cookie的意图:
在本地客户端的磁盘上以很小的文件形式保存数据。
cookie的应用:
如:保存用户信息,下次自动登录。
cookie的组成:
名称对应值的文本形式组成 name=value。添加相同名称的cookie后者会覆盖前者
完整格式:
name=value;[expires=date];[path=path];[domain=somewhere.com];[secure]
向本地磁盘写入cookie(若有中文需要编码):
document.cookie = 'name=value';
document.cookie = 'name=' + encodeURIComponent('value');
获取cookie(若有中文需要编码):
document.cookie;
decodeURIComponent(document.cookie);
设置失效时间:
document.cookie = 'name=value; expires=' + date字符串;
删除cookie:
重新创建cookie,并把时间设置为当前时间之前即可。
<button type="button" onclick="set_cookie();">添加cookie</button>
<button type="button" onclick="get_cookie();">获取cookie</button>
<button type="button" onclick="del_cookie();">删除cookie</button>
<script type="text/javascript">
// 添加cookie
function set_cookie() {
var exp = new Date();
exp.setTime(exp.getTime() + 5000);
console.log(exp.toUTCString());
// 添加cookie且设置失效时间为10秒
// 添加相同名称的cookie后者会覆盖前者
document.cookie = 'name=' + encodeURIComponent('张三') + '; expires=' + exp.toUTCString();
document.cookie = 'name2=' + encodeURIComponent('李四') + '; expires=' + exp.toUTCString();
document.cookie = 'name3=' + encodeURIComponent('王五') + '; expires=' + exp.toUTCString();
}
// 获取cookie
function get_cookie() {
var _cookie = decodeURIComponent(document.cookie);
console.log(_cookie);
var cookie_arr = _cookie.split('; ');
for (var i in cookie_arr) {
console.log(cookie_arr[i]);
}
}
// 删除cookie
function del_cookie() {
var exp = new Date();
// 设置一个比当前时间小的时间即可
exp.setTime(exp.getTime() - 1);
// 添加cookie且设置失效时间为10秒
// 根据name可以指定删除的cookie
document.cookie = 'name=' + encodeURIComponent('张三') + '; expires=' + exp.toUTCString();
}
</script>
添加cookie:
获取cookie:
删除cookie:
如图name被删除了