JavaScript基础之BOM【java吧】

java吧关注：1,246,518贴子：12,723,741

9回复贴，共1页

JavaScript基础之BOM

BOM(Browser Object Model) 与 DOM(Document Object Model)的关系：
BOM 包含 DOM
bom: browser object model 浏览器对象模型，能操作窗口，导航对象，历史、 cookie等

送TA礼物

1楼2019-08-28 16:44回复

系统对话框：
1、消息框:alert, 常用。
2、输入框:返回提示框中的值。
3、选择框:返回 true/false。

3楼2019-08-29 09:09

测试代码如下:
<span id="one" onclick="testAlert();">测试消息框</span>
<span id="one" onclick="testPrompt();">测试输入框</span>
<span id="one" onclick="testConfirm();">测试选择框</span>
<script type="text/javascript">
function testAlert(){
alert("游戏结束...");
}
function testPrompt(){
window.prompt("好不好","好");
}
function testConfirm(){
var result=window.confirm("服不服"); //返回 true |false
alert(result?"哈哈，听话":"敢不服?");
}
</script>

4楼2019-08-29 09:11

打开新窗口方法：
打开新窗口
//返回新窗口的 window 对象： "url","类似a标签中target属性","窗口参数(各参数用逗号分隔)"
var newWindow = window.open(URL,opentype,parameterList)
//关闭窗口，如果是主窗口会有提示
window.close();

5楼2019-08-30 14:09

6楼2019-08-30 14:10

示例
<script>
function openwin(){
var openW=window.open('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no,status=no');
/*
openW.document.write("<TITLE>例子</TITLE>")
openW.document.write("<BODY BGCOLOR=#ffffff>")
openW.document.write("<h1>Hello!</h1>")
openW.document.write("New window opened!")
openW.document.write("</BODY>")
openW.document.write("</HTML>")
openW.document.close();
*/
}
</script>
<input type="button" onclick="openwin()" value="打开窗口">
<input type='button' value='关闭' onclick='window.close()'>
opener 获取父对象

7楼2019-08-30 14:11

历史对象：
window.history.back();后退
window.history.forward();前进
a.html:
<a href="b.html">B</a>
<a href="javascript:void(0);" onclick="window.history.back();">回退</a>
<a href="javascript:void(0);" onclick="window.history.forward();">前进</a>
b.html:
<a href="c.html">C</a>
<a href="javascript:void(0);" onclick="window.history.back();">回退</a>
<a href="javascript:void(0);" onclick="window.history.forward();">前进</a>
c.html:
<a href="javascript:void(0);" onclick="window.history.back();">回退</a>
<a href="javascript:void(0);" onclick="window.history.forward();">前进</a>

9楼2019-09-03 15:17

document 对象:
document 代表窗口的空白区域。
document 是 window 的属性
document.title : 标题栏
<a href="javascript:void(0);" onclick="testTitle()">测试 title</a>
<script>
function testTitle() {
window.document.title="我的标题";
}
</script>

10楼2019-09-03 15:30

Navigator 对象：
判断浏览器类型
(function(){
var c=window.navigator.userAgent.toLowerCase();
if(c.indexOf("msie")>0) {
alert("您用的是微软的 ie 浏览器");
}else if(c.indexOf("firefox")>0) {
alert("您用的是火狐");
}else if(c.indexOf("chrome")>0){
alert("chrome");
}else{
alert("不知道");
}
})();

12楼2019-09-05 09:19

cookie：
简单理解下 cookie 的结构，简单地说：cookie 是以键值对的形式保存的，即 key=value的格式。各个 cookie 之间一般是以“;”分隔。
<head>
<title>cookie</title>
<script type="text/javascript">
function setCookie(name,value){
var days = 30;
var exp = new Date();
//过期时间
exp.setTime(exp.getTime() + days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
//加入 cookie
function addCookie(){
//document.cookie="uname=zs";
setCookie("uname","zs");
}
//读取 cookie
function readCookie(){
var myCookie=document.cookie.split(";");
var uname=myCookie[0].split("=")[1];
alert(uname);
}
//删除 cookie:设置过期时间为上一秒
function delCookie(){
var exp = new Date();
exp.setTime(exp.getTime() - 1);
//设置过期时间
document.cookie="uname=zs"+";expires="+exp.toGMTString(); }
</script>
</head>
<body>
<button onclick="addCookie()">添加 cookie</button>
<button onclick="readCookie()">读取 cookie</button>
<button onclick="delCookie()">删除 cookie</button>
</body>

13楼2019-09-06 17:59

扫二维码下载贴吧客户端

下载贴吧APP
看高清直播、视频！

贴吧热议榜

9回复贴，共1页

<返回java吧

发表回复

发贴请遵守贴吧协议及“七条底线”贴吧投诉

内容:

使用签名档查看全部

发表

保存至快速回贴

日	一	二	三	四	五	六

JavaScript基础之BOM

登录百度账号

扫二维码下载贴吧客户端