JavaScript学习的第十九天

十点差三分️

已于 2022-05-09 10:37:36 修改

阅读量704

点赞数

文章标签： javascript 学习开发语言

于 2022-05-06 19:53:48 首次发布

本文链接：https://blog.csdn.net/cs_laomanong/article/details/124616355

版权

一、初识BOM

    console.log(window);
    // window.alert("警告框");//全局方法会省略window
    var a="全局变量";
    function func(){
        console.log("全局函数")
    }

    console.log(window.location);
    console.log(window.history);
    console.log(window.screen);
    console.log(window.navigator);
    console.log(window.sessionStorage)

二、BOM的属性值为对象

属性值为对象

history 历史记录对history对象的只读引用

console.log(window.history);

location 用于窗口或框架的location对象

console.log(window.location);

navigator 浏览器的配置信息对navigator对象的只读属性

console.log(window.navigator);

screen 屏幕对screen对象的只读属性

console.log(window.screen);

document 对document对象的只读属性

console.log(window.document);

关于缓存

cookie由用户客户端计算机暂时或永久保存的信息

console.log(document.cookie);

html5新增的缓存

sessionStorage 会话缓存对象

console.log(window.sessionStorage);

localStorage 本地缓存对象

console.log(window.localStorage)

三、BOM宽高的属性值

document. documentElement和document. body区别：

body 是DOM对象里的 body 子节点，即<body>标签

documentElement 是整个节点树的根节点root，即<html> 标签

屏幕的宽高 screen

console.log("屏幕的宽："+window.screen.width,"屏幕的高："+window.screen.height);

和window相关的宽高

innerHeight 浏览器窗口的高（文档显示区,滚动条）

innerWidth 浏览器窗口的宽（文档显示区,滚动条）

console.log("innerWidth："+window.innerWidth,"innerHeight："+window.innerHeight);

outerHeight 浏览器窗口的高（文档显示区,滚动条,工具栏）

outerWidth 浏览器窗口的宽（文档显示区,滚动条,工具栏）

console.log("outerHeight："+window.outerHeight,"outerWidth："+window.outerWidth);

兼容IE8以下浏览器

clientWidth 浏览器窗口宽（文档可见区）

clientHeight 浏览器窗口（文档可见区）

console.log(document.documentElement.clientHeight,document.documentElement.clientWidth);

clientWidth 浏览器窗口宽（文档显示区）

clientHeight 浏览器窗口（文档显示区）

console.log(document.body.clientHeight,document.body.clientWidth);

元素

clientLeft，clientTop 元素border的宽距离边框的偏移

console.log(document.body.clientLeft,document.body.clientTop);

offsetWidth 宽+padding+border

offsetHeight 高+padding+border

console.log(oMin.offsetWidth,oMin.offsetHeight);//300 300  只设置了宽高  
console.log(oMin.offsetWidth,oMin.offsetHeight);//340 340  设置了宽高+padding
console.log(oMin.offsetWidth,oMin.offsetHeight);//380 380  设置了宽高+padding+border
console.log(oMin.offsetWidth,oMin.offsetHeight);//380 380  设置了宽高+padding+border

offsetLeft，offsetTop 相对于祖先元素中最近有有定位属性的元素的偏移

console.log(oMin.offsetLeft,oMin.offsetTop);

scrollWidth scrollHeight 内容的元素大小(总宽度，总高度)

console.log(oMin.scrollWidth,oMin.scrollHeight)
console.log(document.documentElement.scrollHeight,document.documentElement.scrollWidth)

scrollTop，scrollLeft 元素被卷去的内容的高度和宽度

console.log(document.documentElement.scrollLeft,document.documentElement.scrollTop);

四、BOM坐标的属性

screenX screenY 返回相对于屏幕窗口的坐标/偏移

console.log(window.screenX,window.screenY);

screenLeft，screenTop 返回相对于屏幕窗口的坐标/偏移

console.log(window.screenLeft,window.screenTop);

pageXOffset，pageYOffset 网页内容相对于window偏移的位置

