python学习笔记_week16

作业问题：
    1.写页面觉得丑（布局） float，clear：both，margin，padding，position：left...网上找模板：HTML模板，BoostStrap
    2.背景图片 整体在body里面加，局部在标签里加
HTML
    一大堆的标签，块级、行内
CSS
    position、background、text-align、margin、padding、front-size、z-index、overflow、hover、opacity、float(clear：both)
    line-height、border、color、display
    补充：页面布局
        1.主站-
            <div class='pg-header'>
                <div style='width:980px;margin:0 auto'>
                    内容自动居中
                </div>
            </div>
            <div class='pg-header'></div>
            <div class='pg-header'></div>
        后台管理布局：
            position:fixed---永远固定在窗口的某个位置
            relative--单独无意义
            absolute--第一次定位，可以在指定位置，滚轮滚动时，不在了。
            a.左侧菜单跟随滚动条
            b.左侧以及上面不动 这种用的多
            fontawesome图标
JavaScript
    8、函数分类    普通函数：function func(){}
                匿名函数：setInterval(function(){
                                        console.log(123);}
                                        ，5000)；
                自执行函数：创建函数并且自动执行
                (function(arg){
                    console.log(arg);})(1)
    9、序列化
        JSON.stringify() 将对象转换为字符串
        JSON.parse()     将字符串转换为对象类型
    10、转义
        客户端（cookie） ==> 服务器端
        将数据经过转义后，保存在cookie中
        decodeURI( )                   URl中未转义的字符
        decodeURIComponent( )   URI组件中的未转义字符
        encodeURI( )                   URI中的转义字符
        encodeURIComponent( )   转义URI组件中的字符
        escape( )                         对字符串转义
        unescape( )                     给转义字符串解码
        URIError                         由URl的编码和解码方法抛出
抽屉点赞
import request
### 1、首先登陆任何页面，获取cookie
i1 = requests.get(url= "http://dig.chouti.com/help/service")
### 2、用户登陆，携带上一次的cookie，后台对cookie中的 gpsd 进行授权
i2 = requests.post(
    url= "http://dig.chouti.com/login",
    data= {
        'phone': "86手机号",
        'password': "密码",
        'oneMonth': ""
    },
    cookies = i1.cookies.get_dict()
)

### 3、点赞（只需要携带已经被授权的gpsd即可）
gpsd = i1.cookies.get_dict()['gpsd']
i3 = requests.post(
    url="http://dig.chouti.com/link/vote?linksId=8589523",
    cookies={'gpsd': gpsd}
)
print(i3.text)
    11、eval
        python：
            val=eval（“1+1”执行表达式）
            exec(执行代码（有逻辑性的，但没有返回值）)
        JavaScript：
            eval是python中eval和exec的综合
    12、时间
        Date类
        var d = new Date()
        d.getMinutes() 获取
        n=d.getMinutes() + 4
        d.setMinutes(n)  修改
    13、作用域
        其他语言：以代码块作为作用域
            public void Func(string v){
                if(1==1){
                    string name = 'Java';
                }
                console.writeline(name);
            }
            Func()
            //报错
        python: 以函数作为作用域
            情况一
                def func():
                    if 1==1:
                        name='alex'
                    print(name)
                func()
                //成功
            情况二
                def func():
                    if 1==1:
                        name='alex'
                    print(name)
                func()
                print(name)
                //报错
        JavaScript：以函数作为作用域
            =====1.以函数作为作用域(除let)====
            function func(){
                if(1==1){
                    var name = 'alex';
                }
                onsole.log(name);
            }
            func()

            =====2.函数的作用域在函数未被调用之前，已经创建====
            =====3.函数的作用域存在作用域链，并且也是在被调用之前创建====
            示例一
                xo ="alex";
                function func(){
                    //var xo = "eric";
                    function inner(){
                        //var xo ="tony";
                        console.log(xo);
                    }
                    inner()
                }
                func()
            示例二
                xo ="alex";
                function func(){
                    var xo = "eric";
                    function inner(){
                        console.log(xo);
                    }
                    return inner;
                }
                var ret=func()
                ret()
                //eric
            示例三
                xo ="alex";
                function func(){
                    var xo = "eric";
                    function inner(){
                        console.log(xo);
                    }
                    var xo = "tony"
                    return inner;
                }
                var ret=func()
                ret
                //tony
            =====4.函数内局部变量 声明提前====
            function func(){
                console.log(xxoo);
            }
            func();
            //程序直接报错
            function func(){
                console.log(xxoo);
                var xxoo='alex';
                console.log(xxoo);
            }
            解释过程中 ：var xxoo;
            //func();
            //undefined
        14、JavaScript面向对象
            function foo(){
                var xo = "alex";
            }
            foo()

            function Foo(n){
                this.name = n;
                this.sayName=function(){
                    console.log(this.name);
                }
            }
            var obj1 = new Foo('we');
            obj1.name
            obj1.sayName()
            var obj2 = new Foo('wee');
            obj2.name
            obj2.sayName()
            ====>
                a.this代指对象(相当于python中的self) #函数中有this.当作类 又可以当做类的构造方法
                b.创建对象时，new 函数名()  #通过关键字new创建对象
            原型:
                function Foo(n){
                    this.name=n;
                }

                # Foo的原型：---这样不会浪费内存空间
                Foo.prototype={
                    'sayName':function(){
                        console.log(this.name)
                    }
                }
                obj1=new Foo('we');
                obj1.sayName()
                obj2=new Foo('wee');
                obj2.sayName()
