day45 js
内容回顾
javascript:
1.ECMAScript 5.0
2.DOM
入口函数
问题1: DOM加载顺序
优先级: 先是DOM, 再使图片资源加载
如何解决: 用window.onload()
DOM操作的三步走:
获取事件源
绑定事件 onmouseover对应onmouseout: 鼠标穿过父元素和子元素都会执行事件驱动程序
onmouseenter对应onmouseleave: 只穿过父元素
事件驱动程序
DOM操作
对标签属性的操作
对标签样式属性的操作
对值的操作
对DOM的增删改查
es6中的一些功能
模板字符串``, 插入变量用${变量}
let 来声明变量: 没有变量提升, 是局部的作用域
匿名函数的执行(叫做函数的自执行, 在js中叫做闭包, 和python中的闭包不是一个事)
解决了全局污染的问题: 什么是全局污染?
(function(){})()
<script>
(function (window) {
var a = 111;
window.$1 = a;
})(window);
(function (window) {
var a = 222;
window.$2 = a;
})(window);
//如果上面的两个变量a是两个js文件中的两个不同的功能, 我想同时使用这两个不同功能的a,就会出现压盖现象(就是全局污染)
//如何解决, 放入自执行函数中, 把a, 分别赋值给window的两个不同的值即可
console.log(window.$1);
console.log(window.$2);
</script>
3.BOM
location对象
window.location对象中有很多方法和属性
属性:
hash: url中'#asdf'这一堆
host:主机(主机名+端口号)
hostname: 主机名
href:url完成地址 : https://www.baidu.com:80/home/a.jpg?srt=info&asd
origin:原始地址 : https://www.baidu.com:80
pathname:路径地址(也叫路由地址) : /home/a.jpg
search: : ?srt=info&asd
port:端口
protocol:协议, https: 是把用户名密码打包在传输, s = ssl
方法:
reload(): 就是网页上的刷新
toString()
一.client, offset, scroll系列
1.client
clientTop 内容区域到边框顶部的距离, 即边框border的高度
clientLeft 内容区域到边框左部的距离,即边框border的宽度
clientWidth 内容区域 + 左右padding, 不包含border, 即可视宽度
clientHeight 内容区域 + 上下padding, 不包含border, 即可视高度
<!doctype html>
<html lang="en">
<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>
</html>
屏幕的可视区域. html中可被用户看到的宽高
<script>
//入口函数: 窗口加载会执行此函数
window.onload = function () {
//获取html标签
console.log(document.documentElement.clientWidth); //屏幕的可视区域: html区域中可被用户看到的那部分区域
console.log(document.documentElement.clientHeight);
window.onresize = function () {
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
}
}
</script>
2.offset
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<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 如果盒子有设置定位, 偏移量是以父盒子为参考点, 如果没有设置定位, 是到body的距离
console.log(objBox.offsetLeft); //30 如果盒子有设置定位, 偏移量是以父盒子为参考点, 如果没有设置定位, 是到body的距离
console.log(objBox.offsetWidth); //210 内容+padding+border
console.log(objBox.offsetHeight); //210 内容+padding+border
}
</script>
</body>
</html>
3.scroll: 滚动
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<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>
<div id="scroll" style="width: 200px;height: 200px;border: 1px solid red; overflow: auto;padding: 10px;margin: 5px 0 0 0;">
<p>
八戒爱谁谁八戒爱谁谁八戒爱谁谁八戒爱谁谁八戒爱谁谁八戒爱谁谁八戒爱谁谁八戒爱谁谁八戒爱谁谁八戒爱谁谁八戒爱谁谁八戒爱谁谁八戒爱谁谁八戒爱谁谁八戒爱谁谁八戒爱谁谁八戒爱谁谁八戒爱谁谁八戒爱谁谁八戒爱谁谁八戒爱谁谁八戒爱谁谁八戒爱谁谁八戒爱谁谁八戒爱谁谁八戒爱谁谁八戒爱谁谁八戒爱谁谁八戒爱谁谁八戒爱谁谁八戒爱谁谁
</p>
</div>
<script>
window.onload = function () {
//实时监听滚动事件
window.onscroll = function () {
console.log(document.documentElement.scrollTop); //搞个名称: 上面页面卷起的高度
console.log(document.documentElement.scrollLeft); //搞个名称: 左面页面卷起的高度
console.log(document.documentElement.scrollWidth);
console.log(document.documentElement.scrollHeight);
};
//除了页面上的滚动, 也可用做其他滚动的监听, 如下
var objScroll = document.getElementById('scroll');
objScroll.onscroll = function () {
console.log(objScroll.scrollTop);
console.log(objScroll.scrollLeft);
console.log(objScroll.scrollWidth); //包括内容+ padding + border
console.log(objScroll.scrollHeight); //包括内容+ padding + border
}
}
</script>
</body>
</html>
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>