Python学习笔记第十六周

时间：2023-03-09 08:02:32
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>

　　      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>

　　　　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>

　　　　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>

　　　　小练习：

　　　　鼠标放上去的时候，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>

　　　　后台管理：头部布局

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

　　　　备注：小图标网址  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>

例子：小图标增加，同时在小图标旁边通过调整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>

　　二、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='请输入关键字’ 来完成该操作

 <body>

     <div style="width:600px;margin:0 auto">

         <input id='i1' onfocus="Focus();"  onblur="Blur();" value="请输入关键字" type="text" />

     </div>

     <script>

         function Focus(){

             console.log(1);

             var tag = document.getElementById('i1');

             var val = tag.value;

             if(val === '请输入关键字'){

                 tag.value = ''

             }

         }

         function Blur(){

             console.log(2);

             var tag = document.getElementById('i1');

             var val = tag.value;

             if(val.length === 0){

                 tag.value = '请输入关键字';

             }

         }

     </script>

 </body>

　　　　

　　　　　样式操作：

　　　　　　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>

　　　　备注：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>

　　　　　　提交表单：

　　　　　　任何标签通过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>

　　　　　　

　　　　　　其他：

　　　　　　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

　　　　

　　　　

相关文章