JS BOM 基础

目录

页面加载事件

  1. load

    页面所有元素加载完毕才执行

    window.addEventListener('load', function () {
	var btn = document.querySelector('button');
    btn.onclick = function () {
		alert('1');
	}
})

  2. DOMContentLoaded

    DOM元素加载完毕执行，不包含图片 falsh css 等 加载速度比 load 快

    window.addEventListener('DOMContentLoaded', function () {
	alert('3');
})

调整窗口大小

  1. resize

    页面的大小发生变化就会触发

    window.addEventListener('resize', function () {
	// window.innerWidth 浏览器页面的宽 window.innerHeight 浏览器页面的高
	console.log('宽:' + window.innerWidth, '高:' + window.innerHeight);
	if (window.innerWidth <= 800) {
		div.style.display = 'none';
	} else {
		div.style.display = 'block'
	}
})

定时器

  1. setTimeou

    语法规范：window.setTimeout(调用函数，延时时间);

    此处 window 可省略 延时时间可省略 省略默认为 0 默认单位毫秒

    setTimeout(function(e){
    console.log(e);
    alert('倒计时已完成');
},2000)

    这个调用函数可以写函数也可以写函数名

    setTimeout(djs, 2000);
        function djs() {
            alert('倒计时已完成');
        }

    回调函数：上一件事情干完再回过头调用函数

    例：setTimeout(调用函数，延迟时间) 等延迟时间完了再调用‘调用函数’

    setTimeout(djs,2000) 2000 毫秒过后 调用 djs

  2. 清除setTimeou

    <script>
    var btn = document.querySelector('button');
    var timer = setTimeout(function() {
        alert('三秒倒计时已结束');
    },3000)
    btn.addEventListener('click', function(){
        // clearTimeout 清除定时器
        clearTimeout(timer);
        alert('倒计时已暂停')
    })
</script>

  3. setInterval

    每隔这个延时时间就调用一次调用函数

    var time = 1;
        setInterval(function() {console.log(time++);},1000)

  4. 清除setInterval

    stop.addEventListener('click', function () {
    console.log('暂停计时');
    clearInterval(timer);
})

location

  1. href

    location 位置 href 超链接 location.href 跳转至超链接的位置

    location.href = 'http://127.0.0.1:5500/js/BOM/08two.html';

  2. search

    获取 URL 参数 location.search 返回参数

    // 第一个网页
<form action="09two.html">
        用户名：<input type="text" name="usname"> <input type="submit" value="登录">
</form>
// 第二个网页
<script>
    var div = document.querySelector('div');
    // 获取 URL 参数    location.search 返回参数
    console.log(location.search);   // ?usname=a
    // 去除 ？  substr(起始位置，截取字符个数)
    var params = location.search.substr(1);
    console.log(params);    // usname=a
    // 分隔成数组 split('=')
    var arr = params.split('=');
    console.log(arr);   // ['usname', 'a']
    div.innerHTML = arr[1] + ' 欢迎登录';    
</script>

  3. 常见方法

    <script>
    var btn = document.querySelector('button');
    btn.addEventListener('click', function(){
        // 记录浏览历史，可以实现后退功能
        // location.assign('http://www.baidu.com');

        // 替换页面不能后退
        // location.replace('http://www.baidu.com');

        // 重新加载页面，相当于刷新（f5）参数为 true 强制刷新（ctrl+f5）
        location.reload(true);
    })
</script>

history

  1. 前进 forward() go(1) 后退 back() go(-1) 刷新 go(0)

    // 第一个网页
<body>
    <a href="http://127.0.0.1:5500/js/BOM/11two.html">点击我去下一页</a>
    <button class="forward">前进</button>
    <button class="f5">刷新</button>
    <script>
        var btn = document.querySelector('.forward');
        btn.addEventListener('click', function(){
            history.forward();
        })
        var btn2 = document.querySelector('.f5');
        btn2.addEventListener('click',function(){
            // -1 后退 0 刷新 1 前进
            history.go(0);
        })
    </script>
</body>
// 第二个网页
<body>
    <a href="http://127.0.0.1:5500/js/BOM/11history%E5%AF%B9%E8%B1%A1%E6%96%B9%E6%B3%95.html">点击我去上一页</a>
    <button>后退</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            history.back();
        })
    </script>
</body>
posted @   xiaoyaee  阅读(23)  评论(0)  编辑  收藏  举报
相关博文：
·  JS DOM 基础
·  jQuery 基础
·  js学习-BOM
·  JavaScript - BOM
·  JS-API-BOM
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
点击右上角即可分享
微信分享提示
SQL AI 助手