Python学习笔记第十六周

目录：

　　一、CSS补充

　　　　1、页面布局

　　二、JavaScript补充

　　　　1、条件判断

　　　　2、函数分类

　　　　3、序列化

　　　　4、转义

　　　　5、eval

　　　　6、时间

　　　　7、作用域

　　三、DOM

　　　　1、间接查找

　　　　　　文本操作

　　　　　　样式操作

　　　　　　属性操作

　　　　　　提交表单

　　　　　　其他

　　　　　　事件

内容：

　　一、CSS补充　

　　1、页面布局：

　　　后台管理布局：

　　　　元素补充：

　　　　min-width：防止缩放的时候，只写百分比会变形，需要一个最小宽度

　　　　border-radius：边框变圆，可以设置为50%

　　　例子：

　　 1、后台管理界面布局（左侧菜单不动）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面布局</title>
    <style>
        body{
            margin:0;/*  到上方没有间隔 */
        }
        .left{
            float;left;
        }
        .right{
            float:right;
        }
        .pg-header{
            height:48px;
            background-color:#2459a2;
            color:white;

        }
        .pg-body .body-menu{
            width:20%;
            min-width:200px;/* 当20%的宽度小于200px时应用200px  */
            background-color:red;
            position:fixed;
            top:48px;
            left:0;
            bottom:0;
        }
        .pg-body .body-content{
            width:80%;
            background-color:green;
            position:fixed;
            top:48px;
            right:0;
            bottom:0;
            overflow:auto

        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="header-menu">

        </div>
    </div>
    <div class="pg-body">
        <div class="body-menu left">a</div>
        <div class="body-content left">
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
        </div>
    </div>
</body>
</html>

View Code

　　 2、左侧菜单跟随滚动条移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面布局</title>
    <style>
        body{
            margin:0;/*  到上方没有间隔 */
        }
        .left{
            float;left;
        }
        .right{
            float:right;
        }
        .pg-header{
            height:48px;
            background-color:#2459a2;
            color:white;

        }
        .pg-body .body-menu{
            position:absolute;
            top:48px;
            left:0;
            bottom:0;
            width:20%;
            min-width:200px;
            background-color:#dddddd;
        }
        .pg-body .body-content{
           position:absolute;
            top:48px;
            bottom:0;
            right:0;
            width:80%;
            background-color:palevioletred;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="header-menu">

        </div>
    </div>
    <div class="pg-body">
        <div class="body-menu left">a</div>
        <div class="body-content left">
            <div style="background-color:palevioletred">
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            </div>
        </div>
    </div>
</body>
</html>

View Code

　　　　3、左侧菜单不动，不同于1中的时，3中position都是absoute，但是在右边添加了overflow：auto属性后达到同1一样的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面布局</title>
    <style>
        body{
            margin:0;/*  到上方没有间隔 */
        }
        .left{
            float;left;
        }
        .right{
            float:right;
        }
        .pg-header{
            height:48px;
            background-color:#2459a2;
            color:white;

        }
        .pg-body .body-menu{
            position:absolute;
            top:48px;
            left:0;
            bottom:0;
            width:20%;
            min-width:200px;
            background-color:#dddddd;
        }
        .pg-body .body-content{
           position:absolute;
            top:48px;
            bottom:0;
            right:0;
            width:80%;
            background-color:palevioletred;
            overflow:auto;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="header-menu">

        </div>
    </div>
    <div class="pg-body">
        <div class="body-menu left">a</div>
        <div class="body-content left">
            <div style="background-color:palevioletred">
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            </div>
        </div>
    </div>
</body>
</html>

View Code

　　　　4、左右相互不干扰的方式滚动，就是在3的基础上，对左侧也添加了overflow：auto属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面布局</title>
    <style>
        body{
            margin:0;/*  到上方没有间隔 */
        }
        .left{
            float;left;
        }
        .right{
            float:right;
        }
        .pg-header{
            height:48px;
            background-color:#2459a2;
            color:white;

        }
        .pg-body .body-menu{
            position:absolute;
            top:48px;
            left:0;
            bottom:0;
            width:20%;
            min-width:200px;
            background-color:#dddddd;
            overflow:auto;
        }
        .pg-body .body-content{
           position:absolute;
            top:48px;
            bottom:0;
            right:0;
            width:80%;
            background-color:palevioletred;
            overflow:auto;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="header-menu">

        </div>
    </div>
    <div class="pg-body">
        <div class="body-menu left">
            <div style="background-color:#dddddd">
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            </div>
        </div>
        <div class="body-content left">
            <div style="background-color:palevioletred">
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            </div>
        </div>
    </div>
</body>
</html>

View Code

　　　　小练习：

　　　　鼠标放上去的时候，123表成红色，456背景变为绿色：使用技巧，在class=item的CSS中设置 .item:hover .b {} 表示在item生效时同时生效 class b

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
            background-color:#dddddd;
        }
        .item:hover{
            color:red;
        }
        .item:hover .b{
            background-color:green;
        }
    </style>
</head>
<body>
    <div class="item">
        <div class="a">123</div>
        <div class="b">456</div>
    </div>
</body>

View Code

　　　　后台管理：头部布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面布局</title>
    <style>
        body{
            margin:0;/*  到上方没有间隔 */
        }
        .left{
            float:left;
        }
        .right{
            float:right;
        }

        .pg-body .body-menu{
            position:absolute;
            top:48px;
            left:0;
            bottom:0;
            width:20%;
            min-width:200px;
            background-color:#dddddd;
            overflow:auto;
        }
        .pg-body .body-content{
           position:absolute;
            top:48px;
            bottom:0;
            right:0;
            width:80%;
            background-color:palevioletred;
            overflow:auto;
            z-index: 9;
        }
        .clear{
            clear:both;
        }
        .pg-header{
            height:48px;
            background-color:#2459a2;
            color:white;
            line-height:48px;

        }
        .pg-header .logo{
            width:200px;
            background-color:#2459a2;
            text-align:center;

        }
        .pg-header .user{
            margin-right:60px;
            padding:0 20px;
            background-color:#2459a2;
            height:48px;
            position:relative;


        }
        .pg-header .user:hover{
            background-color:#396bb3;

        }

        .pg-header .user .a img{
            height: 40px;
            width:40px;
            margin-top:4px;
            border-radius: 50%;
        }

        .pg-header .user .img-content{
            position:absolute;
            top:48px;
            right:-47px;
            background-color:red;
            z-index: 20;

        }
        .pg-header .user .img-content a{
            display: block;
            width:130px;
            height:40px;
            line-height:40px;
            padding:0;
            margin:0;
            display: none;

        }
        .pg-header .user:hover .img-content a{
            display: block;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="logo left">
            LOGO
        </div>
        <div class="user right">
            <a class='a' href="#">
                <img src="abc.jpg"/>
            </a>
            <div class="img-content">
                <a>我的资料</a>
                <a>注销</a>
                
            </div>
        </div>
        <div class="clear"></div>
    </div>
    <div class="pg-body">
        <div class="body-menu left">
            <div style="background-color:#dddddd">
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            </div>
        </div>
        <div class="body-content left">
            <div style="background-color:palevioletred">
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            </div>
        </div>
    </div>
</body>
</html>

View Code

　　　　备注：小图标网址 www.fontawesome.io/icons

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面布局</title>
    <link rel="stylesheet" href="font-awesome-master/css/font-awesome.min.css" />
    <style>
        body{
            margin:0;/*  到上方没有间隔 */
        }
        .left{
            float:left;
        }
        .right{
            float:right;
        }

        .pg-body .body-menu{
            position:absolute;
            top:48px;
            left:0;
            bottom:0;
            width:20%;
            min-width:200px;
            background-color:#dddddd;
            overflow:auto;
        }
        .pg-body .body-content{
           position:absolute;
            top:48px;
            bottom:0;
            right:0;
            width:80%;
            background-color:palevioletred;
            overflow:auto;
            z-index: 9;
        }
        .clear{
            clear:both;
        }
        .pg-header{
            height:48px;
            background-color:#2459a2;
            color:white;
            line-height:48px;

        }
        .pg-header .logo{
            width:200px;
            background-color:#2459a2;
            text-align:center;

        }
        .pg-header .user{
            margin-right:60px;
            padding:0 20px;
            background-color:#2459a2;
            height:48px;
            position:relative;


        }
        .pg-header .user:hover{
            background-color:#396bb3;

        }

        .pg-header .user .a img{
            height: 40px;
            width:40px;
            margin-top:4px;
            border-radius: 50%;
        }

        .pg-header .user .img-content{
            position:absolute;
            top:48px;
            right:-47px;
            background-color:red;
            z-index: 20;

        }
        .pg-header .user .img-content a{
            display: block;
            width:130px;
            height:40px;
            line-height:40px;
            padding:0;
            margin:0;
            display: none;

        }
        .pg-header .user:hover .img-content a{
            display: block;
        }
        .pg-header .icons{
            padding:0 10px;
        }
        .pg-header .icons:hover{
            background-color:#396bb3;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="logo left">
            LOGO
        </div>

        <div class="user right">
            <a class='a' href="#">
                <img src="abc.jpg"/>
            </a>
            <div class="img-content">
                <a>我的资料</a>
                <a>注销</a>
                
            </div>
        </div>


        <div class="icons right">
            <i class="fa fa-twitter-square" aria-hidden="true"></i>
            <span style="display: inline-block;padding:2px 5px;line-height: 1;background-color:#104E8B;border-radius: 50%;">5</span>
        </div>
        <div class="icons right">
           <i class="fa fa-bell-o" aria-hidden="true"></i>

        </div>
        <div class="clear"></div>
    </div>
    <div class="pg-body">
        <div class="body-menu left">
            <div style="background-color:#dddddd">
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            </div>
        </div>
        <div class="body-content left">
            <div style="background-color:palevioletred">
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            </div>
        </div>
    </div>
</body>
</html>

View Code

例子：小图标增加，同时在小图标旁边通过调整padding和border-radius比重来给旁边数字画进圆框中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面布局</title>
    <link rel="stylesheet" href="font-awesome-master/css/font-awesome.min.css" />
    <style>
        body{
            margin:0;/*  到上方没有间隔 */
        }
        .left{
            float:left;
        }
        .right{
            float:right;
        }

        .pg-body .body-menu{
            position:absolute;
            top:48px;
            left:0;
            bottom:0;
            width:20%;
            min-width:200px;
            background-color:#dddddd;
            overflow:auto;
        }
        .pg-body .body-content{
           position:absolute;
            top:48px;
            bottom:0;
            right:0;
            width:80%;
            background-color:palevioletred;
            overflow:auto;
            z-index: 9;
        }
        .clear{
            clear:both;
        }
        .pg-header{
            height:48px;
            background-color:#2459a2;
            color:white;
            line-height:48px;

        }
        .pg-header .logo{
            width:200px;
            background-color:#2459a2;
            text-align:center;

        }
        .pg-header .user{
            margin-right:60px;
            padding:0 20px;
            background-color:#2459a2;
            height:48px;
            position:relative;


        }
        .pg-header .user:hover{
            background-color:#396bb3;

        }

        .pg-header .user .a img{
            height: 40px;
            width:40px;
            margin-top:4px;
            border-radius: 50%;
        }

        .pg-header .user .img-content{
            position:absolute;
            top:48px;
            right:-47px;
            background-color:red;
            z-index: 20;

        }
        .pg-header .user .img-content a{
            display: block;
            width:130px;
            height:40px;
            line-height:40px;
            padding:0;
            margin:0;
            display: none;

        }
        .pg-header .user:hover .img-content a{
            display: block;
        }
        .pg-header .icons{
            padding:0 10px;
        }
        .pg-header .icons:hover{
            background-color:#396bb3;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="logo left">
            LOGO
        </div>

        <div class="user right">
            <a class='a' href="#">
                <img src="abc.jpg"/>
            </a>
            <div class="img-content">
                <a>我的资料</a>
                <a>注销</a>
                
            </div>
        </div>


        <div class="icons right">
            <i class="fa fa-twitter-square" aria-hidden="true"></i>
            <span style="display: inline-block;padding:2px 5px;line-height: 1;background-color:#104E8B;border-radius: 50%;">5</span>
        </div>
        <div class="icons right">
           <i class="fa fa-bell-o" aria-hidden="true"></i>

        </div>
        <div class="clear"></div>
    </div>
    <div class="pg-body">
        <div class="body-menu left">
            <div style="background-color:#dddddd">
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
            </div>
        </div>
        <div class="body-content left">
            <div style="background-color:palevioletred">
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            <p>aaa</p>
            </div>
        </div>
    </div>
</body>
</html>

View Code

　　二、JavaScript补充

　　1、条件语句增加：

　　name=‘3’

　　switch(name){

　　　　case '1':

　　　　　　age = 123;;

　　　　　　break;

　　　　case '2':

　　　　　　age = 456;

　　　　　　break;

　　　　default:

　　　　　　age = 777;

　　　　}

　　　　2、函数返回值

　　　　function func(arg){

　　　　　　return arg+1

　　　　}

　　　　var result = func(1);

　　　　console.log(result);

　　　　2、函数分类：

　　　　　　1、普通函数

　　　　　　2、匿名函数

　　　　　　setInterval(function(){

　　　　　　　　console.log(123);

　　　　　　　　},5000)

　　　　　　3、自执行函数：创建函数并且自动执行

　　　　　　(function(arg){

　　　　　　　　console.log(arg);

　　　　　　　　})(1) #前面是函数，后面的括号里的1表示的是函数的实参

　　　　3、序列化

　　　　　　JSON.stringify() 对象转换为字符串

　　　　　　JSON.parse()　字符串转换为对象类型

　　　　4、转义　　　

decodeURI( ) URl中未转义的字符
decodeURIComponent( ) URI组件中的未转义字符
encodeURI( ) URI中的转义字符
encodeURIComponent( ) 转义URI组件中的字符
escape( ) 对字符串转义
unescape( ) 给转义字符串解码
URIError 由URl的编码和解码方法抛出

　　将数据经过转义后，保存在cookie中

url = "https://www.sogou.com/web?query=理解";
   "https://www.sogou.com/web?query=理解"
new_rul = encodeURI(url)
   "https://www.sogou.com/web?query=%E7%90%86%E8%A7%A3"
decodeURI(new_rul)
   "https://www.sogou.com/web?query=理解"

　　5、eval

　　JS中eval可以写表达式同时也可以执行代码，类似于python只能怪eval（表达式）与exec（执行代码）的集合

　　6、时间

　　　　Date类

　　　　　　var d = new Date（）表示创建一个对象，Date是一个类，d就封装了当前的时间

var d = new Date()
undefined
d
Mon Jun 05 2017 15:42:27 GMT+0800 (CST)
d.getMinutes()
42
n = d.getMinutes()+5
47

d.setMinutes(n)
1496648847094
d
Mon Jun 05 2017 15:47:27 GMT+0800 (CST)

　　　　7、作用域

　　　　　　1、JS中，以函数作为作用域

　　　　　　2、函数的作用域在函数没有执行之前就已经创建

　　　　　　3、函数的作用域存在作用域链，并且也在被调用之前创建

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

　　　　8、面向对象：

　　　　原型：

　　　　function Foo(n){

　　　　　　this.name = n;

　　　　}

　　　　#Foo的原型

　　　　Foo.prototype = {

　　　　　　'sayName': function(){

　　　　　　　　console.log(this.name);

　　　　}

　　三、DOM

　　1、间接查找：

　　　　文本内容操作：

　　　　　　1、innerHTML：和innerText不同的地方在于：前者获取的对象包括标签与内容，而后者只能获取内容不能获取内容对应的标签

　　　　　　2、innerText：innerText仅获取文本内容

　　　　　　3、value：

　　　　　　　　　　input value获取当前标签中的值

　　　　　　　　　　select 获取选中的value值，selectedIndex

　　　　　　　　　　textarea value获取当前标签中的值

　　　　　　　　　　例子：搜索框

　　　　　　　　　　备注：onfocus表示获取光标 onblur表示移除光标，本例在获取光标时变为空，移除光标时填充‘获取关键字’ 但是现代浏览器可以只通过 placeholder='请输入关键字’ 来完成该操作

 1 <body>
 2     <div style="600px;margin:0 auto">
 3         <input id='i1' onfocus="Focus();"  onblur="Blur();" value="请输入关键字" type="text" />
 4     </div>
 5     <script>
 6         function Focus(){
 7             console.log(1);
 8             var tag = document.getElementById('i1');
 9             var val = tag.value;
10             if(val === '请输入关键字'){
11                 tag.value = ''
12             }
13 
14         }
15         function Blur(){
16             console.log(2);
17             var tag = document.getElementById('i1');
18             var val = tag.value;
19             if(val.length === 0){
20                 tag.value = '请输入关键字';
21             }
22         }
23     </script>
24 </body>

View Code

　　　　　样式操作：

　　　　　　className：

　　　　　　classList：

　　　　　　　　classList.add

　　　　　　　　classList.remove

　　　　属性操作：

　　　　　　obj = document.getElementById('i1')

　　　　　　obj.setAttribute('key','value'):设置属性

　　　　　　obj.removeAttribute('value'):取消value属性，会将该属性取消

　　　　　　obj.attributes:获取全部属性

　　　　创建标签并添加到HTML中：

　　　　方法一：字符串的形式

<body>
    <input type="button" onclick="AddEle();" value="+"/>
    <div id="i1">
        <input type="text"/>

    </div>
    <script>
        function AddEle(){
           //创建标签
            //将标签添加到i1内
            var tag = "<input type='text'/>";
            document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
        }
    </script>
</body>

View Code

　　　　备注：insertAdjacentHTML（）第一个参数包括：

　　　　　　1、beforeBegin：插在对象的前面

　　　　　　2、afterBegin：插在对象的第一个孩子处

　　　　　　3、beforeEnd：插在对象的最后一个孩子处

　　　　　　4、afterEnd：插在对象的后面　　

　　　　方法二：对象的方式

<body>
    <input type="button" onclick="AddEle();" value="+"/>
    <div id="i1">
        <input type="text"/>

    </div>
    <script>
        function AddEle() {
            //创建标签
            //将标签添加到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>

View Code

　　　　　　提交表单：

　　　　　　任何标签通过DOM都可提交表单

　　　　　　document.getElementById('f1').submit()　　

<body>
    <form id='f1' action="http://www.baidu.com">
        <input type="text"/>
        <input type="submit" value="提交"/>
        <a onclick="submitForm();" >提交</a>
    </form>
    <script>
        function submitForm(){
            document.getElementById('f1').submit();
        }
    </script>
</body>

View Code

　　　　　　其他：

　　　　　　console.log （）打印

　　　　　　alert（）　　　　弹窗

　　　　　　confirm()　　　　确认框

　　　　　　　　例子：

　　　　　　　　var v = confirm（‘提示信息’）

　　　　　　location.href　　　获取当前的URL也可以设置当前URL

　　　　　　　　例子：

　　　　　　　　location.href

　　　　　　　　location.href = 'http://www.baidu.com' #重定向

　　　　　　　　location.reload（） #刷新

　　　　　　setInterval(function(){}, 时间间隔)　　

　　　　　　　　#一直执行

　　　　　　　　var obj= setInterval( function(){

　　　　　　　　　　console.log(1);

　　　　　　　　　　clearInterval(obj);

　　　　　　　　},1000)

　　　　　　#只执行一次

　　　　　　setTimeout（function（）{

　　　　　　　　　　console.log('timeout'); //5秒后执行一次该操作

　　　　　　},5000）　　　　

　　　　　　clearTimeout（）//clearTimeout用法类似于clearInterval

　　　　　　事件：

　　　　　　onclick

　　　　　　onblur

　　　　　　onfocus

　　　　　　onmouseover：鼠标放在上面

　　　　　　onmouseout：鼠标移除

<body>
    <table border="1" width="300px">
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>1</td><td>2</td><td>3</td></tr>
    </table>
    <script>
        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就指向谁,这里是tr调用,所以this就指代第一 二 三个tr

            }
            myTrs[i].onmouseout = function(){
                this.style.backgroundColor = '';//这个this      谁调用这个函数,这个this就指向谁,这里是tr调用,所以this就指代第一 二 三个tr

            }
        }
    </script>
</body>

DOM1

　　　　　　绑定事件三种方式：

　　　　　　a. 直接标签绑定 onclick=‘xxx（）’

　　　　　　b. 先获取DOM对象，然后进行绑定

　　　　　　　　document.getElementById('xxx').onclick

　　　　　　　　this:当前触发事件的标签

　　　　　　c. 通过addEventListner

　　　　　　　　该方法有三个参数，分别是事件，匿名函数，（true|false）最后一个参数有两个选择，true代表capture，false代表冒泡法

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #main{
            background-color:red;
            width:300px;
            height:200px;
        }
        #content{
            background-color:pink;
            width: 150 px;
            height:100px;

        }
    </style>
</head>
<body>
    <div id="main">
        <div id="content"></div>
    </div>
    <script>
        var mymain = document.getElementById('main')
        mymain.addEventListener('click',function(){console.log('main')},false);
        var mycontent = document.getElementById('content')
        mycontent.addEventListener('click',function(){console.log('content')},false);
    </script>

</body>

冒泡

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #main{
            background-color:red;
            width:300px;
            height:200px;
        }
        #content{
            background-color:pink;
            width: 150 px;
            height:100px;

        }
    </style>
</head>
<body>
    <div id="main">
        <div id="content"></div>
    </div>
    <script>
        var mymain = document.getElementById('main')
        mymain.addEventListener('click',function(){console.log('main')},true);
        var mycontent = document.getElementById('content')
        mycontent.addEventListener('click',function(){console.log('content')},true);
    </script>

</body>

捕捉

　　　　词法分析：
　　　　首先会有一个活动对象 active object（ao）

　　　　1. 形式参数

　　　　2. 局部变量

　　　　3. 函数声明表达式

　　　　过程：

<script>
        function t1(age){
            console.log(age);
            var age = 27;
            console.log(age);
            function age(){};
            console.log(age);
        }
        t1(3)
    </script>

　　　　1.形式参数

　　　　 ao.age = undefine

　　　　实参为3，所以ao.age = 3

　　　　2. 局部变量声明：

　　　　　ao.age = undefine 局部变量声明时不做任何改变，所以没有被赋值

　　　　3.函数声明表达式：

　　　　　　ao.age = function()

　　　　词法分析后代码开始执行：

　　　　1、从ao上开始查找　age是function age（）　　

　　　　2、第二行开始被赋值为27

　　　　3、第三行是空函数

　　　　4、第四行打印还是27