python全栈开发day46-BOM、位置信息、jQurey

一、昨日内容回顾

　　　　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>

1.js

　　　　　 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>

home.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>

test1.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>

a.com/jsono.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>

main.js

　　　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%; // 调整图片到指定大小，百分比相对于包含元素的尺寸。

background-size 用来调整背景图像的尺寸大小。