console.log(window.pageXOffset,window.pageYOffset);

scrollX，scrollY 滚动条卷去部分内容的大小

console.log(window.scrollX,window.scrollY);
console.log(document.documentElement.scrollLeft,document.documentElement.scrollTop);

五、BOM框架相关的属性

length 返回当前窗口中框架的数量

console.log(window.length);

self 返回对当前窗口的引用相当于window

console.log(window.self);

top 返回顶级窗口

console.log(window.top);

parent 返回父级窗口

console.log(window.parent);

contentWindow 获取框架的元素

console.log(document.getElementById("a").contentWindow);

frames 返回当前窗口，一个类数组对象，列出了当前窗口的所有直接子窗口。

console.log(window.frames[2]);
console.log(window.frames[2]==document.getElementById("c").contentWindow);

name 设置或返回窗口的名称

window.name="当前窗口";
console.log(window.name);
console.log(document.getElementById("a").contentWindow.name);

opener 返回对创建此窗口的引用

    document.onclick=function(){
        newWindow=window.open("http://www.baidu.com","newWindow","width=100");
        console.log(newWindow.opener);
    }

六、BOM的方法之弹窗

alert("内容") 警告框显示带有一段消息和一个确认按钮的警告框

    aBtns[0].onclick = function () {
        window.alert("警告框");
    }

confirm("内容") 确认框显示带有一段消息和取消确认按钮的确认框返回布尔值

var sure;
aBtns[1].onclick = function () {
    var sure = window.confirm("确认退出登录吗？");
      if (sure) {
          console.log("确定退出")
      } else {
          console.log("点错了，不退出")
      }
}

prompt("提示文本","默认输入的文本") 显示可提示用户输入的对话框提示框返回输入的内容

aBtns[2].onclick = function () {
    var age= window.prompt("请输入你的年龄",18);
    if(age>=18){
        console.log("你已成年")
    }else{
        console.log("未成年")
    }
}

七、BOM的方法之定时器

var aBtns = document.getElementsByTagName("button");

setInterval(function(){},time,参数,参数) 按照指定的周期(以毫秒计)来调用函数或者计算表达式

    var timer;
    aBtns[0].onclick=function(){
        // timer=setInterval(function(){
        //     console.log("这是每个一秒执行一次的定时器")
        // },1000)
        timer=setInterval(func,1000,1,2)
    }
    function func(x,y){
        console.log(x,y)
    }

    aBtns[2].onclick=function(){
       clearInterval(timer)
    }

setTimeout(function(){},time) 按照指定的周期(以毫秒计)后来调用函数或者计算表达式延迟计时器只执行一次

    aBtns[1].onclick=function(){
        setTimeout(function(){
            console.log("这是延迟一秒执行的定时器")
        },1000)
    }

八、BOM的方法之窗口的加载

open(URL,name/target,strWindowFeatures) 打开一个新的窗口或者查找一个已经命名的窗口默认在新窗口打开

URL：地址必填项

name：窗口的名称

target：窗口打开的位置

strWindowFeatures:包含新窗口的特征大小位置等

aBtns[0].onclick=function(){
    newWin=window.open("http://www.taobao.com","_blank","scrollbars=yes,menubar=yes");
}

close() 关闭浏览器窗口

    aBtns[1].onclick=function(){
        // window.close()
        newWin.close();
    }

focus() 把键盘焦点给与某个窗口

blur() 将焦点从窗口移开

    aBtns[2].onclick=function(){
        newWin.focus();
    }

stop() 停止窗口的加载

    aBtns[4].onclick=function(){
        window.stop();
    }

print() 打印窗口的内容

    aBtns[5].onclick=function(){
        window.print()
    }

十点差三分️

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习的第十九天

一、初识BOM console.log(window); // window.alert("警告框");//全局方法会省略window var a="全局变量"; function func(){ console.log("全局函数") } console.log(window.location); console.log(window.history); console.log(window.screen); c
复制链接

扫一扫