DOM
    查找
        直接查找
            var obj=document.getElementById('i1')
        间接查找
            文本内容操作
            innerText 仅文本
            innerHTML 全部内容
            value
                input value 获取当前标签中的值
                select 获取选中的value值(selectedIndex)
                textarea    value 获取当前标签中的值
            搜索框的示例   ---s6
    操作
        样式操作：
            className
            classList
                classList.add
                classList.remove
            <style>
                .c1{
                    font-size:16px;
                    color:red;
                    ...
                }
            </style>  ---大范围
            <div class='c1 c2' style='font-size=16px;background-color'></div>
            obj.style.fontSize='16px';
            obj.style.backgroundColor='red';
            .style.color='red';   ---对某个对象
        属性操作：
            attributes
            getAttribute
            removeAttribute
        创建标签，并添加到HTML中：
            a.字符串形式
            b.对象的方式
                document.createElement('div')
        提交表单
            任何标签通过DOM都可以提交表单
            document.getElementById('f1').submit()
        其他 console.log() alert()
             var v=confirm(信息)  v=true false
             location.href
             location.href = “” #重定向，跳转
             location.reload()   #location.href = location.href  页面刷新

             定时器一直在执行
             var obj=setInterval(function(){

             },5000)
             clearInterval(obj); #清空定时器

             定时器只执行一次
             var o2=setTimeout(function(){

             },5000)) #5秒后执行函数
             clearTimeout(o2); #还没执行setTimeout前终止
    事件
        onclick,onblur,onfocus,onmouseover,onmouseout
        绑定事件两种方式:
            a.直接标签绑定 onclick='xxx()' onfocus
            b.先获取Dom对象，然后进行绑定
                document.getElementById('xx').onclick
                document.getElementById('xx').onfocus
        this,当前触发事件的标签
            a.第一种绑定方式
            <input type='button' οnclick='ClickOn(this)'>
            function ClickOn(self){
                //self 当前点击的标签
            }
            b.第二种绑定方式
                <input id='i1' type='button'>
                document.getElementById('i1').οnclick=function(){
                    //this代指当前点击的标签
                }
            c.第三种绑定方式  ---s13
                var mymain = document.getElementById("main");
                var mycontent = document.getElementById("content");
                mymain.addEventListener("click",function () {
                    console.log("main")
                },false)
                var mycontent = document.getElementById("content");
                mycontent.addEventListener("click",function () {
                    console.log("content")
                },false)
面试题
    行为 样式 结构 相分离的页面？  ---s7
    js   css  HTML
    作用域示例：
     var myTrs = document.getElementsByTagName("tr");
        var len = myTrs.length;
        for(var i=0;i<len;i++){
            myTrs[i].onmouseover = function(){
                this.style.backgroundColor="red"; //谁调用这个函数，这个this就指向谁 this换成myTrs[i]不行(作用域)
            }
            myTrs[i].onmouseout = function(){
                this.style.backgroundColor="";
            }
        }
    s7
CSS手册 W3school sublime(emmet插件)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         body{
 8             margin: 0;
 9         }
