10.10 笔记-JavaScript 02 绑定事件,对象类型的转换

JavaScript02

    1. 进度条特效

    2. 等待按钮特效


        让按钮不能点击的效果


        object.disabled = true


        让按钮 能点击的效果


        object.disabled = false


    3. 手机验证发送等待效果


        绑定事件


        object.onclick = function(){} 这是绑定单击事件


    4.  获取对象的方式


        1.  var object = document.getELementById('id值') 用标签id,单个标签对象


        2.  var object = document.getElementsByTagName('标签名') // 结果是一个数组div


        3.  var object = document.getElementsByName('name属性名') //通过name属性找到对象 返回数组


        返回元素的对象属性


    5.  全选反选全不选特效


        1.  var object = document.getElementsByTagName('div')


        2.  数组不能直接操作属性 需要将他变成单独的内容


        3.  for(var i =0; i<对象长度,i++){  // 对象长度 = object.length
            // code ...
        }


        4.  object.checked = true  多选框选中状态


            object.checked = false 取消选中 多选框前面没有对号


    6.  数据类型


        1.  typeof   查看数据类型


            code:
                    var data = null ;
                    console.log(data);
                    console.log(typeof data);




        2.  boolean 布尔型
                true  false
                严格区分大小写
        3.  undefined
                undefined 定义了变量没有赋值


        4.  对象  object


            i.  null  对象类型 object 特殊的对象类型
            ii. 数组  对象类型 object


        5. 数值类型  number
            i. 整型


            ii. 浮点型


                a)  浮点数运算不精确 不要出现在比较运算中


            iii. 进制的标头


                a)  2进制  0b


                b)  8进制  0


                c)  16进制 0x


            iv. 无穷大 Infinity


                a)  最大范围值 Number.MAX_VALUE


                b)  最小范围值Number.MIN_VALUE


            v. NaN 参与运算得到的值一定是NaN


        6. 数据类型转换


            parseInt()


            code:


                data ='-56px'; //56
                data = '56.6.7';//56
                data = 'a56'; //NaN
                //只要这个字符串里面的数字第一个字符不是负号和数字那么就会变为NaN
                var result = parseInt(data);
                console.log(result);


            1.如果把非数值类型转换为数值类型 并不是绝对的


            2. 如果把第一个字符不是数字或者负号，返回的NaN


            3. 如果当前非数值类型的值是null 返回的是NaN


            典型应用


                box.style.left = parseInt(box.style.left)+’5’+’px’;


            4.  如果有NaN参与的运算 结果一定是NaN


        7. 字符串 string


            js中单双引号没有差异  想用哪个用哪个 你来说的算！




        8. 函数 function


            函数是一种数据类型 类似于字符串  字符串可以怎么玩 函数就可以怎么玩


    7. 流程控制


        a)  顺序结构


        b)  分支结构


                if(){


                }else if(){ //else if()中间一定要写空格否则会报错


                }


            switch case 结构的匹配需要匹配数据类型


        c)  循环结构


            for- --in 这是js中的foreach


            for(键名 in  要遍历的对象){


                想要键 直接打印键变量就可以


                如果想要 值  通过{对象[键名]}
            }


    8. 简单的js计算器


        a)  获取input表单中动态的值 需要使用对象.value属性


        b)  value属性获取的值类型是string


        c)  需要使用parseInt()将string转换为number


    9. 选项卡特效


        1.  对象.style.display="none" 是可以设置隐藏


            对象.style.display ="block" 可以设置显示


        2.  在js中可以使用三元运算符