Python之路-python(css布局、JavaScript)

CSS布局

JavaScript

css布局：

后台管理界面一：（左右标签都有下来菜单）

利用position: absolute;让某个标签固定在具体位置，然后使用overflow: auto;属性，让内容多的话把父级标签撑起来（出现下拉菜单）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .left{
            float: left;
        }
        .pg-header{
            height: 48px;
            background-color: #2459a2;
            color: white;
        }
        .pg-content .menu{
            position: absolute;
            top:48px;
            left: 0;
            bottom: 0;
            width: 300px;
            background-color: #dddddd;
            overflow: auto;
        }
        .pg-content .content{
            position: absolute;
            top: 48px;
            right: 0;
            bottom: 0;
            left: 300px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="pg-header"></div>
    <div class="pg-content">
        <div class="menu left">
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
        </div>
        <div class="content left">
            <div style="background-color: purple">
                <!--让这个p标签置顶不留出缝隙-->
                <p style="margin: 0;">asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            </div>
        </div>
    </div>
    <div class="pg-footer"></div>
</body>
</html>

View Code

效果：

后台管理布局二：（左侧菜单没有下来菜单，右侧有同上使用相同方法，只是左侧菜单少了个）

新知识：border-radius: 50%;设置图片时候，选择border-raidus：50%让图片变成圆的。图标下面的下拉菜单没有用javascript，是用css的z-index和hover实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .pg-header{
            height: 48px;
            background-color: #2459a2;
            color: white;
            line-height: 48px;
        }
        .pg-header .logo{
            width: 200px;
            background-color: cadetblue;
            text-align: center;
        }
        .pg-header .user{
            margin-right: 80px;
            padding: 0 20px;
            color: white;
            height: 48px;
        }
        .pg-header .user:hover{
            background-color: #204982;
        }
        .pg-header .user .a img{
            height: 40px;
            width: 40px;
            margin-top: 4px;
            border-radius: 50%;
        }
        .pg-header .user .b{
                z-index: 20;
                position: absolute;
                top: 48px;
                right: 30px;
                background-color: white;
                color: black;
                width: 160px;
                display: none;
        }
        .pg-header .user:hover .b{
            display: block;
        }
        .pg-header .user .b a{
            display: block;
        }
        .pg-content .menu{
            position: absolute;
            top:48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: #dddddd;
        }

        .pg-content .content{
            position: absolute;
            top: 48px;
            right: 0;
            bottom: 0;
            left: 200px;
            overflow: auto;
            z-index: 9;

        }
    </style>
</head>
<body>

    <div class="pg-header">
        <div class="logo left">
            老男孩
        </div>
        <div class="user right" style="position: relative">
            <a class="a" href="#">
                <img src="22.jpg">
            </a>
            <div class="b">
                <a>我的资料</a>
                <a>注销</a>
            </div>
        </div>


    </div>
    <div class="pg-content">
        <div class="menu left">a</div>
        <div class="content left">
            <!--<div style="position: fixed;bottom:0;right:0; 50px;height: 50px;">返回顶部</div>-->
            <!--<div style="position: absolute;bottom:0;right:0; 50px;height: 50px;">返回顶部</div>-->
            <div style="background-color: purple">
            <p style="margin: 0;">asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                </div>
        </div>
    </div>
    <div class="pg-footer"></div>
</body>
</html>

View Code

效果：（右上角多了个用户的头像和下拉菜单）

关于hover的练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*设置背景色*/
        .item{
            background-color: #dddddd;
        }
        /*设置鼠标放到该区域变成红色*/
        .item:hover{
            color: red;
        }
        /*让鼠标放到上面这个样式时候字体颜色变成红色，而b样式的区域字体颜色变成绿色*/
        .item:hover .b{
            color: #00A000;
        }
    </style>
</head>
<body>
    <div class="item">
        <div class="a">abc</div>
        <div class="b">ghj</div>
    </div>
</body>
</html>

View Code

效果：

说明：当鼠标从上或者从下到这个div标签区域时候，让abc和ghj区域变成不同的颜色。

小图标使用方法：

url：http://fontawesome.io/

进入上面这个网站，点击home，进行下载，下载下来的安装包进行解压，解压下来的目录名字是font-awesome-4.7.0（里面的东西一个也不能少），将这个目录放到你代码的目录下，这样你就可以引用它的各种符号了。

我们开始引用它们的符号了，还是这个网页http://fontawesome.io/，我们点击icons这个选项：

这里面有很多图标，你看上哪个符号就点击哪个符号，例如我喜欢下面这个图标（然后我就双击点击一下）：

进来以后，我只需要我箭头的那部分就行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- css目录中有min代表是压缩过得，一般用这个，另外一个是没有压缩过的(压缩过的是一行就解决了)-->
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div class="fa fa-window-restore" aria-hidden="true" ></div>
</body>
</html>

效果：

JavaScript:

switch语句，类似于if条件语句。

下面：case（如果name等于1，age就是123，后面一定要加break;）,如果name等于2，age就是456，最后否则age就是777.

 1     switch(name){
 2         case '1':
 3             age = 123;
 4             break;
 5         case '2':
 6             age = 456;
 7             break;
 8         default :
 9             age = 777;
10     }

函数分类：

　　普通函数：

　　　　function func(){

　　　　}

　　匿名函数：

　　　　定义：没有名字的函数就叫匿名函数。

　　　　例如：

　　　　我们要做一个任务计划，让一个函数5秒执行一次。正常大家都会这么写：　（这个函数有名字就叫func（）里面还有个形式参数arg）　

function func(arg){
            
                return arg+1
            }
            
            setInterval("func()", 5000);

　　　　但我们也可以这么写：（下面这个也是一个函数，但是我用setInterval把它包在了里面，这个函数没有名字，但也是函数。我们通常叫这类函数是匿名函数）

            setInterval(function(){
                console.log(123);
            
            },5000)

　　　　自执行函数：（顾名思义就是自己执行的函数）

　　　　　　自己创建一个函数，并且自己执行。

1             (function(arg){
2                 console.log(arg);
3             })(1)

序列化；

　　JSON.stringify(obj) 序列化 (将对象转换为字符串)

　　JSON.parse(str) 反序列化 (将字符串转换为对象类型)

转义：

　　例如：我打开搜狗搜索哈哈两个字：

　　https://www.sogou.com/web?query=%E5%93%88%E5%93%88&_asf=www.sogou.com&_ast=&w=01019900&p=40040100&ie=utf8&from=index-nologin&sut=679&sst0=1479987995509&lkt=0%2C0%2C0

　　浏览器肯定后面加一堆东西，这其中query=的这些%E5%93%88%E5%93%88其实就是我输入的哈哈两个字，只是被转义了。

使用场景：一般我们都会讲转义后的url存到数据库，但是有些关键词很明感，所以转义后就没事儿了。

encodeURI( )                   URI中的转义字符

decodeURI( )                   URl中未转义的字符
decodeURIComponent( )   URI组件中的未转义字符
encodeURIComponent( )   转义URI组件中的字符（将url中http后面的://也转义了）
escape( )                         对字符串转义
unescape( )                     给转义字符串解码
URIError                         由URl的编码和解码方法抛出

例如：

将我从搜狗上扣下来的这个url给对象url
url = "https://www.sogou.com/web?query=哈哈;"

将url这个对象encodeURI后就是下面的%符号内容
url_encodeURL = encodeURI(url)
"https://www.sogou.com/web?query=%E5%93%88%E5%93%88;"

我再把它decodeURI回来就又是汉子了
new_url = decodeURI(url_encodeURL)
"https://www.sogou.com/web?query=哈哈;"

eval：

JavaScript中的eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值。

　　eval()

　　EvalError 执行字符串中的JavaScript代码　　

　　　　python中:
　　　　　　val = eval(表达式)（这里呢只能执行负责的表达式）

　　　　　　exec(执行代码)（python中exec只能执行代码，各种复杂表达式都不行）

　　　　但是JavaScript中eval() 即能执行代码也能执行表达式：

　　　　　　eval()

JavaScript中提供了时间相关的操作，时间操作中分为两种时间：

　　时间统一时间

　　本地时间（东8区）

　　更多操作参见：http://www.shouce.ren/api/javascript/main.html

　　JavaScript中有个Date对象。

　　固定写法（除了date其它都是固定写法）：

　　var date = new Date（）

date时间对象里面封装了当前时间。

下面方法可以获取到具体时间的哪个值。

如果你需要更改某个值，首先应该是先get到某个值，然后set的某个值。例如：

d.getXXX 获取
d.setXXX 设置

作用域：

　　1. 以函数作为作用域（let）

其他语言： 以代码块作为作用域
                    public void Func(){
                        if(1==1){
                            string name = 'Java';
                            
                        }
                        console.writeline(name);
                        
                    }
                    Func()
                    // 报错
                    
        Python：   以函数作为作用域
                    情况一：
                        def func():
                            if 1==1:
                                name = 'zhangsan'
                            print(name)
                            
                        func()
                        // 成功
                    情况二：
                        def func():
                            if 1==1:
                                name = 'zhangsan'
                            print(name)
                            
                        func()
                        print(name)
                        // 报错
                
        JavaScript:  以函数作为作用域
        
                    function func(){
                        if(1==1){
                            var name = 'zhangsan';
                        }
                        console.log(name);
                    }
                    func()

2. 函数的作用域在函数未被调用之前，已经创建。

     function func(){
            if(1==1){
                var name = 'zhangsan';
            }
            console.log(name);
        }

3. 函数的作用域存在作用域链，并且也是在被调用之前创建。（函数里面可以套函数，就叫作用域链）

        示例一：
            xo = "zhangsan";
            
            function func(){
                   var xo = 'eric';
                function inner(){
                       var xo = 'tony';
                    console.log(xo);
                }
                
                inner()
            }
            
            func()
从里往外找先找inner这函数（作用域）里的xo,inner里面要是没有就找func这个函数里面的xo,func里面也没有就找最外面的xo.

        示例二：
            xo = "zhangsan";
            
            function func(){
                var xo = 'eric';
                function inner(){
                    
                    console.log(xo);
                }
                
                return inner;
            }
            
            var ret = func()
这样的话ret就是inner函数的内存地址，所以看下面补充的示例二。

        示例二：
            xo = "zhangsan";
            
            function func(){
                var xo = 'eric';
                function inner(){
                    
                    console.log(xo);
                }
                
                return inner;
            }
            
            var ret = func()
            ret()
ret（）才是执行inner函数，但是inner里面没有xo这个对象啊，因为JavaScript作用域没有执行前就创建了，所以输出的必须得eric。

        示例三：
            xo = "zhangsan";
            
            function func(){
                var xo = 'eric';
                function inner(){
                    
                    console.log(xo);
                }
                var xo = 'tony';
                
                return inner;
            }
            
            var ret = func()
            ret()

4. 函数内局部变量声明提前

 function func(){
            console.log(xxoo);
        }
        
        func();
        // 程序直接报错
        
        function func(){
            console.log(xxoo);
            var xxoo = 'zhangsan';
        }
        解释过程中：var xxoo;
        
        func();
        结果肯定是undefined
因为func()函数执行的时候首先是undefined，但是开始执行的时候从上往下console.log的时候xxoo还是undefined.所以结果肯定是undefined。

JavaScript面向对象

创建一个普通的函数：

            function foo(){
                var name = 'zhangsan';
            }
            
            foo()

面向对象：

            function foo(n){
                this.name = n;
            }
            
            var obj = new Foo('zhangsan');

             a. this代指对象(python self)
              b. 创建对象时, new 函数()

            function Foo(n){
                this.name = n;
                this.sayName = function(){
                    console.log(this.name);
                }
            }
            
            var obj1 = new Foo('we');
            obj1.name
            obj1.sayName()

            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()
这里有点像python中的写法，sayName在每个对象里面都定义了，所以不合理。把sayName放到一个公共的地方，看下面。。。。

原型：

            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');

Foo的里面包含了Foo.prototype方法，所以每次有人要找sayName，先好到Foo方法，再去它下面的Foo.prototype。就不用像上面那样方法里面套方法，占用内存空间。不高效。

DOM：

　　查找：

    查找
        直接查找
            var obj = document.getElementById('i1')
        间接查找
            文件内容操作：
                innerText    仅文本 （只是文本，要是写模块，那浏览器也不认，直接给你当字符串显示的页面上）
                innerHTML    全内容（可以像写前端似的直接写代码，浏览器会认出里面的标签）

　　　　　　　　　　value
　　　　　　　　　　　　　　input value获取当前标签中的值
　　　　　　　　　　　　　　select 获取选中的value值（selectedIndex）
　　　　　　　　　　　　　　textarea value获取当前标签中的值

搜索框示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style=" 600px;margin: 0 auto;">
         <!--获取到光标后执行某个函数用onfocus事件-->
        <!-- 当光标离开后执行某个函数用onblur事件-->
        <input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字"/>
        
        <!--不建议使用，也能实现onfocus和onblur的需求。老版本html不支持-->
        <input type="text" placeholder="请输入关键字" />
    </div>

    <script>
//        当鼠标点击后执行的函数，如果是请输入关键字，就给清空（用value获取输入框内容，并做判断）
        function Focus(){
            var tag = document.getElementById('i1');
            var val = tag.value;
            if(val == "请输入关键字"){
                tag.value = "";
            }
        }
//        当鼠标离开时获取到输入框内容，并更改成请输入关键字
        function Blur(){
            var tag = document.getElementById('i1');
            var val = tag.value;
            if(val.length ==0){
                tag.value = "请输入关键字";
            }
        }
    </script>
</body>
</html>

View Code

　　操作：

                
　　　　　　　样式操作：
　　　　　　　　　 className  以字符串形式获取样式的名字
                 classList　　以列表的形式获取样式的名字
                    classList.add　　增加样式
                    classList.remove　　删除样式
                   
                 像上面这种直接就干掉了某个样式，我只想更改里面的一条怎么办呢，下面这种力度更小（注意里面的样式写法的大小写）
                obj.style.fontSize = '16px';　　
                obj.style.backgroundColor = 'red';
                obj.style.color = "red"

　　属性操作：

　　　　把某个标签里面的某个属性做操作。　　　

　　　　　　attributes 获取所有的属性
　　　　　　getAttribute 更改
　　　　　　removeAttribute 删除

创建标签，并添加到HTML中。（例如加减行或者数字时候，本质上就是添加某个标签到具体位置）

第一种：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" onclick="AddEle1();" value="+" />
    <div id="i1">
        <p><input type="text" /></p>

    </div>
    <script>
        function AddEle1(){
            // 创建一个标签
            // 将标签添加到i1里面
            var tag = "<p><input type='text'/></p>";
            // 注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
            document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
        }
</body>
</html>

第二种（用对象的方式）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" onclick="AddEle2();" value="+" />
    <div id="i1">
        <p><input type="text" /></p>

    </div>
    <script>
        function AddEle2(){
            // 创建一个标签
            // 将标签添加到i1里面
            var tag = document.createElement('input');
            tag.setAttribute('type', 'text');
            tag.style.fontSize = '16px';
            tag.style.color = 'red';

            var p = document.createElement('p');
            p.appendChild(tag);

            document.getElementById('i1').appendChild(p);
        }
    </script>
</body>
</html>

注意：第一个参数只能是'beforeBegin（兄弟标签的前面）'、 'afterBegin（父级标签的前面）'、 'beforeEnd（兄弟标签的后面）'、 'afterEnd'（父级标签的后面）

提交表单：

　　两种提交表单方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form id="f1" action="http://www.oldboyedu.com">
        <input type="text" />
        <input type="submit" value="提交" />
        <a onclick="submitForm();">提交吧</a>
    </form>

    <script>
        function submitForm(){
            document.getElementById('f1').submit()
        }
    </script>
</body>
</html>

其它操作：

console.log                 输出框
alert                       弹出框
confirm                     确认框（弹出框，true是确认输出信息，fales是取消输出信息）
  
// URL和刷新
location.href               获取当前网页的URL地址
location.href = "url"       重定向（跳转到某个url）
location.reload()           重新加载（页面刷新）
  
// 定时器
setInterval                 多次定时器（这只一个定时器，例如，每多少秒执行，它就一直在等多少秒后执行。）
clearInterval               清除多次定时器（清楚类似上面的多次定时器）
setTimeout                  单次定时器（地址多久后执行一次，但执行一次）
clearTimeout                清除单次定时器（清楚上面的这个定时器）

示例：

        // 定时器，一直执行
        var obj = setInterval(function(){
            console.log(1);
            clearInterval(obj);
        }, 1000);
        // 定时器，只执行一次
        setTimeout(function () {
            console.log('timeout');
        },15000);

事件：

上面我们学习onclick，onblur，onfocus

前端写法表中：

　　行为样式结构相分离的页面

　　总结：

　　　　不要把style样式直接写到某个标签中例如<div style = 'color = red '> </div>，样式在head里面或者文件里面写

　　　　不用把例如事件onclik = func();类似这样的直接写到标签中。

　　　　类似通过id之类在js中找id号，在js里面添加事件。

　　　　html中尽量只写html语法。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #test{
        background-color: red;width:300px;height:400px;
    }
</style>
<body>

    <div id="test" >
        dsad
    </div>
    <script>
        var mydiv = document.getElementById("test");
          console.log(mydiv);
          mydiv.onclick = function(){
              console.log("dsads");
          }
          mydiv.onclick = function(){
              console.log("dsadsa");
          }

View Code