有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

js window对象属性【详解】

javascript cat 10个月前 (11-29) 39次浏览 已收录 0个评论 扫描二维码

1、window对象

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

1、window对象

console.log(window); // 它是一个对象,它里面就会有很多的属性和方法

// 查看window对象的属性
var n = 1;
for (var attr in window) {
    console.log(n++, attr, '----', window[attr]);
}

// 我们声明的全局变量或全局函数,自动成为window的属性
var uname = 'zs';
function fn() {
    console.log('我是全局的fn函数');
    console.log(this);
}

console.log(uname);
console.log(window.uname);

fn();
window.fn();

2、弹出窗

// 这三个弹出窗都是window下面的,但是我们平时使用不加window

// alert是只带确定的弹出窗,没有返回值
var v = alert('弹出窗');
console.log(v);

// confirm是带确定和取消的弹出窗,确定返回true,取消返回false
var v = confirm('我弹出了');
console.log(v);

// prompt是带有输入框的弹出窗,确定返回输入的值,取消返回null
var v = prompt('请输入成绩')
console.log(v);

3、打开和关闭

// 打开窗口
// window.open(url, 打开窗口的方式, 设置窗口大小, 新窗口是否取代浏览器记录中的位置)

// 打开方式,默认新窗口打开
// _self : 在当前窗口打开
// _blank: 在新窗口打开
// 返回新页面的window引用

// 关闭窗口
// window.close();  只能关闭由js打开的页面,window即被关闭窗口的引用
<span>打开</span>
<span>关闭</span>

<script>
    var span = document.querySelectorAll('span');
    var w;

    // 打开
    span[0].onclick = function () {
        w = open('https://www.paozha.net', '_blank', 'width=600px, height=400px');
    }

    // 关闭
    span[1].onclick = function () {
        w.close();
    }
</script>

4、location

location 是最有用的 BOM 对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。事实上,location 对象是很特别的一个对象,因为它既是 window对象的属性,也是 document 对象的属性;

// console.log(location); // 浏览器地址栏对象,它是一个对象,下面有很多的属性和方法
// console.log(typeof location); // 'object'

console.log(location.href); // 返回浏览器地址 可以设置
console.log(location.search); // 返回?号以后的东西,包括?号
console.log(location.hash); // 返回#号以后的东西,包括#号
console.log(location.host); // 返回服务器名称和端口号(如果有)
console.log(location.hostname); // 不带端口号的服务器名称
console.log(location.pathname); // URL中的目录和(或)文件名
console.log(location.port); // 端口号
console.log(location.protocol); // 协议 http 和 https

// setTimeout(function () {
//     location.href = 'https://baidu.com'; // 跳转页面
// }, 3000);

setInterval(function () {
    location.reload(); // 重新加载页面(刷新)
}, 3000);

5、history

历史记录:保存着用户上网的历史记录,从窗口被打开的那一刻算起。

history.go(-1);//后退一页
history.go(1);//前进一页
history.go(2);//前进两页
history.back()   // 后退
history.forward()  // 前进

6、navigator

浏览器信息

// 浏览器的信息,编写代码一般用不上
console.log(navigator.appCodeName); // 浏览器代号
console.log(navigator.appName); // 浏览器名称
console.log(navigator.appVersion); // 浏览器版本
console.log(navigator.cookieEnabled); // 是否启用了cookie
console.log(navigator.platform); // 硬件平台
console.log(navigator.userAgent); // 用户代理
console.log(navigator.systemLanguage); // 用户代理语言

7、BOM事件

// window.onload: html 文档和资源都加载完成后触发
window.onload = function () {
    console.log('加载完成');
}

// window.onresize:当窗口大小发生变化时触发(在窗口变化的过程中,会不断的触发)
window.onresize = function () {
    console.log('我发生变化了');
}

// window.onscroll:当浏览器滚动条滚动时触发(在滚动条滚动的时候,会不断的触发)
window.onscroll = function () {
    console.log('我滚动了');
}

2、body位置属性

1、元素宽高

// 获取元素的宽高
var box = document.getElementById('box');

// 之前的做法:
// 元素.style.width    只能获取行间的样式(几乎没用)(有单位)
// window.getComputedStyle(元素).width      IE8及以下不支持(有单位)
// 元素.currentStyle.width                  IE8及以下支持(有单位)

// 不能获取隐藏元素的宽高,且返回值没有单位
console.log(box.clientWidth); // 120 width+padding   (可视宽)
console.log(box.offsetWidth); // 122 width+padding+border  (占位宽)

console.log(box.clientHeight); // 120
console.log(box.offsetHeight); // 122

// (几乎不用)
// 元素.clientTop: 上边框的高度
// 元素.clientLeft  : 左边框的宽度
console.log(box.clientTop);
console.log(box.clientLeft);

2、可视区宽高

获取特殊标签

document.title = '醒醒别睡着了'; // title

document.head // 获取head标签

console.log(document.body); // body

console.log(document.documentElement); // html

// 可视区宽高
alert(document.documentElement.clientWidth);
alert(document.documentElement.clientHeight);

3、元素位置

元素.offsetLeft

元素.offsetTop

获取到离它最近的有定位属性的父级的距离,如果没有定位的父级,获取到body的距离

<div id="box1">
    <div id="box2">
        <div id="box3"></div>
    </div>
</div>
// 元素.offsetLeft  返回到离它最近的有定位属性的父级左边的距离,如果没有定位的父级,则到body距离
// 元素.offsetTop   返回到顶边的距离

var box3 = document.querySelector('.box3');
console.log(box3.offsetLeft);
console.log(box3.offsetTop);
console.log(box3.offsetParent);

// 封装一个方法,用于获取任何一个元素到文档的距离

console.log(getPos(box3));

function getPos(ele) {
    var l = 0;
    var t = 0;

    while (ele) {
        l += ele.offsetLeft;
        t += ele.offsetTop;
        ele = ele.offsetParent;
    }

    return {
        left: l,
        top: t
    }
}

4、滚动条

获取

元素.scrollTop

元素.scrollLeft

设置

元素.scrollTop = 值

元素.scrollLeft = 值

// 滚动时,获取滚动条的距离
window.onscroll = function () {
    var top = document.documentElement.scrollTop;
    console.log(top);
}

// 在页面上点击一下,让滚动条的距离到500
document.onclick = function () {
    document.documentElement.scrollTop = 500;
}

案例:返回顶部

案例:弹出窗

总结:

client系列
    clientWidth:width + padding
    clientHeight:height + padding
    
    clientTop: 元素上边框的宽度(不用)
    clientLeft: 元素左边框的宽度

offset系列
    offsetWidth:width + padding + border
    offsetHeight:height + padding + border
    offsetTop:距它最近的有定位属性的父级的距离,如果没有定位的父级,则到body的距离
    offsetLeft:
    offsetParent: 

scroll系列
    scrollTop:被卷去的高
    scrollLeft:被卷去的宽
    
    scrollWidth: 获取元素实际内容宽(不用)
    scrollHeight: 获取元素实际内容高

5、懒加载

减少了加载时的线程数量,使可视区域内的图片也能够快速加载,优化了用户体验。

减少了同一时间发向服务器的请求数,服务器压力剧减。

方法:在写网页<img>标签时并不会将图片的路径放入src属性。而是自定义一个其他的属性_src。将路径放入这个自定义的属性中。那么在加载页面时,这个图片一开始是无法加载的。而当浏览器的可视区域移动到此图片上时,将_src中的路径赋值给src属性,并开始加载。

 

喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址