您的位置:首页 > Web前端 > JavaScript

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屏幕宽
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: