web基础2

HTML    标签 属性    <!-- aaa -->    标签分类        自闭合标签            <meta charset="UTF-8"/>            <link>        主动闭合            <title>$Title$</title>    各类符号        &nbsp;&gt;&lt;        www.cnblogs.com/web-d/archive/2010/04/16/1713298.html    20标签        html        head        body        p  段落，每一个标签之间有空行        br 换行，没有间距        h1-h6 标题        span  行内标签，白板，        div   块级标签，白板， id, style='height:600px;'        input type=text/password/button/submit  value=登录 name='xxx'/'query'自闭合  行内标签        from  action='url' method='GET/POST'        input type='radio' name='name同样互斥' value='xx'  checked='checked'        input type='checkbox' name='name相同，key相同发送时在一块儿', value='xx', checked='checked'        input type='file' name='filename'        from enctype='multipart/form-data'        input type="reset" value='重置'        textarea name='xx' 非自闭合，默认值写中间        select name='classify' size=10(默认为1) multiple='multiple'            option value='xxx' selected='selected' xxx /option            optgroup label='xxxx'        a a标签，href='url' target='_blank 跳转  行内标签            锚，href='#id3            img src='path/*.jpg' style='height:200px;width:200px;' alt='xxx' title='girl'        ul 符号            li xxx /li            li xxx /li        /ul        ol 序号            li xxx /li            li xxx /li        /ol        dl 分层            dt xxx /dt  标题            dd xxx /dd  内容        /dl        table 表格 border = 1 边框            thead/ 表头/            tr 行                th 列 /th            tbody/  表内容/            tr 行                td 列 /td  colspan='2' rowspan='2'        label 用户名 /label for='username'与input标签id=username关联        fieldset            legend 登录 /legend        /fieldsetCSS    颜色 RGB    位置    style='backgroud-color:#2459a2;'    style='height:48px;'    style='width:48px;'    style=''    style=''    style=''    style=''    CSS样式  / CSS文件        -id选择器        -class选择器        -div标签选择器        -关联选择器/层级选择器        -组合选择器        -属性选择器    link rel='stylesheet' href='commons.css'    注释        /*  */    边框        border='1' solid:red dotted red            border-top-color            border-top-style            border-top-width            border-right-color/style/width            border-bottom-color/style/width            border-left-color/style/width    背景色        background-color    float        float:left        div style='clear: both;'    display 行内标签转换， 行内标签没法设置 高度/宽度/边距margin        display:inline/block        display:inline-block        display:none 标签消失    padding margin(0,auto)  内边距 外边距        body margin:0 auto        margin-top:1px  外边到top的距离        padding-top:1px  内部到top的距离    text-align        text-align:center 内容水平居中        vertical-align:middle 上下居中    height,width,line-height,color,font-size,font-weight        line-height:48px 上下左右范围内水平居中，垂直方向        font-weight: bold 加粗        font-size：48px 字体大小        color： 字体颜色    自适应        定义小于xx px , 使用其余样式        media    页面变形        外层div限制像素宽度，内层定义百分比        小于像素宽度，会出现滚动条    position        <div style='width:50px;height:50px;position:fixed;right:0px;top:1px;bottom:1px;'></div>        absolute 绝对位置，不能随网页移动，通常和relative一块儿使用时，相对于父类标签的固定位置            <div style='position:relative;'>                <div style='position:absolute;top:0;left:0;'></div>            </div>    opacity:0.5 透明度（0-1）    z-index:10 分层次优先级         <div style='z-index:10;position:fixed;top:50%;bottom:50%;left:50%;right:50%;margin-left:-200px;margin-top:-200px;'>    overflow 图片超过div隐藏或滚动条        <div style='height:200px;width:300px;overflow:auto/hidden'>            <img src='1.jpg'>        </div>    hover 当鼠标移动到标签上时生效        background-color:blue    background        background-image:url('image/4.jpg');若是div大于图片，默认图片重复置放        background-repeat:no-repeat/repeat-x/repeat-y 不堆叠/横向/纵向        background-position-x/y:10px;请求头/请求体get方法，打包成一个字典提交submit    数据拼接到URL中发送post方法    数据放到内容发送javascript基本语法    IE是JS的解释器，代码存在于HTML中    执行顺序先执行head,后执行body的JS    //    /*  */    <script src='commons.js'> #连接外部文件    <script type='text/javascript'>        function func(){            func..        }        alert(123)    </script>    www.cnblogs.com/wupeiqi/articles/5602773.html    变量        全局变量 name = 'xx'        局部变量 var name = 'xx'    基本数据类型        数字            age = 18;            parseInt(string)            parseFloat(string)        字符串            x.charAt() #根据索引取值            x.substring(1,4) 1-3字符            x.length  总长度            x.trim()            x.concat(y) # 拼接            x.indexof('le')   #返回            x.slice(start,end) 切片            x.toLowerCase()            x.toUpperCase()            x.split()            x.search(regexp)            x.match(regexp)            x.replace(regexp,replacement)            setInterval("",2000); 每2秒执行''内容  定时器            console.log(xx)            tag = document.getElementById("i1")  # id值            content = tag.innerText            f = content.charAt(0)            l = content.substring(1,content.length)            new_content = l + f            tag.innerText = new_content        布尔boolean           true/false        数组            a=[11,22,33]            length            push(xx)  #尾部追加            pop()   #尾部获取一个            unshift(xx)  # 头部插入            shift(xx)   # 头部移除            splice(start,deleteCount,value,...) 起始位置，删除个数，插入的值            slice()  #切片            reverse() #反转            join(sep) #            concat(val,...)            sort()        字典(对象类型)            a ={'k1':'v1',"k2":"v2"}    for循环        1，循环索引        a=[11,22,33] / 字典        for(var item in a){            console.log(a[item])                    }        2，            for(var i=0;i<10;i++){                ...                break;                continue;            }        3, while (codition){               ...        }    条件 ==  !=  === #值和类型都相等 !== #严格比较  && ||        if(){            ....        }        else if(){        }        else{        }        switch(name){            case: '1':                console.log(123);                break;            case: '2':                console.log(456);                break;            ...            default:                console,log(999);        }    函数：        function func(arg){            return arg+1        }        匿名函数：            setInterval(function(){                console.log(123)            },5000)        自执行函数：            (function(arg){                console.log(arg)            }(1)    序列化：        JSON.stringify(list1)        JSON.parse(string1)    转义：cookies  服务端发来的字符串，确认以前的登录状态        decodeURI( )                   URl中未转义的字符        decodeURIComponent( )           URI组件中的未转义字符        encodeURI( )                   URI中的转义字符        encodeURIComponent( )             转义URI组件中的字符        escape( )                         对字符串转义        unescape( )                     给转义字符串解码        URIError                         由URl的编码和解码方法抛出    eval:        val = eval(表达式'1+1')        exec(执行代码，解释代码if,for,...)        eval = eval + exec    时间        Date类        var d = new Date() 时间对象        d 为当前时间        d.get...()        n = d.getMinutes() + 4        d.setMinutes(n)    做用域：        JS默认以函数做为做用域        函数的做用域，在函数未调用前，就已经建立        函数的做用域存在做用域链，而且也在做用域以前建立        xo = 'alex'        function func(){            var xo = 'eric'            function inner(){                var xo = 'tony'                console.log(xo)            }            inner()        }        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()        JS函数内部局部变量提早声明        function func(){            console.log(xxoo)            var xxoo = 'alex'        }        func()  # 输出undefined        面向对象：            function Foo(n){                this.name = n;                this.sayName = function(){                    console.log(this.name);                }            }            # Foo的原型            Foo:prototype = {                'sayName': function(){                    console.log(this.name)                }            }            var obj = new foo('we');            obj.name            obj.sayName()            this代指对象（python self)            建立对象时用new关键字 函数（）    DOM        HTML的文档对象        document.getElementById()      # 当个元素        document.getElementsByTagName()  # 经过标签，数组多个元素        document.getElementsByClassName() # 经过class属性        document.getElementsByName()   # 经过name属性        间接查找            tag = document.getElementById()            tag.parentElement   # 父标签            tag.children        # 全部子标签            tag.firstElementChild  # 第一个子标签            tag.lastElementChild   #最后一个子标签            tag.nextElementSibling  # 下一个兄弟标签            tag.previousElementSibling # 上一个兄弟标签        标签.innerText  / =  # 获取（只获取文本）/修改            obj innerText = <a href='#'>百度</a> 已字符串的形式修改        标签.innerHTML  获取的是所有内容            obj innerHTML = <a href='#'>百度</a>        标签.value            input/select/textarea标签生效， 获取选中的value值        标签.selectIndex            select标签的索引操做        样式操做：        tag.className = 'c1'  #tag标签的className = 'c1'        tag.classList  # 返回class列表        tag.classList.add()  # 添加class指定样式        tag.classList.remove() # 删除class指定样式        修改当个样式        tag.style.fontSize = '16px';        tag = document.getElementById("test")//checkbox.checked        tag.checked = true/false        <div onclick="func();">点我</div>        <script>            function func(){                ....            }        </script>        属性操做        obj.setAttribute('xxx','alex')        obj.removeAttribute('xxx')        obj.attributes        建立标签到HTML中        <input type='button' onclick='AddEle():' value="+"/>        <input type='button' onclick='AddEle2():' value="+"/>        <div id='i1>            <input type='text' />        </div>        <script>            function AddEle(){                //建立标签                //将标签添加到i1里面                var tag = '<p><input type='text' /></p>                //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'                document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);            }        </script>        <script> # 第二种方式            function AddEle2(){                var tag = document.createElement('input');                tag.setAttribute('type','text');                tag.style.fontSize ='16px';                tag.style.color = 'red';                document.getElementById('i1').appendChild(tag);            }        </script>    提交表单        <form id='f1' action="http://www.oldboyedu.com">            <input type='text' />            <input type='submit' value='提交' />            <a onclick="submitForm():">提交吧</a>  # 任何标签均可以经过DOM提交表单        </form>        <script>            function submitForm(){                document.getElementById('f1').submit()            }    其余        console.log  输出        alert    弹窗        confirm  确认返回true , 取消返回false        location.href  # 获取当前url ， 也能够赋值        location.reload()        obj = setInterval(func(),5000ms)  # 定时器        clearInterval(obj);        setTimeout(function() {            console.log('timeout')        },5000)  #定时器只执行一次,显示log5秒        clearTimeout(obj)    事件        onclick        onblur        onfocus        行为 样式 结构 分离？        onmouseover='t1(0)  # 鼠标移入        onmouseout='t2(0)''   # 鼠标移出        <script>            var myTrs = doucument.getElementByTagName('tr');            var len = myTrs.length;            for(var i=0;i<len;i++){                myTrs[i].onmouseover = function(){                    this.style.backgroundColor = 'red';                }                myTrs[i].onmouseout = function(){                    this.style.backgroundColor = '';                }            }            function t1(n){                var mtTrs = document.getElementsByTagName('tr')[n];                mtTrs.style.backgroundColor = 'red';            }            function t2(n){                var mtTrs = document.getElementsByTagName('tr')[n];                mtTrs.style.backgroundColor = '';            }        </script>