10         .left{
11             float: left;
12         }
13         .right{
14             float: right;
15         }
16         .pg-header{
17             height: 48px;
18             background-color: #2459a2;
19             color: white;
20         }
21         .pg-content .menu{
22             width: 20%;
23             background-color: red;
24             min-width: 200px;
25             height: 600px;
26         }
27         .pg-content .content{
28             width: 80%;
29             background-color: green;
30         }
31     </style>
32 </head>
33 <body>
34     <div class="pg-header"></div>
35     <div class="pg-content">
36         <div class="menu left">a</div>
37         <div class="content left">
38             <p>das</p>
39             <p>das</p>
40             <p>das</p>
41             <p>das</p>
42             <p>das</p>
43             <p>das</p>
44             <p>das</p>
45             <p>das</p>
46             <p>das</p>
47             <p>das</p>
48             <p>das</p>
49             <p>das</p>
50             <p>das</p>
51             <p>das</p>
52         </div>
53     </div>
54     <div class="pg-footer"></div>
55 </body>
56 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         body{
 8             margin: 0;
 9         }
10         .left{
11             float: left;
12         }
13         .right{
14             float: right;
15         }
16         .pg-header{
17             height: 48px;
18             background-color: #2459a2;
19             color: white;
20         }
21         .pg-content .menu{
22             position: fixed;
23             top: 48px;
24             left: 0;
25             bottom: 0;
26             width: 200px;
27             background-color: #dddddd;
28         }
29         .pg-content .content{
30             position: fixed;
31             top: 48px;
32             right: 0;
33             bottom: 0;
34             left: 200px;
35             background-color: purple;
36             /*overflow: auto;*/
37         }
38     </style>
39 </head>
40 <body>
41     <div class="pg-header"></div>
42     <div class="pg-content">
43         <div class="menu left">a</div>
44         <div class="content left">
45             <p>ssd</p>
46             <p>ssd</p>
47             <p>ssd</p>
48             <p>ssd</p>
49             <p>ssd</p>
50             <p>ssd</p>
51             <p>ssd</p>
52             <p>ssd</p>
53             <p>ssd</p>
54             <p>ssd</p>
55             <p>ssd</p>
56             <p>ssd</p>
57             <p>ssd</p>
58             <p>ssd</p>
59             <p>ssd</p>
60             <p>ssd</p>
61             <p>ssd</p>
62             <p>ssd</p>
63             <p>ssd</p>
64         </div>
65     </div>
66     <div class="pg-footer"></div>
67 </body>
68 </html>

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
  7     <style>
  8         body{
  9             margin: 0;
 10         }
 11         .left{
 12             float: left;
 13         }
 14         .right{
 15             float: right;
 16         }
 17         .pg-header{
 18             height: 48px;
 19             background-color: #2459a2;
 20             color: white;
 21             line-height: 48px;
 22         }
 23         .pg-header .logo{
 24             width: 200px;
 25             background-color: cadetblue;
 26             text-align: center;
 27         }
 28         .pg-header .icons{
 29             padding: 0 20px;
 30         }
 31         .pg-header .icons:hover{
 32             background-color: #204982;
 33         }
 34         .pg-header .icons .num{
 35             border-radius: 50%;
 36             display: inline-block;
 37             padding: 10px 7px;
 38             line-height: 1px;
 39             background-color: firebrick;
 40             font-size: 12px
 41         }
 42         .pg-header .user{
 43             margin-right: 60px;
 44             padding: 0 20px;
 45             color: white;
 46             height: 48px;
 47         }
 48         .pg-header .user:hover{
 49             background-color:#204982;
 50         }
 51         .pg-header .user .a img{
 52           height: 40px;width: 40px;margin-top:4px;border-radius: 50%;
 53         }
 54         .pg-header .user .b{
 55            position: absolute;top: 48px;right: 48px;background-color: white;z-index: 20;
 56             width: 160px;
 57             color: black;
 58             display: none;
 59         }
 60         .pg-header .user:hover .b{
 61             display: block;
 62         }
 63         .pg-header .user .b a{
 64             display: block;
 65         }
 66         .pg-content .menu{
 67             position: absolute;
 68             top: 48px;
 69             left: 0;
 70             bottom: 0;
 71             width: 200px;
 72             background-color: #dddddd;
 73         }
 74         .pg-content .content{
 75             position: absolute;
 76             top: 48px;
 77             right: 0;
 78             bottom: 0;
 79             left: 200px;
 80             overflow: auto;
 81             min-width: 800px;
 82             z-index: 9;
 83         }
 84     </style>
 85 </head>
 86 <body>
 87     <div class="pg-header">
 88         <div class="logo left">
 89             老男孩
 90         </div>
 91         <div class="user right" style="position: relative">
 92             <a class="a" href="#">
 93                 <img  src="1.jpg">
 94             </a>
 95             <div class="b" >
 96                 <a>我的资料</a>
 97                 <a>注销</a>
 98             </div>
 99         </div>
