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='980px;margin:0 auto;'>
                           内容自动居中
                       </div>
                
                </div>
                <div  class='pg-content'></div>
                <div  class='pg-footer'></div>

View Code

（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; 50px;height: 50px;">返回顶部</div>-->
            <!--<div style="position: absolute;bottom:0;right:0; 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>

View Code

二、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{
        
        }

View Code

name='3';
        
   
        switch(name){
            case '1':
                age = 123;
                break;
            case '2':
                age = 456;
                break;
            default :
                age = 777;
        }

View Code

3、函数

（1）普通函数

查看完整代码

            function func(){
                
            }

View Code

（2）匿名函数

查看完整代码

function func(arg){
            
                return arg+1
            }
            
            setInterval("func()", 5000);
            
            setInterval(function(){
                console.log(123);
            
            },5000)

View Code

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

查看完整代码

function func(arg){
                console.log(arg);
            }
            // func(1)
            
            (function(arg){
                console.log(arg);
            })(1)

View Code

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

View Code

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

示例一：

查看完整代码

xo = "alex";
            
            function func(){
                // var xo = 'eric';
                function inner(){
                    // var xo = 'tony';
                    console.log(xo);
                }
                
                inner()
            }
            
            func()

View Code

示例二：

查看完整代码

xo = "alex";
            
            function func(){
                var xo = 'eric';
                function inner(){
                    
                    console.log(xo);
                }
                
                return inner;
            }
            
            var ret = func()
            ret()

View Code

示例三：

查看完整代码

xo = "alex";
            
            function func(){
                var xo = 'eric';
                function inner(){
                    
                    console.log(xo);
                }
                var xo = 'tony';
                
                return inner;
            }
            
            var ret = func()
            ret()

View Code

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

查看完整代码

function func(){
            console.log(xxoo);
        }
        
        func();
        // 程序直接报错
        
        function func(){
            console.log(xxoo);
            var xxoo = 'alex';
        }
        解释过程中：var xxoo;
        
        func();
        // undefined

View Code

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

View Code

原型：

查看完整代码

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

View Code

三、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

相关阅读:
【Cookie】java.lang.IllegalArgumentException An invalid character [32] was present in the Cookie value
【会话技术】Cookie技术案例：访问时间
 进程池
 管道和Manager模块(进程之间的共享内容)
队列
 锁Lock,信号量Semaphore,事件机制Event
multiprocess模块
 进程
 reduce
struct模块
原文地址：https://www.cnblogs.com/manger/p/6100427.html

Css、javascript、dom(二)

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

1、常用标签

2、两种页面布局

（1）主站

（2）后台管理布局

二、js回顾及补充

1、for循环的两种写法

2、条件语句的写法

3、函数

（1）普通函数

（2）匿名函数

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

4、序列化

5、转义

6、eval

7、时间

8、作用域

（1）函数作为作用域

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

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

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

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

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

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

9、JavaScript面向对象

三、DOM

1、查找

直接查找

间接查找

2、操作：

（1）样式操作：

(2)属性操作:

　　（1）函数作为作用域

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

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

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

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

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

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

　　直接查找

　　间接查找

　（1）样式操作：

　　(2)属性操作: