10-19笔记总结

10-19笔记总结

window对象(bom对象)

window对象是所有对象的顶层对象

  1. document 使我们可以从脚本中,对HTML页面中所有元素进行访问
  2. history 访问过的URL
  3. location 包含有关当前URL的信息
  4. navigator 包含浏览器的信息
  5. screen 包含有关客户端显示屏幕的信息

https://img-blog.csdn.net/20151027220129757” alt=”” title=”” />.png)

tips:

  1. 所有浏览器都支持window对象,它表示浏览器的窗口.
  2. 所有JS的变量,函数,全局对象均自动成为window对象成员.

1.浏览器的位置

screenX  screenY  浏览器位置的坐标
screenLeft screenTop  浏览器距屏幕左边和上边的距离

2.浏览器可见区域的尺寸

window.innerWidth  window.innerHeight//只对支持w3c浏览器适用
document.documentElement.clientWidth
document.documentElement.clientHeight
对所有浏览器适用

3.window对象的方法(只对IE有效)

moveBy(x , y)   x,y值为像素表示移动的距离.
moveTo(x , y)   x,y值为坐标,表示移动到某个位置.(新窗口有效);
resizeBy(x , y) x,y值为像素表示放大或缩小窗口的高宽.
resizeTo(x , y) x,y值为放大或缩小后,窗口的高宽.

4.滚动条的控制

scrollBy(x , y)  x值为水平方向的滚动条.y值为垂直方向的滚动条.值为移动的距离
scrollTo(x , y)  x值为水平方向的滚动条.y值为垂直方向的滚动条.值为移动到的位置

5.时间间隔函数

setInterval(fn , time)  按照指定的周期来调动函数
clearInterval           取消时间函数的执行
setTimeout(fn , time)   指定延迟时间后执行函数
clearTimeout            取消延时函数的执行

事例

父子窗口传值
    父窗口代码
  <script>
    window.onload = function(){
        (function(){
            var openbtn = document.getElementById("openbtn");
            var closebtn = document.getElementById("closebtn");
            var newWindow;
            openbtn.onclick = function(){
            newWindow = window.open("02.html" , "" , "width = 400px,height = 400px");
            };
            closebtn.onclick = function(){
               newWindow.close();
            };
        }());
    }
</script>

<body>
    <input value="打开" id="openbtn" type="button">
    <input value="关闭" type="button" id="closebtn">
    <span id="show"></span>
</body>

    子窗口代码
<script>
    window.onload = function(){
        var lis = document.getElementsByTagName("li");
            for(var i = 0; i < lis.length ; i++){
                lis[i].onclick = function(){
                    opener.document.getElementById("show").innerHTML = this.innerHTML;
                }
            }
        }
</script>
<body>
    <ul>
        <li>成都</li>
        <li>上海</li>
        <li>北京</li>
        <li>深圳</li>
        <li>武汉</li>
    </ul>
</body>

鼠标点击子窗口的li标签的内容,this.innerHTML 取到鼠标所点击位置的内容.
opener 表示找到打开此窗口的父窗口中的元素.

2.history对象

属性:length 返回历史列表中的网址数

 forword   前进到一个页面
 back      后退到一个页面
 go(值)    跳转到一个页面,括号里赋值可正可负,正为前进,负为倒退

3.location对象

属性:

  • href 链接地址
  • hostname 主机名(ip地址)
  • pathname 存放文件的相对URL路径
  • port 端口号
  • search 返回一个URL的输入参数

方法

assign    载入一个新的文档
reload    用于刷新当前的文档(布尔类型 reload(true):从服务器上下载页面重新加载
          .不赋值则从本地缓存刷新页面)
replace   重新加载一个新的页面不会保存在history中

4.screen对象

availWidth  availHeight 屏幕的宽度,高度..不包括window任务栏
width  height  总宽,高..包括任务栏

5.navigator对象

浏览器信息
appCodeName        返回浏览器代码名
appName            返回浏览器名称
appVersion         返回浏览器平台和版本信息
platform           返回运行浏览器的操作系统平台
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值