美文网首页
js一些基础知识1

js一些基础知识1

作者: 前端_凯伦 | 来源:发表于2016-12-14 19:07 被阅读0次
    1、第一个JS程序:
         onclick="alert(1);"
         on     当....的时候
         click      点击
         alert      弹
    
    事件:用户的操作
        onclick  用户点击
        鼠标移入事件
        鼠标移出事件
    
    2、onclick="div1.style.display='block';"

    div1: 一个div的id 这句话的意思:点击的时候,把id为div1的元素的style的display设置为block -- 显示 这种写法不符合 w3c 标准 符合标准的写法是:

    document.getElementById('div1').style.display='block'; 
    各部分的含义:
    document    文档(整个页面)
    get         获取
    Element     元素
    By          通过/用...
    Id          id
    连起来:通过id获取一个元素
    .   的
    =   赋值
    
    3、不仅可以修改display还可以修改,
    如:width,height,background
    JS修改样式时, html/css中怎么写,JS中就怎么写,但, class --> className
    
    4、事件只能给按钮吗?答: 事件可以加给任何标签
    5、

    鼠标移入事件: onmouseover 鼠标移出事件: onmouseout

    6、函数
    定义函数
    function 函数名(){
    //要执行的语句
    }
    
    使用函数
    函数名();
    
     <script>
        window.onload = function(){
            var oBtn = document.getElementById('btn1');
            oBtn.onclick = show;
    
            function show(){
                alert(1);
            }
        };
    </script>
    
    <body>
    <input type="button" value="按钮" id="btn1">
    </body>
    
    7、css写在style里,js写在script标签里
    8、变量:起外号
    语法:var 变量名=值;
    可以完全替代!
    

    9、
    第一个函数toBig里定义了 oDiv,但在第二个函数里没定义,可以直接使用 × --像两个城市中的人

    10、换肤
    三种方式:
    1)硬换 设置每个style
    2)更换样式文件 link √
    
    3)用className替换class
    <style>
        .div1{
            width: 100px;
            height: 100px;
            background:red;
        }
        .div2{
            width: 200px;
            height: 200px;
            background:green;
        }
    </style>
    <script>
        function changeColor(){
            var oDiv = document.getElementById('div8');
            oDiv.className='div2';
        }
    </script>
    
    <body>
    <input type="button" value="换肤" onclick="changeColor();">
    <div id="div8" class="div1" ></div>
    </body>
    
    
    都有哪些标签可以加ID?*任何标签都能加ID
    
    标签上哪些属性可以修改?*标签上的任何属性都能修改 style,href
    
    11、获取body简写 document.body
    12、注释的方法
    单行 一行开头用 //
    多行 用/* */
    
    13、条件判断 语句
    语法:
    if (条件){
    //条件成立时要执行的语句
    }
    else{
    //条件不成立时要执行的语句
    }
    
    14、javascript中
    分号的使用:单独一句话,带赋值的
    空格的使用:操作符两边
    大括号的使用:第一个跟行,第二个换行--建议
    
    15、变量和字符串
    a 'a'
    *变量是可变的;
    *变量没有单引号,字符串有单引号(建议用单引号)
    
    16、函数参数,函数传参
    函数定义:
    function 函数名(参数1,参数2...){
      语句;
      使用参数
    }
    
    调用:
    函数名(1,'a'..);
    
    *定义函数中的-参数,只是占位
    *参数的个数根据需求来定
    *什么时候用传参? 当函数中有可变的东西,就可以用传参
    
    17、操作属性的方式
    1) . ‘的’,可以操作属性
    2)[] 也可以操作属性
    区别: . 不可以用变量,[]可以用变量
    点可以做到的,方括号一定能做到
    方括号能做到的,点不一定能做到
    

    18、三者分离是指:行为 表现 结构 三者分离

    分别对应:行为-JS 表现-CSS 结构-HTML

    19、再看函数
    有名字的
    没名字的叫 (匿名函数)
    特点
    不可重复利用
    如果多次调用,重复利用,需要用有名字的函数
    
    20、页面加载顺序:html,css,js

    加载完成做的事,代码放在 window.onload 里

    21、以后写JS:
    1)window.onload
    2)获取元素
    3)加事件
    
    22、循环:重复做一件事情,操作一组元素

    普遍特点:初始值--条件--语句--改条件

    23、while循环:
    初始值;
    while(条件){
     要重复做的事情
    
     改变条件
    
    }
    

    24、for 循环

    for(初始值;条件;改变条件){
    语句
    }
    
    25、用于条件的几个符号:
    = 赋值(这个不是用于条件的:)
    == 比较相等
    
    >= 大于等于
    
    <= 小于等于
    
    26、设置复选框的选中状态:

    oChk.checked = true;//false

    27、i值问题:循环里面加事件了,事件里面的 i 不能用了
    28、this:当前发生事件的元素(对象)
    29、点一组DIV,当前的变色,需要两件事(两步)
    1)让他们都变成默认色
    2)让自己变成要求的色
    

    30、选项卡重用,使用onload法 31、表单元素的值: 用value 获取;非表单元素的内容: 用 innerHTML 获取 32、字符串连接:两撇两加加内容 33、控制优先级,用 括号 () 34、数组:一组数的集合 定义: var 数组名= [元素1,元素2....];

    35、调试:
    chrome:F12
    firefox:firebug
    IE:禁用脚本调试
    软调试:程序手段
    1)alert(有用的东西);
    2)console.log(要显示的东西);
    3)document.write(要显示的东西);
    
    36、数据类型:
    typeof(x); //测试x的数据类型
    
    1)number        数字类型
    2)string        字符串类型
    3)function  函数类型
    4)boolean       布尔类型(true,false)
    5)object        对象类型
    6)undefined 未定义
    -------------------------------
    typeof null --object
    typeof undefined -- undefined
    typeof NaN --number
    var str='332efg'; typeof str++ number// 因为 str++ 是 NaN
    --------------------------------
    null == undefined? -- true
    NaN == NaN? --false
    
    37、undefined:

    1)真的没定义(报错 is not defined) 2)定义了,但是没有给东西(没有赋值)

    38、JS中,变量本身没有类型,其类型取决于存的是什么东西
    39、数据类型转换
     显式转化(强制转化):
     parseInt()
     12 -> 12
     12.5 -> 12
     12abc -> 12
     abc -> NaN
     从左边开始查看 看见第一个不是数字的就停
     如果第一个不是数字 返回一个NaN
     parseFloat()
     12 -> 12
     12.5 -> 12.5
     12abc-> 12
     12.5abc ->12.5
     abc->NaN
     从左往右看 看见一个不是数字的停 看见点也会继续看
     如果第一个不是数字 返回NaN
     Number()
     12->12
     12.5->12.5
     12abc-> NaN
     abc->NaN
     看见不是数字的 整体返回NaN
     
     *NaN not a number
    
     1.typeof(NaN) number
     2.NaN跟任何东西都不相等 包括他本身
     3.isNaN 可以检测是不是NaN 是就返回一个true 不是就返回false
     隐式转化
     计算机偷偷的给转化了
    

    40、函数里定义变量,不能在函数外访问 41、局部变量:只能在函数内部使用; 全局变量:在哪里都可以使用 42、闭包:子函数可以使用父函数的局部变量 43、如果函数内部的变量和全局同名,不会覆盖,会 遮蔽 44、命名规范:易交流、大家都能看明白 匈牙利命名法: a)类型前缀 b)首字母大写

    46、运算符:优先级控制 --> ()
    算术运算符:+ - * / %
    0%6=?
    赋值运算:= += -= /= *= %=
    比较运算:== < <= > >= 
    !=  不等
    ===     严格的比较,是不是相等,先比较类型
    !== 严格的比较,是不是不相等
    逻辑运算:与 或 非
    || 或者 只要一个成立,则为真
    && 并且    全部成立,则为真
    ! 非 反过来```
    #####47、if扩展: 
    ```if(){}
    if(){}
    else if(){}
    else if(){}
    else{}```
    #####48、switch:
    ```switch(值){
    case 值1:
    语句;
    break;
    ......
    default:
    语句;
    }```
    #####49、
    

    break:中断,在循环中,中断整个循环
    continue:继续 -- 跳出当次循环,继续走```

    50、简写,降低可读性
    1)if 简写 
    a==12 && alert(a);
    
    可读性很差,非常的条件,一目了然的,可以考虑用一点
    
    2)if else 简写
    三目运算: 条件?为真时执行:为假时执行;
    3)一句时,省略大括号,不建议使用
    if(..) alert(1);```
    ``51、真:非0数字 , 非空字符串,非空对象
    52、假:0,空字符串 , null(空对象), undefined,NaN``
    ######53、获取样式:
    

    obj.style.xxx 行间样式
    获取非行间样式(获取计算后的样式-生效的样式):
    getComputedStyle(谁,false).样式; //IE9+,FF,chrome
    obj.currentStyle.xxx;//兼容整个IE,在ff,chrome下,是 undefined
    处理兼容性:
    if (oDiv.currentStyle){
    alert(oDiv.currentStyle.width);

    }else{

    alert(getComputedStyle(oDiv,false).width);

    }

    #####54、随机数
    

    随机数: Math.random() 0-1之间的随机数,包括0,不包括1
    n到m间的随机整数:
    parseInt(Math.random()*(m-n))+n;```
    55、eval: eval('字符串') --把字符串解析成JS能理解的程序 --不要用

    56、函数返回值
    函数返回值:return 返回值; 返回给调用者,谁调用就返回给谁
    能返回什么? 只要你愿意,什么都可以返回
    
    随机数封装:
    function rnd(n,m){return parseInt(Math.random()*(m-n))+n;}
    
    示例1:
    function show(){alert(1);}
    alert(show); //没有调用,show是什么?是函数? 弹出函数定义的内容 function show(){alert(1);}
    接上: var b = show(); alert(b); //alert(1); undefined
    接上:
    function show2(c){
      alert('show2');
      alert(c());
      return function(){
      alert('show2里的匿名函数');
    }
    }
    alert(show2(show)()); //show2 1 undefined show2里的匿名函数 undefined ```
    #####57、双色球
    

    <script>
    function rnd(n,m){
    return parseInt(Math.random() * (m - n) ) + n;
    }
    //在一个数组中找一个数是否存在
    function findInArray(n,arr){
    for(var i = 0; i<arr.length;i++){
    if (n == arr[i]){
    return true;
    }
    }
    return false;
    }
    var arr = [];
    while(arr.length < 6){
    var n = rnd(1,34);
    if (!findInArray(n,arr)){
    arr.push(n);
    }
    }
    document.write(arr);
    </script>```

    58、return 深入
    *return 之后,代码就不执行了
    *如果一个函数没有写return,默认返回undefined,写return了,
    但是没有东西,也是undefined```
    #####59、undefined出现的情况:
    

    1)函数没有写return,返回undefined
    2)没有定义也没有赋值变量 (报错:is not defined,报错 和 undefined不一样)
    3)定义了变量,但是没有赋值 //var a; alert(a); 函数的参数相当于局部变量,
    不传时undefined
    4)访问一个不存在属性```

    60、定时器
    定时器 setInterval(函数,时间); --函数不带括号,每隔 时间 执行
    清除:clearInterval(定时器名称)
    秒表应用:
    <script>
        //变成两位数
        function toDou(n){
            return n < 10 ? '0'+n : ''+n;
        }
        window.onload = function(){
            var oBtn = document.getElementById('btn1');
            var oBtn2 = document.getElementById('btn2');
            var oT = document.getElementById('t1');
    
            var timer;
    
            oBtn.onclick = function(){
                clearInterval(timer);
                timer = setInterval(show,1000);
                var n = 0;
                show();
                function show(){
                    n++;
                    oT.value = toDou(parseInt(n / 60)) + ':'+ toDou(n%60);
                }
            };
            oBtn2.onclick = function(){
                //清定时器
                clearInterval(timer);
            };
        };
    </script>
    
    <body>
    <input type="text" id="t1" value="0">
    <input type="button" value="开始" id="btn1">
    <input type="button" value="停止" id="btn2">
    </body>
    1)补0(变两位)
    function toDou(n){return n<10?'0'+n:''+n;}
    
    2)刚开始卡一下
    提取出函数,执行一次
    
    3)多点几次,变快了
    *原则:定时器要先清除,再打开
    
    61、另一个定时器setTimeout
    setInterval 一直执行,连续不断的
    setTimeout  只执行一次
    setTimeout(函数名,时间)
    清除:clearTimeout();```
    #####62、判断整数(parseInt(oT.value)==oT.value)数字转字符串 ''+a;
    #####63、getStyle封装
    

    //获取计算后的样式(兼容所有浏览器)
    function getStyle(obj,name){
    return obj.currentStyle ? obj.currentStyle[name] : getComputedStyle(obj,false)[name];
    }```

    64、为什么定时器时函数不要括号?--带括号就执行,如果不明确返回,会返回undefined,导致出错;

    `

    65、select用法: 取值: oSle.value 发生改变时的事件:oSle.onchange = function(){};
    66、时间
    var oDate = new Date();
    年:oDate.getFullYear();
    月:oDate.getMonth(); //从0开始
    日:oDate.getDate();
    星期:oDate.getDay(); //星期日是0
    时:oDate.getHours();
    分:oDate.getMinutes();
    秒:oDate.getSeconds();
    毫秒:oDate.getMilliseconds();
    时间戳:oDate.getTime();```
    #####67、文字时钟
    

    <style>
    body{
    text-align: center;
    font-size: 80px;
    background: #000;
    color:#fff;
    }
    </style>
    <script>
    //补0
    function toDou(n) {
    return n < 10 ? '0' + n : '' + n;
    }
    window.onload = function(){
    var oDiv = document.getElementById('div1');
    var oDiv2 = document.getElementById('div2');

        function clock(){
            //获取当前时间
            var oDate = new Date();
            var h = oDate.getHours();
            var m = oDate.getMinutes();
            var s = oDate.getSeconds();
    
            var Y = oDate.getFullYear();
            var M = oDate.getMonth() + 1;
            var D = oDate.getDate();
            var W = oDate.getDay();
    
            //转换 W  星期,为汉字
            switch (W){
                case 1:
                    W = '一';
                    break;
                case 2:
                    W = '二';
                    break;
                case 3:
                    W = '三';
                    break;
                case 4:
                    W = '四';
                    break;
                case 5:
                    W = '五';
                case 6:
                    W = '六';
                    break;
                case 0:
                    W = '日';
                    break;
    
            }
    
            //设置div的内容,并且完成了补0
            oDiv.innerHTML = toDou(h) + ':' + toDou(m) + ':' + toDou(s);
            oDiv2.innerHTML = Y + '年'+ M +'月'+ D +'日   星期' + W;
        }
        clock();
        setInterval(clock,1000);
    
    };
    

    </script>

    <body>
    <div id="div1">11:44:58</div>
    <div id="div2"></div>
    </body>

    ######68、图片时钟 str = '123456'; //12点34分56秒
    ``字符串下标:IE7及以下出问题,访问字符串下标不能直接用 str[i]
    用 charAt(i); ``
    ######69、倒计时
    

    new Date是当前时间,需要设置时间
    调(设置)时间:
    var oDate = new Date();
    oDate.setFullYear(年,月,日);
    oDate.setFullYear(年,月);
    oDate.setFullYear(年);

    oDate.setMonth(月,日);
    oDate.setMonth(月);
    oDate.setDate(日);

    oDate.setHours(时, 分, 秒, 毫秒);
    oDate.setHours(时);
    oDate.setMinutes(分);
    oDate.setSeconds(秒);
    时间对象深入:
    如果本月有31天,oDate.setDate(32); 会进入下个月第一天
    oDate.setDate(0); -> 会变成上个月第一天

    <style>
    body{
    text-align: center;
    font-size: 80px;
    background: #000;
    color:#fff;
    }
    </style>
    <script>
    window.onload = function(){
    var oDiv = document.getElementById('div1');

        //2017年1月27日
        var oDate = new Date();
        oDate.setFullYear(2017,0,27);
        oDate.setHours(0,0,0,0);
        function clock(){
            //当前时间
            var now = new Date();
            //时间差 除1000后表示 秒
            var r = parseInt((oDate.getTime() - now.getTime())/1000);
            var d = parseInt(r / (24*60*60)); //天数
            r %= (24*60*60);  //剩下的秒数
            var h = parseInt(r / (60*60));// 小时数
            r %= 60*60; //剩下的秒数
            var m = parseInt(r / 60); //分钟
            var s = r % 60;   //秒
            oDiv.innerHTML = d + '天'+ h +'小时'+ m +'分钟'+ s +'秒';
    
        }
        clock();
        setInterval(clock,1000);
    
    };
    

    </script>
    </head>
    <body>
    <div>离春节还有</div>
    <div id="div1">70天10小时45分钟20秒</div>
    </body>

    #####70、oDate.getTime() 时间戳
    ``此刻的时间距离 1970年那天的毫秒数(那天开始,计算机才能计时)``
    #####71、时间转化
    

    把毫秒转为 x天y小时z分钟s秒
    var s = parseInt(ms / 1000);//秒
    var d = parseInt(s / (24 * 60 * 60));//天数
    //去掉天的秒数
    s %= 24 * 60 * 60;
    var h = parseInt(s / (60 * 60));//小时
    //去掉小时的秒数
    s %= 60 * 60;
    var m = parseInt(s / 60);//分钟
    s %= 60;```

    相关文章

      网友评论

          本文标题:js一些基础知识1

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