JavaScript里BOM的那些事儿

其他 2020-08-06 10:36:00 阅读次数: 0

BOM：浏览器对象模型

BOM的核心就是Window对象

window是浏览器内置的一个对象，里面包含着操作浏览器的方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//特殊的特质：
			//无处不在
			//全局变量全部和window有关
//			var a = 10;
//			//用一个特殊的形式  给window添加了一个属性a 赋值为10
//			window.a=10;
//			console.log(a);
//			
//			
//			console.log(window.a);
//			
			//所有的 不带有前缀全局变量的时候，前面都可以带有window，JavaScript默认吧window.这个代码给省略了
			
//			function foo(){
//				
//			}
//			
//			window.foo();



			//伪全局变量和全局变量有啥区别
			//伪全局变量是可以删除的
			
			
			//全局变量不可以被删除
//			a = 10;
//			delete window.a;
//			
//			console.log(a);
			
			
			//this => window
			//this的指向规则就是函数的调用者
			
//			function foo(){
//				console.log(this);
//			}
//			
//			foo();


			


		</script>
	</head>
	<body>
	</body>
</html>

BOM的相关操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//这三个方法都会阻塞代码执行
			alert("hello world");
			
			//一下两个有返回值
			
			confirm("hello world");
			
			prompt("hello world");
		</script>
	</head>
	<body>
	</body>
</html>

window身上的常用子对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			console.log(location);
			
			//href：整个连接；取值；赋值
			
			console.log(location.href);
			
			//错误示范：
			//location.href = "www.baidu.com";
			
			//location.href 如果在使用的时候不添加对应的协议只会更改一级(文件名)的字符串
			
			//加上协议：
			//fill://
			//http://   https://
			
			
//			document.onclick = function(){
//				location.href = "https://www.baidu.com";
//			}



			//reload();刷新
			//reload(true);底层刷新
			
			location.reload();
			
		</script>
	</head>
	<body>
	</body>
</html>

浏览器的历史记录

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		
			
			//历史记录：前进后退的一个历史
			document.onclick = function(){
				history.go(-1);
			}
			
			back.onclick=function(){
				history.go(-1);
			}
			
			forward.onclick = function(){
				history.go(1);
			}
			
			
			//history.length  查看当前浏览器一共多少条记录
			
			
		</script>
	</head>
	<body>
		<button id="back">后退一步</button>
		<button id="forword">前进一步</button>
	</body>
</html>

window事件

扫描二维码关注公众号，回复： 11533597 查看本文章 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//1.onload => 当浏览器加载结束之后：包括图片的加载，文档资源的加载，必须全部结束之后才能执行
			//加载没有完成直接就获取了，回到
			//console.log=function (){}
			onload = function(){
				console.log(img.length,img.height);
			}
			
			
		</script>
	</head>
	<body>
		
		<img id="img" src="image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=image&step_word=&hs=2&pn=0&spn=0&di=35530&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=2104351895%2C3299575660&os=622034002%2C1393103566&simid=3152243996%2C3920695690&adpicid=0&lpn=0&ln=1828&fr=&fmq=1592813094975_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fimages6.fanpop.com%2Fimage%2Fphotos%2F40500000%2Fnewclubimage-despicable-me-minions-40532353-5038-4325.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fzi_z%26e3Buwgr5r_z%26e3Bv54AzdH3Fvs7kfAzdH3F1jfrtvwksj-4j-4tgt5gfAzdH3Ft4w2jfAzdH3F9acndncnAzdH3FptpsjAzdH3Fgjovs7kt4w2j&gsm=1&rpstart=0&rpnum=0&islist=&querylist=&force=undefined
"/>
		
	</body>
</html>

页面信息的获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #jingubang{
            height: 3000px;
        }
    </style>
</head>
<body>
    <img id="img" src="http://t8.baidu.com/it/u=1484500186,1503043093&fm=79&app=86&f=JPEG?w=1280&h=853" alt="">
    <div id="jingubang"></div>
    <script>
        // scrollTop 
        // 1. 浏览器窗口;
        // 2. 文档;

        // 页面卷动的时候监测一下 scrollTop 的值;
        window.onscroll = function(){
            // 打印scrollTop;
            // 获取scrollTop 的方式 ;

            // document.body; => 获取body元素;
            // document.documentElement => 获取html元素;
            // console.log(document.body,document.documentElement);

            // 对于失败的获取 => scrollTop 会取值为 0 ; 
            // 对于成功的获取 => scrollTop 会为非0;

            // document.body || document.documentElement
            // 0 => false || document.documentElement 
            // 非0 => true || document.documentElement;
            
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            console.log(scrollTop);
            
        }

    </script>
</body>
</html>

