Css、javascript、dom(二)

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

1、常用标签

　　position(定位)　

　　z-index（定位多层顺序）　

　　background（背景）　　

　　margin（外边距）　　

　　padding（内边距）

　　font-size（字体大小）　　

　　over-flow（修剪hidden，srcoll，auto）　　

　　:hover（设置对象在鼠标悬停时的样式）　　

　　opacity（页面透明度）　　

　　float（让标签浮动起来）　　

　　clear：both（让浮动标签沉下来）　

　　text-align（针对字符自动左右居中）　

　　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;
        }

for 1

var arra = [11,22,32,3]
        for(var i=0;i<arra.lenght;i=i+1){
            break;
        }
 
        while(条件){
 
        }
 
for i

for 2

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

代码示例：

URL = "https://www.google.co.jp/search?q=理解"

"https://www.google.co.jp/search?q=理解"

URL

"https://www.google.co.jp/search?q=理解"

encodeURI(URL)

"https://www.google.co.jp/search?q=%E7%90%86%E8%A7%A3"

newurl=encodeURI(URL)

"https://www.google.co.jp/search?q=%E7%90%86%E8%A7%A3"

newurl

"https://www.google.co.jp/search?q=%E7%90%86%E8%A7%A3"

decodeURI(newurl)

"https://www.google.co.jp/search?q=理解"

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、查找

　　直接查找

　　　　var obj = document.getElementById('i1')

　　间接查找

　　　　文件内容操作：

　　　　　　innerText　　仅文本

　　　　　　innerHTML　　全内容

　　　　　　value

　　　　　　　　　　input value获取当前标签中的值

　　　　　　　　　　select　　获取选中的value值（selectIndex）

　　　　　　　　　　textarea　　value获取当前标签中的值

2、操作：

　（1）样式操作：

　　className

　　classList

　　　　　　　classList.add　　classList.remove

　　(2)属性操作:

　　　　attributes　　getAttibute　　removeAttribute