day04 js 匿名函数 BOM中的操作 client offset scroll
一.匿名函数
1.匿名函数的自执行
1.1.在js中叫做闭包, 和python中的闭包不是一个事
1.2.为什么要用这个? 解决了全局污染的问题
1.3.什么是全局污染? 如果两个相同名字的变量a是两个js文件中的两个不同的功能, 我想同时使用这两个不同功能的a,就会出现压盖现象(就是全局污染)
1.4.语法: (function(){ ... })()
(function (window) {
var a = 111;
window.$1 = a;
})(window);
(function (window) {
var a = 222;
window.$2 = a;
})(window);
console.log(window.$1);
console.log(window.$2);
1.5.有个问题: 全局污染貌似不是函数的自执行解决的,而是相同名字不同功能的a重新赋值给了其他变量解决的
2.单例模式
单例模式: 当多个文件导入同一个模块时, 这个模块只会在内存中创建一次, 多个文件里的这个模块使用的是同一个内存地址: 如python中的导入模块
非单例模式: 如js中的new
二. BOM中的操作
1.client 客户端:
1.1.内容的可视区域:盒子里的内容区域
objDiv = document.getElementById('box'); //获取的是盒子(标签)的对象
objDiv.clientTop 边框的高度 //border-top
objDiv.clientLeft 边框的宽度 //border-left
objDiv.clientWidth 边框里的宽度,不包含边框
objDiv.clientHeight 边框里的高度,不包含边框
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
height: 200px;
width: 200px;
border: 1px solid green;
padding: 10px;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var objDiv = document.getElementById('box');
console.log(objDiv.clientTop); //1
console.log(objDiv.clientLeft); //1
console.log(objDiv.clientWidth); //220
console.log(objDiv.clientHeight); //220
</script>
</body>
1.2.屏幕的可视区域: 浏览器中DOM的可视部分,即html展示的区域
document.documentElement.clientWidth; //获取的是浏览器对应的html可视的宽度
document.documentElement.clientHeight; //获取的是浏览器对用的html可视的高度
检测屏幕可视区域变化的函数:
window.onresize = function () { ... }
window.onload = function () {
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
window.onresize = function () {
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
}
}
2.offset 偏移量
var objBox = document.getElementById('box');
objBox.offsetTop; 有定位时,偏移量的值: 参考点取决于父盒子是否有定位: 父有定位以父为参考,否则以body为参考点 //top
objBox.offsetLeft; 有定位时,偏移量的值: 参考点取决于父盒子是否有定位: 父有定位以父为参考,否则以body为参考点 //left
objBox.offsetWidth; 盒模型的宽
objBox.offsetHeight; 盒模型的高
<head>
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body style="height: 2000px;">
<div>
<div id="wrap" style="width: 300px; height: 300px; ">
<div id="box" style="width: 200px;height: 200px;border: 5px solid red;position: absolute;top: 50px;left: 30px;">
</div>
</div>
</div>
<script>
window.onload = function () {
var objBox = document.getElementById('box');
console.log(objBox.offsetTop); //50
console.log(objBox.offsetLeft); //30
console.log(objBox.offsetWidth); //210 内容+padding+border
console.log(objBox.offsetHeight); //210 内容+padding+border
}
</script>
</body>
3.scroll: 滚动
3.1.屏幕的滚动
document.documentElement.scrollTop; 屏幕向上滚动的距离
document.documentElement.scrollLeft; 屏幕向左滚动的距离
document.documentElement.scrollWidth; DOM的宽,即html的宽
document.documentElement.scrollHeight; DOM的高,即html的高
检测屏幕可视区域滚动的函数:
window.onscroll = function () { ... }
<head>
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body style="width: 2000px; height: 2000px;">
<div style="height: 200px; "></div>
<div style="height: 200px; "></div>
<div style="height: 200px; "></div>
<div style="height: 200px; "></div>
<div style="height: 200px; "></div>
<div style="height: 200px; "></div>
<script>
window.onload = function () {
window.onscroll = function () {
console.log(document.documentElement.scrollTop); //如果只是复制这段代码到浏览器上时, 这个高度获取不到,是因为省略了 <html>
console.log(document.documentElement.scrollLeft);
console.log(document.documentElement.scrollWidth);
console.log(document.documentElement.scrollHeight);
}
};
</script>
</body>
3.2.盒子里的滚动条
var objScroll = document.getElementById('scroll'); //获取的是盒子(标签)对象
objScroll.scrollTop; 滚动条向上滚动的距离
objScroll.scrollLeft; 滚动条向左滚动的距离
objScroll.scrollWidth; 滚动源的宽度
objScroll.scrollHeight; 滚动源的高度
<head>
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="scroll" style="width: 200px;height: 200px;border: 1px solid red; overflow: auto;padding: 10px;margin: 5px 0 0 0;">
<p>
八戒爱谁谁*100,让此字段超出盒子大小,形成滚动条样式
</p>
</div>
<script>
window.onload = function () {
var objScroll = document.getElementById('scroll');
objScroll.onscroll = function () {
console.log(objScroll.scrollTop);
console.log(objScroll.scrollLeft);
console.log(objScroll.scrollWidth);
console.log(objScroll.scrollHeight);
}
}
</script>
</body>
4.scroll 和 offset 综合练习
固定搜索栏开始的时候是隐藏的, 当滚动到某一个位置时,固定搜索栏显示在顶部
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.header{
width: 100%;
height: 80px;
}
.content{
width: 100%;
height: 2000px;
}
.input{
width: 400px;
height: 60px;
position: absolute;
left: 50%;
margin-left: -200px;
top: 200px;
}
.fixTop{
width: 100%;
height: 80px;
position: fixed;
top: 0;
left: 0;
display: none; /*固定搜索栏开始的时候是隐藏的*/
z-index: 666;
}
</style>
</head>
<body>
<div class="header">
</div>
<div class="content">
<div class="input">
</div>
</div>
<div class="fixTop">
</div>
<script>
window.onload = function () {
var inputTop = document.getElementsByClassName('input')[0].offsetTop; //获取你想要的偏移量
var objFix = document.getElementsByClassName('fixTop')[0]; //获取固定搜索栏标签的对象
window.onscroll = function () { //检测屏幕滚动
var scrollTop = document.documentElement.scrollTop; //获取滚动距离
if(scrollTop >= inputTop){ //滚动距离和之前获取的偏移量比较
objFix.style.display = 'block'; //固定搜索栏显示出来
objFix.style.opacity = 0.5; //透明度: 方便测试观察而加的属性 淡入淡出:可以用定时器和透明度完成
}else{
objFix.style.display = 'none';
}
}
}
</script>
</body>
</html>