一、昨日内容回顾
1.DOM节点获取：三种方式
2.属性的设置：
getAttirbute()
setAttribute()
.点设置，【】设置
3.节点的创建：
var oDiv = createElement('div')
设置节点属性、内容（innerText,innerHTML,value）、添加节点至html
节点的添加：
父节点.appendChild(子节点)
父节点.insertBefore(新的子节点,参考的子节点)
如果参考节点为null,相当于appendChild方法
节点的删除：
父节点.removeChild(子节点)
4.定时器（一定要清除定时器）：
var a = setTimeOut(fn,5000);
var b = setInterVal(fn,5000);
clearTimeOut(a);
clearInterVal(a);
二、今日内容总结
1.js中对象的创建方式（js中的面向对象是伪面向对象）
1.字面量方式创建 简单粗暴
var p = {
name:'鞠疼',
age:18,
fav:function(){}
}
2.内置构造函数
var p = new Object()
3.工厂模式
function person(){
var p = new Object();
...
return p
};
var p1 = person();
var p2 = person();
4.构造函数
闭包函数：解决全局污染的问题
function Person(){
this.name = name;
this.age = age;
this.fav = fn;
this.fav1 = fn2;
};
function Ooo(){
this.fav = fn;
this.fav1 = fn2;
}
var p1 = new Person();
p1 instanceOf Object ===true
p1 instanceOf Person ===true
p1 instanceOf fruite ===false
5.原型链继承方式创建 ****
function Student() {
this.name = 'easy';
this.age = 20;
}
Student.prototype.alertName = function(){
alert(this.name);
};
Student.prototype.alertName2 = function(){
alert(this.age);
};
var stu1 = new Student();
//var stu2 = new Student();
window.aaa = stu1;
stu1.alertName(); //easy
stu2.alertName(); //easy
alert(stu1.alertName == stu2.alertName); //true 二者共享同一函数
2. 模块抛出
抛出模块
在js中模块抛出 有两种
//前端也有模块，前端的模块抛出的方案不同
//同步和异步
//现在学到的模块技术是不完善 我们是希望我们的是异步方案
# js模块抛出分两种（对象和构造函数）
1.必须使用闭包函数，将抛出的内容（对象）挂在到window
//1.js (function(window){ function Student() { this.name = 'alex'; this.age = 20; } Student.prototype.alertName = function(){ alert(this.name); }; var stu1 = new Student(); window.stu1 = stu1; })(window) <script src="./1.js"></script> <script src="./2.js"></script> <script> //使用对象调用方法，调属性 stu1.alertName(); </script>
2.必须使用闭包函数，将抛出的内容（构造函数）挂在到window
//2.js (function(window){ function Student() { this.name = 'alex'; this.age = 20; } Student.prototype.alertName = function(){ alert(this.name); }; var stu2 = Student; window.stu2 = stu2; })(window) <script src="./1.js"></script> <script src="./2.js"></script> <script> //构造函数使用关键字new来创建对象，然后才可以调用属性和方法 var s = new stu2(); s.alertName(); </script> 时刻看源码
3. BOM
1） window.open()、window.close()
2) window.location.XXX
herf :跳转
hash：返回url中#后面的内容，包含#
host： 主机名+端口
hostname: 主机名
pathname： url中的路径部分
protocol： 协议 一般是http、https
search： 查询字符串？后边的用心
reload() :全局刷新页面
3） window.navigator.userAgent .platform
4) history.forward,back,go(1),go(-1)
4.位置信息：
client系列
1.获取屏幕和内容可视区域：
console.log(oBox.clientTop); # 内容到上边框距离，就是上边框宽度
console.log(oBox.clientLeft);# 内容到左边框距离，就是左边框宽度
console.log(oBox.clientWidth); # 内容宽度+左右padding
console.log(oBox.clientHeight)； # 内容宽度+上下padding
onresize：
// 窗口大小发生变化时，会调用此方法
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
offset系列
console.log(box.offsetTop)
console.log(box.offsetLeft)
console.log(box.offsetWidth)
console.log(box.offsetHeight)
offsetWidth占位宽 内容+padding+border
offsetHeight占位高
* offsetTop: 如果盒子没有设置定位 到body的顶部的距离,如果盒子设置定位，那么是以父辈为基准的top值
* offsetLeft： 如果盒子没有设置定位 到body的左部的距离，如果盒子设置定位，那么是以父辈为基准的left值
scroll系列
//实施监听滚动事件
window.onscroll = function(){
// console.log(1111)
// console.log('上'+document.documentElement.scrollTop)
// console.log('左'+document.documentElement.scrollLeft)
// console.log('宽'+document.documentElement.scrollWidth)
// console.log('高'+document.documentElement.scrollHeight)
}
onresize()
onscroll()
三、预习和扩展
1.同源策略
源（origin）就是协议、域名和端口号。
同源策源：
http://127.0.0.1:8080/index.html
http://localhost:8080/index2.html
跨域问题：了解
前端跨域：
script jsonp(get请求的跨域)废弃
后端跨域
cors跨域（重点）
第三方模块
扩展链接：https://www.cnblogs.com/rockmadman/p/6836834.html
2.两个页面之间传数据
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body> <button id="btn">跳转</button> <script type="text/javascript"> oBtn = document.getElementById("btn"); oBtn.onclick=function () { var name ='alex'; window.location.href='http://localhost:63342/py笔记/day46/test1.html?usename='+ name; } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>我是谁！！！！！！！！！！</h1> <script type="text/javascript"> var data =window.location.search document.write(data) </script> </body> </html>
3.通过jsonp获取跨域数据：jsonp.html获取main.js中的数据。
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body> <button id="btn">跳转</button> <script type="text/javascript"> oBtn = document.getElementById('btn'); function addScriptTag(src){ var script = document.createElement('script'); script.setAttribute("type","text/javascript"); script.src = src; document.body.appendChild(script); } window.onload = function () { addScriptTag('http://localhost:63342/py笔记/day46/main.js?callback=foo'); } //window.onload是为了让页面加载完成后再执行 function foo(data) { console.log(data.name+"欢迎您"); }; </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>我是谁！！！！！！！！！！</h1> <script type="text/javascript"> var data =window.location.search document.write(data) </script> </body> </html>
4.背景图颜色渐变：linear-gradient
backgroud-img:linear-gradient(to bottom,red,blue)
https://www.w3cplus.com/css3/do-you-really-understand-css-linear-gradients.html
5.backgroud-size:
1、定义：
background-size 用来调整背景图像的尺寸大小。
2、语法：
以下为引用内容：
background-size : contain | cover | 100px 100px | 50% 100%;
3、参数：
background-size：contain; // 缩小图片来适应元素的尺寸（保持像素的长宽比）；
background-size ：cover; // 扩展图片来填满元素（保持像素的长宽比）；
background-size ：100px 100px; // 调整图片到指定大小；
background-size ：50% 100%; // 调整图片到指定大小，百分比相对于包含元素的尺寸。