js+dom开发第十六天

时间：2023-03-09 17:50:51
js+dom开发第十六天

一、css常用标签及页面布局

1、常用标签

　　position(定位)　z-index（定位多层顺序）　background（背景）　

　　text-align（针对字符自动左右居中）　　margin（外边距）　　padding（内边距）

　　font-size（字体大小）　　over-flow（修剪hidden，srcoll，auto）　　

　　:hover（设置对象在鼠标悬停时的样式）　　opacity（页面透明度）　　

　　float（让标签浮动起来）　　clear：both（让浮动标签沉下来）　　line-height(上下居中)

　　border（边框）　　color（字体颜色）　　display（设置或检索对象是否及如何显示）

2、两种页面布局

（1）主站

                <div class='pg-header'>

                       <div style='width:980px;margin:0 auto;'>

                           内容自动居中

                       </div>

                </div>

                <div  class='pg-content'></div>

                <div  class='pg-footer'></div>

（2）后台管理布局

　　position：

　　　　　　fiexd 　　　　--永远固定在窗口的某个位置

　　　　　　relative　　　--单独无意义

　　　　　　absolute　　--第一次定位，可以在指定的位置；滚轮滚动时，就变了

　　a、左侧菜单跟随滚动条

　　b、左侧及以上不动

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet"  href="font-awesome-4.7.0/css/font-awesome.min.css"/>

    <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: #204982;

            text-align: center;

        }

        .pg-header .icons{

            padding: 0 20px;

        }

        .pg-header .icons:hover{

            background-color: #204982;

        }

        .pg-header .user{

            margin-right: 60px;

            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: 0;

            background-color: white;

            color: black;

            width: 160px;

            display: none;

            font-size: 14px;

            line-height: 30px;

        }

        .pg-header .user .b a{

            padding: 5px;

            color: black;

            text-decoration: none;

        }

        .pg-header .user .b a:hover{

            background-color: #dddddd;

        }

        .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 href="#">我的资料</a>

                <a href="#">注销</a>

            </div>

        </div>

        <div class="icons right">

            <i class="fa fa-commenting-o" aria-hidden="true"></i>

            <span>5 </span>

        </div>

        <div class="icons right">

            <i class="fa fa-bell-o" aria-hidden="true"></i>

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

二、js回顾及补充

1、for循环的两种写法

        for(var item in [11,22,33]){

            console.log(item);

            continue;

        }

item

        var arra = [11,22,32,3]

        for(var i=0;i<arra.lenght;i=i+1){

            break;

        }

        while(条件){

        }

for i

2、条件语句的写法

        if(){

        }else if(){

        }else{

        }
        name='3';

        switch(name){

            case '1':

                age = 123;

                break;

            case '2':

                age = 456;

                break;

            default :

                age = 777;

        }

3、函数

（1）普通函数

            function func(){

            }

（2）匿名函数

            function func(arg){

                return arg+1

            }

            setInterval("func()", 5000);

            setInterval(function(){

                console.log(123);

            },5000)

（3）自执行函数（创建函数并且自动执行）

            function func(arg){

                console.log(arg);

            }

            // func(1)

            (function(arg){

                console.log(arg);

            })(1)

4、序列化

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

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

5、转义

　　客户端（cookie）　　=》 服务器

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

　　js+dom开发第十六天

6、eval

　　python的eval：

　　　　　　　　val = eval（表达式）

　　　　　　　　val = exec（执行代码）

　　JavaScript：

　　　　　　　　eval包含上面的两种功能

7、时间

　　Date类

　　var d = new Date（）

　　d.getXXX　　获取时间

　　d.setXXX　　设置时间

8、作用域******

　　（1）函数作为作用域

　　a、其他语言：以代码块作为作用域　　　　　　　　

　　　　　　public void Func(){
　　　　　　　　if(1==1){
　　　　　　　　　　string name = 'Java';
　　　　　　　　　　}
　　　　　　　　console.writeline(name);
　　　　　　　}
　　　　　　　Func()
　// 报错 这里以{}为代码块，name在另一个{}，里外面的console.writeline(name)调用不了

　　　b、Python：以函数作为作用域

　　　　情况一：

　　　　　　　def func():
　　　　　　　　　　if 1==1:
　　　　　　　　　　　　name = 'alex'
　　　　　　　　　　print(name) #这个name是在func函数里的
　　　　　　　func()
　　　　　　　　// 成功

　　　　情况二：　　　　　　　　

　　　　　　　  def func():
　　　　　　　　　　if 1==1:
　　　　　　　　　　　　name = 'alex'
　　　　　　　　func()
　　　　　　　　print(name) #这里的name是拿不到函数func里的name的
　　　　　　　　// 报错

　　　　　c、JavaScript：默认是以函数作为作用域的　　　　　　　

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

　　(2)函数的作用域在函数未被调用之前已经创建

        function func(){

            if(1==1){

                var name = 'alex';

            }

            console.log(name);

        }

　　(3)函数的作用域存在作用域链（函数嵌套关系），并且也是在未被调用前创建

示例一：

            xo = "alex";

            function func(){

                // var xo = 'eric';

                function inner(){

                    // var xo = 'tony';

                    console.log(xo);

                }

                inner()

            }

            func()

示例二：

            xo = "alex";

            function func(){

                var xo = 'eric';

                function inner(){

                    console.log(xo);

                }

                return inner;

            }

            var ret = func()

            ret()

示例三：

            xo = "alex";

            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 = 'alex';

        }

        解释过程中：var xxoo;

        func();

        // undefined

9、JavaScript面向对象

            function foo(){

                var xo = 'alex';

            }

            foo()

            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()

            ==============》

                a. this代指对象(python self)

                b. 创建对象时, new 函数()

原型：

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

三、DOM

1、查找

　　（1）直接查找

　　　　var obj = document.getElementById('i1')

　　（2）间接查找

　　　　文件内容操作：

　　　　　　A：innerText　　获取的仅文本（忽略标签）

　　　　　　如下图：

　　　　　　js+dom开发第十六天

　　　　　　B：innerHTML　　全内容（内部所用的东西）

　　　　　　　　如下图：

　　　　　　js+dom开发第十六天

　　　　　　C：value

　　　　　　　　　　input标签  value获取当前标签中的值

　　　　　　　　　　js+dom开发第十六天

　　　　　　　　　　select标签　　获取选中的value值（selectIndex）

　　　　　　　　　　

　　　　　　　　　　textarea标签　　value获取当前标签中的值

2、操作：

　（1）样式操作：

　　className

　　classList

　　　　　　　classList.add　　classList.remove

　(2)属性操作:

　　　　attributes　　getAttibute　　removeAttribute

　　

相关文章