吸顶菜单效果实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .top{
            height: 80px;
            background: #ddd;
        }
        .banner{
            margin: 10px auto;
            height: 400px;
            width: 1130px;
            background: yellowgreen;
        }
        .nav{
            height: 100px;
            background: #f99;
        }
        .nav-back{
            position: relative;
            height: 100px;
            z-index: -1;
            display: none;
        }
        .content{
            height: 3000px;
            background: antiquewhite;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div class="top"></div>
    <div class="banner"></div>
    <div class="nav" id="nav"></div>
    <div class="nav-back" id="nav_back"></div>
    <div class="content">
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
    </div>
    <script>
        // 在合适的时候，改变nav 的样式，让它吸顶; 
        // 在合适的时候, 改回nav 的样式，让它还原;

        // 在合适的时候 ?  通过计算得知，这个高度是 500;
        // scrollTop;
        // var nav_top_height = 500;
        // // 当前nav的状态; normal | fixed;
        // var nav_status = "normal"; 
        // window.onscroll = function(){
        //     // 在事件之中进行监测监测是否是合适的时候;
        //     var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        //     if(scrollTop >= nav_top_height && nav_status === "normal"){
        //         console.log("让 nav 固定定位");
        //         // 改变元素的状态;
        //         nav_status ="fixed";
        //     }
        //     if(scrollTop < nav_top_height && nav_status === "fixed"){
        //         console.log("让 nav 还原");
        //         nav_status ="normal";
        //     }
        // }
        // 前提 : 我们要改变的就是元素的样式 ;
        // 更改元素样式会对页面性能造成巨大的伤害;
        // 1. 回流 ;  让页面重新排列;
        // 2. 重绘 ;  让某个元素宽高背景色发生改变;

        // var nav_top_height = 500;
        // // 当前nav的状态; normal | fixed;
        // var nav_status = "normal"; 
        // window.onscroll = function(){
        //     // 在事件之中进行监测监测是否是合适的时候;
        //     var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        //     if(scrollTop >= nav_top_height && nav_status === "normal"){
        //         // console.log("让 nav 固定定位");
        //         // 改变元素的状态;
        //         nav_status = "fixed";
        //     }
        //     if(scrollTop < nav_top_height && nav_status === "fixed"){
        //         // console.log("让 nav 还原");
        //         nav_status = "normal";
        //     }
        // }

        // 改变元素样式;
        var nav_top_height = 500;
        // 当前nav的状态; normal | fixed;
        var nav_status = "normal"; 
        window.onscroll = function(){
            // 在事件之中进行监测监测是否是合适的时候;
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            if(scrollTop >= nav_top_height && nav_status === "normal"){
                // console.log("让 nav 固定定位");
                // 改变元素的状态;
                nav_status = "fixed";
                nav.style.cssText = "position:fixed;width:100%;top:0";
                // 让占位元素显示出来;
                nav_back.style.cssText = "display:block";
            }
            if(scrollTop < nav_top_height && nav_status === "fixed"){
                // console.log("让 nav 还原");
                nav_status = "normal";
                nav.style.cssText = "";
                // 隐藏占位元素;
                nav_back.style.cssText = "display:none";
            }
        }
 
    </script>
</body>
</html>

回到顶部功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .top{
            height: 80px;
            background: #ddd;
        }
        .banner{
            margin: 10px auto;
            height: 400px;
            width: 1130px;
            background: yellowgreen;
        }
        .nav{
            height: 100px;
            background: #f99;
        }
        .nav-back{
            position: relative;
            height: 100px;
            z-index: -1;
            display: none;
        }
        .content{
            height: 3000px;
            background: antiquewhite;
            font-size: 40px;
        }
        #go_back{
            width: 40px;
            padding: 5px;
            height: 100px;
            position: fixed;
            right: 5%;
            bottom: 5%;
        }
    </style>
</head>
<body>
    <div class="top"></div>
    <div class="banner"></div>
    <div class="nav" id="nav"></div>
    <div class="nav-back" id="nav_back"></div>
    <div class="content">
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
    </div>
    <button id="go_back">回到顶部</button>
    <script>
       // scrollTo; 这个API是属于浏览的规范的;
       // 推荐使用;
       // scrollTo(x,y)
       //    go_back.onclick = function(){
       //         scrollTo(0,0);
       //    }
       // scrollTo( { left : , top : , beavhiver})
        // go_back.onclick = function(){
        //        scrollTo({
        //            top : 0,
        //            // 运动的形式;
        //            // behavior : "smooth"
        //        });
        // }

        // go_back.onclick = function(){
        //     document.body.scrollTop = 0;
        //     document.documentElement.scrollTop = 0;
        // }
       
    </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/tony_yang6/article/details/106901837
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
返回指定时间格式
fopen函数中的mode参数
Java 单例模式探讨
Flex remoteobject工作原理探讨
寻找mplayer的便捷安装方法
30天了解30种技术系列---(26)MySQL自动化运维工具Inception
关于Jboss/Tomcat/Jetty的JNDI定义123
程序减肥，strip，eu-strip 及其符号表
AsyncTask、View.post(Runnable)、ViewTreeObserver三种方式总结frame animation自动启动
Json和Bean的互相转换
每日归档
更多
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022