day16

CSS
    position
    background
    text-align
    margin
    padding
    font-size
    z-index
    over-flow
    :hover
    opacity
    float (clear:both)
    line-height
    border
    color
    display
   
    补充:页面布局
          主站—
                <div class='pg-header'>
                       <div style='980px;margin:0 auto;'>
                           内容自动居中
                       </div>
               
                </div>
                <div  class='pg-content'></div>
                <div  class='pg-footer'></div>
          后台管理布局:
            position:
                fiexd    -- 永远固定在窗口的某个位置
                relative -- 单独无意义
                absolute -- 第一次定位,可以在指定位置,滚轮滚动时,不在了。。。。
               
            a.
                左侧菜单跟随滚动条
            b.
                左侧以及上不不动   ******


JavaScript


    6、for循环
   
        for(var item in [11,22,33]){
            console.log(item);
            continue;
        }
       
        var arra = [11,22,32,3]
        for(var i=0;i<arra.lenght;i=i+1){
            break;
        }
       
        while(条件){
       
       
        }
    7、条件语句
   
        if(){
       
        }else if(){
       
        }else{
       
        }
       
        ==
        ===
       
        name='3';
       
  
        switch(name){
            case '1':
                age = 123;
                break;
            case '2':
                age = 456;
                break;
            default :
                age = 777;
        }
       
    8. 函数
        function func(arg){
       
            return arg+1
        }
        var result = func(1)
        console.log(result);
       
        普通函数:
            function func(){
               
            }
        匿名函数:
           
            function func(arg){
           
                return arg+1
            }
           
            setInterval("func()", 5000);
           
            setInterval(function(){
                console.log(123);
           
            },5000)
           
        自执行函数(创建函数并且自动执行):
            function func(arg){
                console.log(arg);
            }
            // func(1)
           
            (function(arg){
                console.log(arg);
            })(1)
    9、序列化
        JSON.stringify()   将对象转换为字符串
        JSON.parse()       将字符串转换为对象类型
       
    10、转义
        客户端(cookie)   =》 服务器端
        将数据经过转义后,保存在cookie
       
    11、eval
        python:
            val = eval(表达式)
                  exec(执行代码)
        JavaScript:
            eval
    12、时间
        Date类
       
        var d = new Date()
       
        d.getXXX  获取
        d.setXXX  设置
       
    13、作用域
        ================================ 1. 以函数作为作用域 (let)================================
       
        其他语言: 以代码块作为作用域
                    public void Func(){
                        if(1==1){
                            string name = 'Java';
                           
                        }
                        console.writeline(name);
                       
                    }
                    Func()
                    // 报错
                   
        Python:   以函数作为作用域
                    情况一:
                        def func():
                            if 1==1:
                                name = 'alex'
                            print(name)
                           
                        func()
                        // 成功
                    情况二:
                        def func():
                            if 1==1:
                                name = 'alex'
                            print(name)
                           
                        func()
                        print(name)
                        // 报错
               
        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
       
    14、JavaScript面向对象
       
        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 函数()
       
       
        Python的面向对象:
            class Foo:
                def __init__(self,name):
                    self.name = name
                   
                def sayName(self):
                    print(self.name)
                   
            obj1 = Foo('we')

            obj2 = Foo('wee')
       
      
        原型:
       
            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
    查找
        直接查找
            var obj = document.getElementById('i1')
        间接查找
            文件内容操作:
                innerText    仅文本
                innerHTML    全内容
                value
                    input    value获取当前标签中的值
                    select   获取选中的value值(selectedIndex)
                    textarea value获取当前标签中的值
               
                搜索框的示例
    操作:     
            样式操作:
                className
                classList
                    classList.add
                    classList.remove
                  
                  
                obj.style.fontSize = '16px';
                obj.style.backgroundColor = 'red';
                obj.style.color = "red"
               
               
            属性操作:
                attributes
                getAttribute
                removeAttribute
               
            创建标签,并添加到HTML中:
                a. 字符串形式
               
                b. 对象的方式
                    document.createElement('div')
               
               
            提交表单
                任何标签通过DOM都可提交表单
               
                document.geElementById('form').submit()
           
            其他:
                console.log()
                alert
                var v = confirm(信息)  v:true false
               
                location.href
                location.href = ""  # 重定向,跳转
                location.reload()   # 页面刷新
                location.href = location.href   < === > location.reload()
               
               
                var o1 = setInterval(function(){}, 5000)
                clearInterval(o1);
               
                var o2 = setTimeout(function(){}, 50000);
                clearTimeout(o2);
               
                var obj = setInterval(function(){
                   
                }, 5000)
               
                clearInterval(obj);
       
    事件:
        onclick,onblur,onfocus
       
        行为  样式  结构 相分离的页面?
        js    css   html 
       
        绑定事件两种方式:
            a. 直接标签绑定 onclick='xxx()'  onfocus
            b. 先获取Dom对象,然后进行绑定
                document.getElementById('xx').onclick
                document.getElementById('xx').onfocus
               
        this,当前触发事件的标签
            a. 第一种绑定方式
                <input id='i1' type='button' onclick='ClickOn(this)'>
               
                function ClickOn(self){
                    // self 当前点击的标签
                   
                }
            b. 第二种绑定方式
                <input id='i1' type='button' >
                document.getElementById('i1').onclick = function(){
               
                    // this 代指当前点击的标签
                }
           
               
        作用域示例:
                var myTrs = document.getElementsByTagName("tr");
                var len = myTrs.length;
                for(var i=0;i<len;i++){
                    // i=0,i=1,i=2
                    myTrs[i].onmouseover = function(){
                         this.style.backgroundColor = "red";
                    };

                }

原文地址:https://www.cnblogs.com/xiaopeng01/p/6100538.html