zoukankan      html  css  js  c++  java

  • 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

    　　　　

    　　　　
  • 相关阅读:
    SpringCloud-服务注册与实现-Eureka创建服务注册中心(附源码下载)
    SpringCloud -创建统一的依赖管理
    Mysql、Oracle、SQLServer等数据库参考文档免费分享下载
    DevExpress的图形按钮菜单栏控件WindowsUIButtonPanel的布局、使用和设置按钮的点击事件
    Winform中设置ZedGraph鼠标滚轮缩放的灵敏度以及设置滚轮缩放的方式(鼠标焦点为中心还是图形中心点)
    Winform中设置多条Y轴时新增的Y轴刻度不显示问题解决
    Winforn中设置ZedGraoh的GraphPane恢复到初始比例大小
    Winform中设置ZedGraph多条Y轴时与多条曲线一一对应
    Winform中设置ZedGraph多条Y轴时坐标轴左右显示设置
    一、关于a标签伪类中的visited不起作用问题
  • 原文地址：https://www.cnblogs.com/xiaopi-python/p/6934215.html
Copyright © 2011-2022 走看看