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>

效果：

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

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

新知识：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;width: 50px;height: 50px;">返回顶部</div>-->

            <!--<div style="position: absolute;bottom:0;right:0;width: 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>

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

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

关于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>

效果：

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

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

小图标使用方法：

url：http://fontawesome.io/

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

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

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

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

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

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

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

<!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>

效果：

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

JavaScript:

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

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

     switch(name){

         case '1':

             age = 123;

             break;

         case '2':

             age = 456;

             break;

         default :

             age = 777;

     }

函数分类：

　　普通函数：

　　　　function func(){

　　　　}

　　匿名函数：

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

　　　　例如：

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

function func(arg){

                return arg+1

            }

            setInterval("func()", 5000);

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

            setInterval(function(){

                console.log(123);

            },5000)

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

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

             (function(arg){

                 console.log(arg);

             })(1)

序列化；

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

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

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

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

转义：

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

　　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时间对象里面封装了当前时间。

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

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

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

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

d.getXXX 获取
d.setXXX 设置

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

作用域：

　　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="width: 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>

　　操作：

　　　　　　　样式操作：
　　　　　　　　　 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);

事件：

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

上面我们学习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");

          }

Python之路-python(css布局、JavaScript)的更多相关文章

自学Python之路-Python核心编程
自学Python之路-Python核心编程自学Python之路[第六回]:Python模块 6.1 自学Python6.1-模块简介 6.2 自学Python6.2-类.模块.包 ...
自学Python之路-Python基础+模块+面向对象+函数
自学Python之路-Python基础+模块+面向对象+函数自学Python之路[第一回]:初识Python 1.1 自学Python1.1-简介 1.2 自学Python1.2-环境的 ...
自学Python之路-Python并发编程+数据库+前端
自学Python之路-Python并发编程+数据库+前端自学Python之路[第一回]:1.11.2 1.3
自学Python之路-Python网络编程
自学Python之路-Python网络编程自学Python之路[第一回]:1.11.2 1.3
Python之路Python文件操作
Python之路Python文件操作一.文件的操作文件句柄 = open('文件路径+文件名', '模式') 例子 f = open("test.txt","r&qu ...
Python之路Python内置函数、zip()、max()、min()
Python之路Python内置函数.zip().max().min() 一.python内置函数 abs() 求绝对值例子 print(abs(-2)) all() 把序列中每一个元素做布尔运算, ...
Python之路Python作用域、匿名函数、函数式编程、map函数、filter函数、reduce函数
Python之路Python作用域.匿名函数.函数式编程.map函数.filter函数.reduce函数一.作用域 return 可以返回任意值例子 def test1(): print(&quot ...
Python之路Python全局变量与局部变量、函数多层嵌套、函数递归
Python之路Python全局变量与局部变量.函数多层嵌套.函数递归一.局部变量与全局变量 1.在子程序中定义的变量称为局部变量,在程序的一开始定义的变量称为全局变量.全局变量作用域是整个程序,局 ...
Python之路-python基础一
本章内容: 一.编程语言分类二.python之变量介绍三.python交互命令(input,print,getpass) 四.Python之循环控制 ...

随机推荐

Angularjs scope
$scope: var myapp = angular.module('myapp', []); myapp .controller('parent', function ($scope,$timeo ...
xcode引入第三方静态类库 duplicate symbol &lowbar;OBJC&lowbar;XXX 重复编译错误
xcode引入第三方静态类库 duplicate symbol _OBJC_XXX 重复编译错误一:场景 xcode 同时引入了 libA.a, libB.a 两个静态类库,如果这两个静态类库之中 ...
Selenium WebDriver + Grid2 + RSpec之旅（五）---面向对象设计用例
Selenium WebDriver + Grid2 + RSpec之旅(五) ----面向对象设计用例前几节讲了怎么一步一步的从零开始到编写出一个简单的测试用例,这一节将要讲一下怎么让测试用例变得 ...
IIS的Connection由改为close改为Keep-Alive
参考地址:http://jingyan.baidu.com/article/60ccbceb0c884864cab19784.html 官方:http://technet.microsoft.com/ ...
Salesforce使用truncate清空数据库
如果想快速的清空MySQL中的表,可以使用Truncate命令.Truncate能够快速的,对数据进行无差别的清空. 在Mysql中使用truncate的语法是TRUNCATE TABLE [Tabl ...
[转载] Rss 与 Feed 的概念区别
转载自http://www.chinaz.com/news/2011/0831/207961.shtml 可能很多刚刚接触博客的童鞋们,也和我一样不太了解:rss和feed概念或者说不了解rss和fe ...
Winform远程更新代码
本软件具备以下形: 1.通过http形式在客户端更新winform代码文件 2.在服务端通过软件生成xml配置文件,客户端通过比对xml配置文件来更新代码文件. 服务端: 在服务器上建立一个IIS发布 ...
C语言第八次作业
一.PTA实验作业题目1:统计一行文本的单词个数 1.本题PTA提交列表 2.设计思路 // 一个非空格和一个空格代表一个单词 char str[1000]: 存放一行文本定义 I,j=0:用作循 ...
三、vue之router
三.vue之router 此时vue的脚手架.创建项目已经完成. ... vue的运行流程 index.html-->main.js-->App.vue-->router/index ...
linux运行lnmp 出现502错误
之前遇到的问题: 安装好之后访问域名出现502错误,打开html文件正常,说明是php出现问题.在wwwlog文件夹查看nginx日志,发现报错原因是找不到/var/run/php5-fpm.sock ...