100         <div class="icons right">
101             <i class="fa fa-commenting-o" aria-hidden="true"></i>
102             <span class="num" >5</span>
103         </div>
104         <div class=" icons right">
105             <i class="fa fa-bell-o" aria-hidden="true"></i>
106         </div>
107     </div>
108     <div class="pg-content">
109         <div class="menu left">a</div>
110         <div class="content left">
111             <div style="background-color: purple">
112             <!--<div style="position: fixed;bottom:0;right: 0;width: 50px;height: 50px">返回顶部</div>-->
113             <!--<div style="position: absolute;bottom:0;right: 0;width: 50px;height: 50px">返回顶部</div>-->
114             <p style="margin: 0">ssd</p>
115             <p>ssd</p>
116             <p>ssd</p>
117             <p>ssd</p>
118             <p>ssd</p>
119             <p>ssd</p>
120             <p>ssd</p>
121             <p>ssd</p>
122             <p>ssd</p>
123             <p>ssd</p>
124             <p>ssd</p>
125             <p>ssd</p>
126             <p>ssd</p>
127             <p>ssd</p>
128             <p>ssd</p>
129             <p>ssd</p>
130             <p>ssd</p>
131             <p>ssd</p>
132             <p>ssd</p>
133             </div>
134         </div>
135     </div>
136     <div class="pg-footer"></div>
137 </body>
138 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
 7     <style>
 8         .item{
 9             background-color: #dddddd;
10         }
11         .item:hover{
12             color: red;
13         }
14         .item:hover .b{
15             background-color: green;
16         }
17     </style>
18 </head>
19 <body>
20     <div class="item">
21         <div class="a">
22             <i class="fa fa-gavel" aria-hidden="true"></i>
23         </div>
24         <div class="b">456</div>
25     </div>
26 </body>
27 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div id="i1">
 9         老男孩
10         <a>谷歌</a>
11         <input type="text" id="i2"/>
12         <select id="i3">
13             <option value="11">北京1</option>
14             <option value="12">北京2</option>
15             <option value="13">北京3</option>
16         </select>
17         <textarea id="i4"></textarea>
18     </div>
19 </body>
20 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div style="width: 600px;margin:0 auto;">
 9         <input id="i1" onfocus="Focus()" onblur="Blur()" type="text" value="请输入关键字"/>
10         <input type="text" placeholder="请输入关键字"/>
11     </div>
12     <script>
13         function Focus() {
14             var tag=document.getElementById('i1');
15             var val = tag.value;
16             if(val=="请输入关键字"){
17                 tag.value="";
18             }
19         }
20         function Blur() {
21             var tag=document.getElementById('i1');
22             var val = tag.value;
23             if(val.length==0){
24                 tag.value="请输入关键字";
25             }
26         }
27     </script>
28 </body>
29 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <style>
 8     #test{
 9         background-color: red;
10         width:300px ;
11         height: 400px;
12     }
13 </style>
14 <body>
15     <div id="test">
16         sds
17     </div>
18     <script>
19         // function t1(){
20         //     console.log('dsd')
21         // }
22         var mydiv=document.getElementById("test");
23         // console.log(mydiv);
24         // mydiv.onclick = function () {
25         //     console.log("dasdsa")
26         // }
27         // mydiv.onclick = function () {
28         //     console.log("da")
29         // }  同时绑定两个
30         mydiv.addEventListener('click',function () {
31             console.log('aaa');
32         },false);
33         mydiv.addEventListener('click',function () {
34             console.log('bbb');
35         },false); //false 事件的模型 false冒泡模型 true捕捉模型
36     </script>
37 </body>
38 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input type="button" onclick="AddEle1();" value="+"/>
 9     <input type="button" onclick="AddEle2();" value="+"/>
