js window 定时器 event

<div id="inner"></div>
<script>
    var inner=document.querySelector('#inner')
    inner.innerHTML='<a href="#">百度</a>'
    for(var i=0;i<100;i++){
        inner.innerHTML+='<a href="#">百度</a>'
    }
</script>

2.使用数组来创建元素

<script>
    var arr=[];
    for(var i=0;i<100;i++){
        arr.push('<a href="#">百度</a>')
    }
    inner.innerHTML=arr.join('')
</script>

3.document.createELement 创建元素

<div id="create"></div>
<script>
    var create=document.querySelector('#create')
    for(var i=0;i<100;i++){
        var a=document.createElement('a');
        create.append(a)
    }
</script>

02 BOM概述

js三大核心 : js基础语法 DOM BOM

BOM(Brower Object Model)

js给我们内置了一些能够操作浏览器本身相关的一些对象

BOM包含DOM

DOM 最顶级的对象: document

BOM 最顶级的对象 : window

03 window

alert('123')

弹窗方法都是window调用的

所有使用window调用的属性和方法都可以省略

window.open 打开新窗口的方法 (了解)

04定时器

定时器分为一次性定时器和永久定时器

1. 永久定时器:

var timer=setInterval(function(){

console.log('111')

})

2.一次性定时器:

var timer=setTimeout(function(){

console.log('111')

})

停止定时器:

停止永久定时器 : clearInterval(clearInterval方法的返回值)

停止一次性定时器 : clearTimeout(setTimeout方法的返回值)

05 location对象的使用

location对象是封装和地址相关的一些数据

console.log(location);

console.log("地址栏全信息:",location.href)

console.log("协议:",location.protocol);

console.log("主机:",location.hostname);

console.log("主机+端口:",location.host);

console.log("地址路径部分:",location.pathname);

console.log("地址的#号锚点部分:",location.hash);

console.log("地址的参数部分:",location.search);

location对象三个关于页面跳转的功能

location.href='地址'

location.assign('地址')

location.replace('地址')

注意:

href 和assing功能一模一样

跳转后把页面存为历史记录跳转过去之后可以回退回来

replace跳转会把当前页面销毁跳转到新页面去无法回退

06 history对象的使用

history对象专门操作历史记录相关的数据

history.go(number)

go(1) 前进一个记录

go(-1) 后退一个记录

go(0) 刷新和 location.reload( ) 效果一样

07 js特效

js中dom节点和动画相关的一些属性放到一起抽离出来做成js动画的效果就是js特效

js特效相关的数据大致分为:

offset方向

scroll方向

client方向

08 offset系列相关属性

offset方向的五大属性:

1.offsetWidth offsetHeight 返回的结果是number类型

获取的是盒子自身的宽高+padding+border

其实获取的就是最终渲染的盒子的大小不包含margin

2.offsetLeft offsetTop

获取当前盒子距离最近的有定位的父盒子左上角的距离

如果父盒子没有定位则距离body的距离

以上四个属性都是只读的无法复制只能获取返回的是数字类型所以比较好用

3. offsetParent

获取最近的有定位的父盒子

如果父盒子没有定位则返回body

09 scroll 相关属性

scroll相关属性:

1.scrollWidth scrollHeight

内容不超出盒子宽高的时候返回的是盒子自身的高度+padding

如果内容超出了盒子的宽高则返回的是内容的宽高

2.scrollLeft scrollTop

html对象调用返回的是可滚动的浏览器页面被卷曲的头部和左侧的距离

以上两个属性不但能获取还能设置浏览器卷曲多少

特殊元素的获取方式:

html对象的获取: document.documentELement

body对象的获取: document.body

head对象的获取: document.head

title对象的获取: document.title

页面滚动事件:

window.οnscrοll=function(){ }

或者

window.addEventListener('scroll', function(){})

只要页面滚动1px 就会触发一次这个事件

10 client 相关属性

1.clientWidth/clientHeight

是html对象调用获取浏览器可视区域宽度

可以根据浏览器的可视区域的宽高实现页面响应式布局

2.clientLeft/clientTop(获取盒子左边框和上边框的宽度没用)

3.获取浏览器可视化区域大小的其他方式(推荐使用)

window.innerWidth / window.innerHeight

11 window 相关的事件

window.onscorll 页面滚动事件

window.onload 页面加载完毕事件

所有页面的dom节点加载完毕页面所有的图片加载完毕后才去执行的事件

window.onresize 页面大小改变事件

12 event 相关的属性

鼠标到body的距离(pageX/Y) e.pageX e.pageY

鼠标到屏幕的距离(screenX/Y) e.screenX e.screenY

鼠标到可视区域的距离(clientX/Y) e.clientX e.clientY