web js笔记

最新推荐文章于 2024-07-06 00:11:00 发布

lkhyyds

最新推荐文章于 2024-07-06 00:11:00 发布

阅读量100

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/lkhyyds/article/details/126881250

版权

2.BOM

2.1BOM介绍

BOM 浏览器对象模型  这里面有很多浏览器相关的方法

2.2window对象

2.2.1 window的系统对话框

alert(提示内容)
console.log()
confirm(提示信息) 带确定和取消按钮点击确定返回true 点击取消返回false
prompt(提示信息,输入框中的默认值) 点击确定返回输入框中的值点击取消返回null

2.2.2 window的open和close

window.open

语法：window.open(新的网址地址,打开方式(self,blank),设置新页面的样式)
作用：打开一个新网址

 <button>打开一个新的页面</button>
    <button>关闭当前页面</button>
    <!-- 如果是行间引入  不能省略window对象  因为它的运行环境不是一个全局作用域 -->
    <button οnclick="window.open('https://www.jd.com')">打开京东页面</button>
    <script>
        var btn = document.querySelector("button");
        //  window.open(新的网址地址,打开方式(_self,_blank),设置新页面的样式)
        btn.onclick = function () {
            // window可以省略
            window.open("https://www.baidu.com", "_blank", "width=500,height=500")
        }
       
    </script>

window.close

作用：关闭当前页面

 var btn1 = document.querySelectorAll("button")[1];
        // window.close()  关闭当前页面
        btn1.onclick = function () {
            // window可以省略
            window.close()
        }

2.2.3 ==window的事件==

window.onload

作用： window.onload 确保标签和资源都加载成功之后再加载window.onload里面的内容

 <script>
        /*如果script标签放在结构标签前面  会导致在js中拿不到标签 window.onload可以解决这个问题
            window.onload 确保标签和资源都加载成功之后再加载window.onload里面的内容
        */
        window.onload = function () {
            var oDiv = document.getElementsByTagName("div")[0];
            console.log(oDiv);// <div>123</div>  出现undefined的原因是没有找到div标签
        }

    </script>

window.onscroll

作用：当页面或者元素发生滚动时触发事件

        window.onscroll = function(){
             console.log("内容发生了改变")
        }

window.onresize

作用：当窗口的可视区域发生改变触发

        window.onresize = function(){
            console.log("尺寸发生了改变")
        }

2.3 location对象

localtion对象主要是一些网址的信息
- ==href 提供的是浏览器地址栏中的全部内容==
- hash 哈希提供是锚点和网站参数
- host 获取的浏览器地址中的域名和端口号
- hostname 获取的是浏览器地址中的域名
- origin 获取的是浏览器地址中网络协议和域名及端口号
- pathname 获取的浏览器中运行的文件地址和参数
- protocol网络协议
- port 端口号
==location对象中的方法==
- location.href = 新页面地址跳转一个新页面
- location.reload（）刷新本页面

2.4 navigator对象

console.log(navigator.userAgent);//可以获取到运行系统信息

2.5 history对象

history.forward() 前进页面
history.back() 后退一个页面
history.go()
- 1 前进
- -1 后退

==注意：前进或者后退页面一定要先形成历史关系==

2.6==BOM的三大系列属性==

2.6.1client系列

元素.clientWidth：获取元素的可视宽度 content+padding
元素.clientHeight：获取元素的可视高度
元素.clientLeft和元素.clientTop：获取元素的左或上边框宽度

2.6.2offset系列

元素.offsetWidth 获取元素的占位宽度 content+padding+border
元素.offsetHeight 获取元素的占位高度
元素.offsetLeft 可以获取元素到最近定位父元素的左侧距离如果没有最近定位父元素，则是相当于body
元素.offsetTo p可以获取元素到最近定位父元素的上侧距离如果没有最近定位父元素，则是相当于body

2.6.3scroll系列

元素.scrollWidth 可以获取到元素的内容宽度
元素.scrollHeight 可以获取到元素的内容高度
元素.scrollLeft 可以获取元素内容被卷去的宽度
元素.scrollTop 可以获取元素内容被卷去的高度
- ==注意==scrollTop和scrollLeft也可以设置具体被卷起的高度和宽度

2.6.4 页面的可视宽/占位宽/卷起的高宽

document.documentElement 根标签html
document.body body标签

==兼容问题==

document.documentElement存在兼容问题 IE6和5无法获取client系列和scroll系列的值
==页面卷起高度兼容== document.documentElement.scrollTop || document.body.scrollTop

<script>
        /* 
            document.documentElement  html根标签 
            document.body    body区域标签          
        */
        //    1.获取可视宽高   content+padding
        console.log(document.documentElement.clientWidth)  //IE6 5是无法获取值
        console.log(document.documentElement.clientHeight)

        console.log(document.body.clientWidth); // 不存在兼容问题
        console.log(document.body.clientHeight);

         // 2.获取占位宽高   content + padding + border
        console.log(document.documentElement.offsetWidth);
        console.log(document.documentElement.offsetHeight);

        // 3.卷起的高度和宽度
        window.onscroll = function () {
            // 标准浏览器和Ie8 7 document.document.scrollTop有效
            console.log(document.documentElement.scrollTop); // IE6和5无法获取
            // ie 6和5 用doucment.body.scrollTop有效
            console.log(document.body.scrollTop);

            // 兼容   ||
           var a =   document.documentElement.scrollTop || document.body.scrollTop
           console.log(a);
        }
    </script>

3.事件对象

3.1什么是事件对象

每一个事件都会拥有一个对象，这个对象用来纪律该事件的重要信息
==注意==：事件对象只能存在于事件处理函数中超过这个范围就不能使用了

3.2如何获取事件对象

标准浏览器和IE浏览器：window.event
火狐低版本浏览器：将事件处理函数中的第一个参数作为事件对象

 document.documentElement.onclick = function(eve){
            console.log(a);//如果是老版本获取浏览器 a就是事件对象
            console.log(window.event);//标准浏览器和IE低版本浏览器的语法
            var ev = window.event || eve;//兼容写法
            console.log(ev);
        }