js window 定时器 event

目录

01 创建元素的方式

02 BOM概述

03 window

04定时器

05 location对象的使用

07 js特效

08 offset系列相关属性

09 scroll 相关属性

10 client 相关属性

11 window 相关的事件

12 event 相关的属性

---

01 创建元素的方式

创建元素的三种方式:

        1.innerHTML创建元素

<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