首页 > 编程语言> 文章详细

JavaScript基础学习（四）BOM篇

2022-01-22 19:02:25 阅读：116 来源： 互联网

标签：function URL JavaScript 学习 window BOM var document location

一、BOM基本概念

BOM是浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。

BOM是JS访问浏览器窗口的一个接口

他是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和对象

二、window对象的常见事件

1.窗口加载事件

1.1 window.onload

window.onload是窗口加载事件，当文档内容全部加载完毕后才会触发该事件

<body>
    <script>
        window.addEventListener('load',function(){
            var btn = document.querySelector('button');
            btn.addEventListener('click',function(){
                alert('click');
            })
        })
    </script>
    <button>点击</button>
</body>

使用窗口加载事件可以将js放在任意位置，因为他是在整个页面加载完后才会执行的。

1.2 DOMContentLoaded

DOMContentLoaded会在全部dom加载完后（不包括图片 css等）立马执行，而window.onload会等DOM内的所有元素加载完后再执行，DOMContentLoaded一般用在图片较多的地方，可以更快的进行交互

<script>
        window.addEventListener('load',function(){
            var btn = document.querySelector('button');
            btn.addEventListener('click',function(){
                alert('click');
            })
        })

        document.addEventListener('DOMContentLoaded',function(){
            alert('DOMcontentload');
        })
    </script>

2.调整窗口大小事件

window.onresize = function(){}

window.addEventListener('resize',function(){});

通过window.innerWidth可以获取当前屏幕的宽度，height可以获取高度

<script>
        window.onresize = function(){
            // console.log('change');
            console.log(window.innerHeight);
            console.log(window.innerWidth);
        }
    </script>

3.定时器

3.1 setTimeout()

window.setTimeout(调用函数,[延迟毫秒数])；(window在使用中可以省略)

<script>
        var timer1 = setTimeout(function(){
            alert('time is up');
        },2000);
        var timer2 = setTimeout(function(){
            alert('time is up');
        },5000);
</script>

停止计时器：window.cleartimeout(timerID)，通过点击button来停止timer2的倒计时。

<body>
    <button>button</button>
    <script>
        var timer1 = setTimeout(function(){
            alert('time is up');
        },2000);
        var timer2 = setTimeout(function(){
            alert('time is up');
        },5000);
        var btn = document.querySelector('button');
        btn.addEventListener('click',function(){
            clearTimeout(timer2);
        })
    </script>
</body>

3.2 setInterval()

setInterval(function(){},间隔毫秒); 每隔延迟时间重复调用

<script>
        var timer3 = setInterval(function(){
            alert('repeat')
        },3000);
</script>

停止计时器 clearInterval(timerID)用法和setTimeout类似。

3.3倒计时效果（案例）

效果图

（只放了js的代码）

<body>
    <div>
        <span class="hour"></span>
        <span class="minute"></span>
        <span class="second"></span>
    </div>
    <script>
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        var inputTime = +new Date('2022-1-20 18:00:00');//设定倒计时最终的事件
        countDown();//先调用一次
        setInterval(countDown,1000);
        function countDown(){
            var nowTime = +new Date();//当前时间总毫秒数
            var times = (inputTime - nowTime) / 1000;//time是剩余时间总的秒数
            //小时
            var h = parseInt(times/60/60%24);
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h;
            // 分钟
            var m = parseInt(times/60%60);
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            // 秒
            var s = parseInt(times%60);
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }
    </script>
</body>

三、js的同步和异步

js语言是单线程的，同一时间只能做一件事情

而通过同步和异步可以达到同时执行多个任务的效果，js的异步是通过回调函数执行的

所有同步任务放在主线程上形成一个执行栈，

JS的执行机制：先执行执行栈中的同步任务，将同步任务中的异步任务放入任务队列中，一旦执行栈中所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，将异步任务放入执行栈中开始执行

四、location对象

window 对象给我们提供了一个 location 属任用于获取或设置窗体的URL，并且可以用于解析 URL。因为这个属性返回的是-一个对象，所以我们将这个属性也称为location对象。

4.1URL

统一资源定位符 (Uniform Resource Locator, URL) 是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
URL的一般语法格式为：
protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name andysage-18#link

4.2location对象的属性

4.2.1 location.href

<body>
    <button>click</button>
    <script>
        var btn = document.querySelector('button');
        btn.onclick = function(){
            location.href = 'http://www.baidu.com';
        }
    </script>
</body

4.2.2获取URL参数数据

用于数据在不同页面下的传输

//index.html
<body>
    <div></div>
    <script>
        var params = location.search.substr(1);
        var arr = params.split('=');
        var div = document.querySelector('div');
        div.innerHTML = arr[1] +'balabala';
    </script>
</body>

//login.html
<body>
    <form action="index.html">
        用户名: <input type="text" name="uname">
        <input type="submit" value="登录">
    </form>
</body>

使用location.assign('http://www.baidu.com')也可以直接实现页面跳转，并且可以使用后退键

使用location.replace('URL')直接替换当前页面不能后退页面

使用location.reload(false||true)重新加载页面

五、navigator对象

navigator包含有关浏览器的信息、使用移动端或者电脑端、使用的浏览器等信息

六、history对象

通过history对象可以与浏览器历史记录进行交互，包括用户在浏览器窗口中访问过的URL

window.histiry.back()

标签：function,URL,JavaScript,学习,window,BOM,var,document,location
来源： https://blog.csdn.net/Jenny_Ghost/article/details/122603198

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9