学习总结

BOM知识点总结

window对象

操作当前窗口

完整窗口大小

window.outerWidth浏览器窗口宽度

window.outerHeight浏览器窗口高度

仅用于显示网页区域的大小

window.innerWidth网页宽度

window.innerHeight网页高度

响应窗口大小改变事件

window.onresize

打开窗口

open()

关闭窗口

close()

screen

注意，screen返回的是浏览器的宽高度

screen.availHeight与screen.availWidth返回的高度和宽度不包含windows任务栏

history

history.go() history.back history.forward加载history数组中的下一个url

location

location专门保存当前浏览器正在打开的url的对象，并提供了各种跳转页面的方法。

location.href 获取当前浏览器正在打开的完整的url

location.protocol 获取协议部分

location.host 获得主机+端口

location.hostname 获得主机名

location.port 获得端口号

location.pathname 获得相对路径

location.hash 获取#及其之后的锚点地址

location.srarch 获得？及其之后的查询字符串参数列表

提供了页面跳转的方法

在当前窗口打开，可后退：

location.assign("新url")

location.href="新url"

location="新url"

在当前窗口打开，禁止后退

location.replace("新url")

刷新：普通，优先从浏览器缓存中获取文件

location=url history=go(0) location.reload(/false/)

强制刷新 location.reload(true)

navigator

navigator.plugins:判断浏览器是否安装了插件

navigator.userAgent:浏览器的名称、版本号、内核

navigator.cookieEnabled判断浏览器是否启用cookie

event

注意：ie标准只有两个阶段，目标触发、冒泡执行，没有事件捕获

element.attachEvent(event,function)

事件冒泡、事件委托

阻止取消默认行为：e.preventDefault()

获取鼠标位置坐标：

相对于屏幕左上角 e.screenX/screenY

相对于浏览器中网页的左上角 e.clientX/e.clientY

相对于触发事件元素的左上角 e.offsetX/offsetY

页面滚动

window.scrollTo() 页面滚动到哪个位置

window.scrollBy() 页面相对当前位置再滚动多少

鼠标滚轮事件

onmousewhell事件(safari/chrome)

e.whellDelta 滚动的信息，正为向上，负为向下 不同浏览器值不同

e.deltaY e.deltaX

DOMMouseScroll事件(FireFox)

e.detail 正数为向下，负数为向上 ，每次滚动为3的倍数

ie 11以下使用attachEvent 11及以上通过添加meta标签的方式测试attachEvent

兼容性写法

        var scrollFn=function(e){
            e=e||window.event;//判断ie、chrome
            if(e.wheelDelta){
                if(e.wheelDelta>0){
                    console.log('上滚')
                }
                if(e.wheelDalta<0){
                    console.log('下滚')
                }
                //FireFox浏览器滚轮事件
            }else if(e.detail){
                if(e.detail>0){
                    console.log('下滚')
                }
                if(e.detail<0){
                    console.log('上滚')
                }
            }
        }
        //IE、Opera
        if(document.attachEvent){
            document.attachEvent('onmousewhell',scrollFn);
        }
        //FireFox使用addeventListener添加
        if(document.addEventListener){
            document.addEventListener('DOMMouseScroll',scrollFn,false)
        }
        //Safari与Chrome属于同一类型
        window.onmousewheel=document.onmousewheel=scrollFn;

学习心得

知识，是学不完的，当自己知道的更多就会发现更广阔的天地。但是知识是可以不断的增加的，努力去积累，不放弃，就算学不完，但是自己总能够积累更多。