美文网首页
Javascript基础

Javascript基础

作者: fdjiangwu | 来源:发表于2018-03-27 09:34 被阅读0次

    1.操作class时,由于class是保留字,所以需要替换未className。

    oDiv.className='text';
    

    2.getElementsByTagName
    该方法是动态方法,获取的节点会动态变化,在使用相应变量时再决定获取了多少个元素。返回类数组,有着数组类似的操作方法。可以在任意父元素下使用。

    var aLis = document.getElementsByTagName('li');
    console.log(aLis.length);
    console.log(aLis[0]);
    

    3.cssText
    提供操作元素style的便捷方式。请看下面的例子。

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>class操作</title>
            <style>
                #text {
                    border: 1px solid red;
                }
            </style>
        </head>
        <body>
            <div id="text">123</div>
            <input id="btn" type="button" value="按钮"/>
            <script>
                var text = document.getElementById('text');
                var btn = document.getElementById('btn');
                text.onclick = function () {
                    text.style.cssText = 'width: 100px; height: 100px;';
                };
                btn.onclick = function () {
                    text.style.cssText = 'width: 200px';
                };
            </script>
        </body>
    </html>
    

    4.自定义属性
    想要建立匹配或对应关系,就使用自定义属性。下面的例子为一个常见应用。

    var aInputs = document.getElementsByTagName('input');
    for (var i = 0; i < aInputs.length; i++) {
        aInputs[i].index = i;
        aInputs[i].onclick = function () {
            console.log(this.index);
        }
    }
    

    5.数据类型
    从typeof的角度上讲,javascript的数据类型有以下几种:

    Number(NaN)/String/Boolean/Undefined/Function/Object(null)
    

    注意,ES6新增了一种

    Symbol
    

    6.Number
    整体上尽量转

    Number('') //0
    Number('   ') //0
    Number(false) //0
    Number(true) //1
    Number([]) //0
    Number([1]) //1
    Number(['123']) //123
    Number({}) //NaN
    Number(null) //0
    Number(undefined) //NaN
    

    7.隐式转换
    Number/parseInt/parseFloat为显式转换。
    / % - * ++ --: 转为数字
    +:转为字符串
    < >:数字的比较 字符串的比较
    !: 取反(false 0 NaN '' null undefined)
    == ===:判断相等
    8.NaN

    typeof Number('a'); // 'number'
    NaN === NaN; // false
    

    isNaN()方法内置Number转换,凡是Number能转换的,都认为是数字,则isNaN返回false。
    9.作用域见视频
    10.false
    false, 0, NaN, '', undefined, null
    11.arguments
    实参的集合,类数组
    12.getComputedStyle/currentStyle
    getComputedStyle支持所有的标准浏览器(>IE8),currentStyle支持IE6/IE7/IE8。

    function getStyle(obj, attr) {
        return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, 250)[attr];
    }
    

    注意:1.不要用来获取复合样式;2.不要用来获取没有设置过的样式。
    13.字符串

    var str = 'javascript';
    str.length;
    str.charAt(0);
    str.charCodeAt(0);//(String.fromCharCode(22937))
    str.indexOf('java', 0);
    str.lastIndexOf('java', 0);
    /*
    1.若不传参或只传0,则默认全部截取;
    2.会大小交换位置;
    3.负数当0处理。
    */
    str.substring(start, end);
    /*
    1.若不传参或只传0,则默认全部截取;
    2.若start为负数,则从后往前处理。
    */
    str.substr(start, length);
    /*
    1.若不传参或只传0,则默认全部截取;
    2.不会大小交换位置;
    3.负数从后往前处理。
    */
    str.slice(start, end);
    str.toUpperCase();
    str.toLowerCase();
    /*
    1.若不传splitStr,则将原字符串转为length=1的数组;
    2.若splitStr=='',则将原字符串转为length=str.length的数组。
    */
    str.split(splitStr, [length]);
    

    相关文章

      网友评论

          本文标题:Javascript基础

          本文链接:https://www.haomeiwen.com/subject/bjcstftx.html