javascript学习之BOM模型
2012-07-21 20:21
435 查看
浏览器的对象模型如下图所示:
1.window对象
moveBy(dx , dy) 将窗口移动相应偏移量
moveTo(x,y) 将窗口移动到相应位置
resizeBy(dx , dy)将窗口相对目前变化
resizeTo(x , y)将窗口大小变为
screenLeft/screenRight窗口位置
应该尽量减少对于窗口的操作,因为不同的浏览器提供的方法会有所不同
window.open(载入页面的url,新窗口的名字,属性字符串,是否替换当前页面)
返回值为新建窗口的引用。
如果用已有框架的名字作为参数传入第二个,那么新页面就会被载入那个框架,否则就会新创建窗口
属性字符串表格如下:
使用起来可以如下所示:
“height=200,width=200”不过绝对不能有多余的空格
window.close()关闭当前窗口
js脚本可以关闭它自己打开的窗口,不过如果关闭js所属的窗口的话会询问用户
2.弹框
弹框的话有以下几种方式
1.alert(文本)用于提示用户
2.confirm
if(confirm("are you sure")) {
}else {
}
用户两选择
3.prompt输入文本框
var res = prompt("what is your name" , "jack");第一个是询问 第二个是默认的填入参数
if(res != null) {
}else{
}
3.状态栏
用于更改浏览器下方的状态栏的信息
window.defaultStatus = "aa";则状态栏上就会长期显示aa
window.status可以临时改变文本,比如当鼠标移到href上的额时候
<a href = "xxx.html" onmouseover="window.status = 'aaaa'">xxx</a>
不过频繁更改状态栏会造成业余的感觉 所以一般不会使用
4.时间控制
暂停,比如鼠标放到了某个按钮上,需要隔一会才会显示tip
var id = setTimeout(函数名称 , 毫秒数)
clearTimeout(id);
间隔重复执行
var id = setInterval(function , timenumber)
clearInterval(id);
5.历史控制
<a href = "javascript:window.history.go(-1)">Back to the previous page</a>
为了使意义更明确一些 可以使用 history.back() and history.forward();
window.history.length可以查看历史记录的条数
6.document控制
1.document对象有很多可用的属性 比如更改title:
document.title = "xxx";
再比如更改当前的url从而得到页面跳转
document.url = "xxx";
2.document对象有很多集合类属性
访问方法:(如下代码)
<body>
<p>welcome to my <a href = "aaa">home</a></p>
<img src = "ddd" align = "right" name = "img1"/>
<form method = "post" action = "xxx" name = "form1">
<input text = "input" name = "i1"/>
<input text = "submit" value = "subscribe"/>
</form>
</body>
在如上代码的基础上可以访问到图片和各种form,比如:
document.images["img1"].src就可以找到img1的src
document.forms["form1"]可以访问到form1
3.write方法
document.write("<script type=\"text/javascript\">"+"</scr" + "ipt>");用于输出js代码到网页上
ps:其中的</script>标签被分开是因为浏览器,每次都会默认此标签之间为完整的js内容,就算是</script>出现
在了js字符串中。
4.配合open的write方法
下例为打开一个空白页 写入代码 然后利用close之后进行显示 适合不用服务器交互的页面
var win = window.open("about:blank" , "newwindow" , "height=50,width=30")
win.document.open();
win.document.write("<html><head><title>NewWindow</title></head></html>");
win.document.close();
5.location属性
可以用来解析url
location.href = "xxx"可以载入
location.reload(true)从服务器重载页面
location.reload(false)从缓存重载页面
注意:reload调用之后,后面的代码可能之行也可能不执行,得看网络延迟和系统资源的情况,所以一般会放到最后一行
6.navigator对象
可以获取各种浏览器的信息,如appCodeName用来获取浏览器的代码名称 从而可以检测到浏览器是哪一个
7.screen对象
用来获取用户的屏幕信息,如:
availHeight可以使用的屏幕高度
availWidth可以使用的屏幕宽度
colorDepth色深
height屏幕高
width屏幕宽
1.window对象
moveBy(dx , dy) 将窗口移动相应偏移量
moveTo(x,y) 将窗口移动到相应位置
resizeBy(dx , dy)将窗口相对目前变化
resizeTo(x , y)将窗口大小变为
screenLeft/screenRight窗口位置
应该尽量减少对于窗口的操作,因为不同的浏览器提供的方法会有所不同
window.open(载入页面的url,新窗口的名字,属性字符串,是否替换当前页面)
返回值为新建窗口的引用。
如果用已有框架的名字作为参数传入第二个,那么新页面就会被载入那个框架,否则就会新创建窗口
属性字符串表格如下:
使用起来可以如下所示:
“height=200,width=200”不过绝对不能有多余的空格
window.close()关闭当前窗口
js脚本可以关闭它自己打开的窗口,不过如果关闭js所属的窗口的话会询问用户
2.弹框
弹框的话有以下几种方式
1.alert(文本)用于提示用户
2.confirm
if(confirm("are you sure")) {
}else {
}
用户两选择
3.prompt输入文本框
var res = prompt("what is your name" , "jack");第一个是询问 第二个是默认的填入参数
if(res != null) {
}else{
}
3.状态栏
用于更改浏览器下方的状态栏的信息
window.defaultStatus = "aa";则状态栏上就会长期显示aa
window.status可以临时改变文本,比如当鼠标移到href上的额时候
<a href = "xxx.html" onmouseover="window.status = 'aaaa'">xxx</a>
不过频繁更改状态栏会造成业余的感觉 所以一般不会使用
4.时间控制
暂停,比如鼠标放到了某个按钮上,需要隔一会才会显示tip
var id = setTimeout(函数名称 , 毫秒数)
clearTimeout(id);
间隔重复执行
var id = setInterval(function , timenumber)
clearInterval(id);
5.历史控制
<a href = "javascript:window.history.go(-1)">Back to the previous page</a>
为了使意义更明确一些 可以使用 history.back() and history.forward();
window.history.length可以查看历史记录的条数
6.document控制
1.document对象有很多可用的属性 比如更改title:
document.title = "xxx";
再比如更改当前的url从而得到页面跳转
document.url = "xxx";
2.document对象有很多集合类属性
访问方法:(如下代码)
<body>
<p>welcome to my <a href = "aaa">home</a></p>
<img src = "ddd" align = "right" name = "img1"/>
<form method = "post" action = "xxx" name = "form1">
<input text = "input" name = "i1"/>
<input text = "submit" value = "subscribe"/>
</form>
</body>
在如上代码的基础上可以访问到图片和各种form,比如:
document.images["img1"].src就可以找到img1的src
document.forms["form1"]可以访问到form1
3.write方法
document.write("<script type=\"text/javascript\">"+"</scr" + "ipt>");用于输出js代码到网页上
ps:其中的</script>标签被分开是因为浏览器,每次都会默认此标签之间为完整的js内容,就算是</script>出现
在了js字符串中。
4.配合open的write方法
下例为打开一个空白页 写入代码 然后利用close之后进行显示 适合不用服务器交互的页面
var win = window.open("about:blank" , "newwindow" , "height=50,width=30")
win.document.open();
win.document.write("<html><head><title>NewWindow</title></head></html>");
win.document.close();
5.location属性
可以用来解析url
location.href = "xxx"可以载入
location.reload(true)从服务器重载页面
location.reload(false)从缓存重载页面
注意:reload调用之后,后面的代码可能之行也可能不执行,得看网络延迟和系统资源的情况,所以一般会放到最后一行
6.navigator对象
可以获取各种浏览器的信息,如appCodeName用来获取浏览器的代码名称 从而可以检测到浏览器是哪一个
7.screen对象
用来获取用户的屏幕信息,如:
availHeight可以使用的屏幕高度
availWidth可以使用的屏幕宽度
colorDepth色深
height屏幕高
width屏幕宽
相关文章推荐
- JavaScript学习之 BOM(浏览器对象模型)
- JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
- JavaScript高级程序设计(第3版)学习笔记14——浏览器对象模型BOM
- Javascript BOM即浏览器对象模型Brower Object Model(Window、Navigator、Screen、History、Location、弹出框、计时器)
- 从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流
- javascript学习---BOM
- [学习笔记]JavaScript之BOM基础
- 小白科普之JavaScript的BOM模型
- BOM、DOM学习笔记——JavaScript
- JavaScript学习4:BOM之window对象
- JavaScript学习总结(三)BOM和DOM详解
- 学习javascript的DOM模型,随意写的代码,更新博客,代码如下:
- JavaScript——BOM(浏览器对象模型),时间间隔和暂停
- JavaScript的组成--BOM浏览器对象模型
- JavaScript高级程序设计(第3版)学习笔记·第8章——浏览器对象模型BOM
- 【js学习笔记-075】-----客户端javascript线程模型
- javascript学习六:DOM模型
- JavaScript学习笔记(13)——BOM
- 轻松学习JavaScript十六:JavaScript的BOM学习(一)
- 【Web前端学习笔记】Javascript_04_BOM,DOM思想,正则表达式