10     <div id="i1">
11         <p><input type="text" /></p>
12     </div>
13     <script>
14         function AddEle1() {
15             //创建一个标签
16             //将标签添加到i1里面
17             var tag='<p><input type="text"/></p>';
18             //第一个参数只能是：beforeBegin afterBegin beforeEnd afterEnd
19             document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
20         }
21         function AddEle2() {
22             //创建一个标签
23             //将标签添加到i1里面
24             var tag=document.createElement('input');
25             tag.setAttribute('type','text');
26             tag.style.fontSize='16px';
27             tag.style.color='red';
28             var p=document.createElement("p");
29             p.appendChild(tag);
30             document.getElementById('i1').appendChild(p);
31         }
32     </script>
33 </body>
34 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <form id="f1" action="http://www.oldboyedu.com">
 9         <input type="text" />
10         <input type="submit" value="提交" />
11         <a onclick="submitForm();">提交吧</a>
12     </form>
13     <script>
14         function submitForm() {
15             document.getElementById('f1').submit()
16         }
17     </script>
18 </body>
19 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div id="status"></div>
 9     <input type="button" value="删除" onclick="DeleteEle()"/>
10     <script>
11         function DeleteEle() {
12             document.getElementById("status").innerText="已删除";
13             setTimeout(function(){
14                document.getElementById("status").innerText="";
15             },5000);
16         }
17     </script>
18 </body>
19 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <style>
 8 
 9 </style>
10 <body>
11 <table border="1" width="300px">
12     <tr onmouseover="t1(0);" onmouseout="t2(0)"><td>1<td>2</td><td>3</td></tr>
13     <tr onmouseover="t1(1);" onmouseout="t2(1)"><td>1<td>2</td><td>3</td></tr>
14     <tr onmouseover="t1(2);" onmouseout="t2(2)"><td>1<td>2</td><td>3</td></tr>
15 </table>
16     <script>
17         function t1(n) {
18             var myTrs=document.getElementsByTagName("tr")[n];
19             //console.log(myTrs);
20             myTrs.style.backgroundColor="red";
21         }
22         function t2(n) {
23             var myTrs=document.getElementsByTagName("tr")[n];
24             myTrs.style.backgroundColor="";
25         }
26     </script>
27 </body>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <style>
 8 
 9 </style>
10 <body>
11 <table id='i1' border="1" width="300px">
12     <tr><td>1<td>2</td><td>3</td></tr>
13     <tr><td>1<td>2</td><td>3</td></tr>
14     <tr><td>1<td>2</td><td>3</td></tr>
15 </table>
16     <script>
17         var myTrs = document.getElementsByTagName("tr");
18         var len = myTrs.length;
19         for(var i=0;i<len;i++){
20             myTrs[i].onmouseover = function(){
21                 this.style.backgroundColor="red"; //谁调用这个函数，这个this就指向谁 this换成myTrs[i]不行(作用域)
22             }
23             myTrs[i].onmouseout = function(){
24                 this.style.backgroundColor="";
25             }
26         }
27     </script>
28 </body>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <style>
 8     #main{
 9         background-color: red;
10         width: 300px;
11         height: 400px;
12     }
13     #content{
14         background-color: pink;
15         width: 150px;
16         height: 200px;
17     }
18 </style>
19 <body>
20     <div id="main">
21         <div id="content"></div>
22     </div>
23     <script>
24         var mymain = document.getElementById("main");
25         var mycontent = document.getElementById("content");
26         mymain.addEventListener("click",function () {
27             console.log("main")
28         },false)
29         var mycontent = document.getElementById("content");
30         mycontent.addEventListener("click",function () {
31             console.log("content")
32         },false)
33     </script>
34 </body>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <style>
 8     #main{
 9         background-color: red;
10         width: 300px;
11         height: 400px;
12     }
13     #content{
14         background-color: pink;
15         width: 150px;
16         height: 200px;
17     }
18 </style>
19 <body>
20     </div>
21     <script>
22         function t1(){
23             console.log(name);
24             var name="alex";
25         }
26         t1();
27         // function t1(age) {
28         //     console.log(age);//function age(){}
29         //     var age = 27;
30         //     console.log(age); //27
31         //     function age(){}
32         //         console.log(age); //27
33         // }
34         // t1(3)
35     </script>
36 </body>