change() select switch...case toUpperCase transform

1、change()事件，当发生改变时触发该事件，用来处理单选按钮的事件很合适

2、select事件的options属性及selectedIndex属性，options属性可以获得options项的集合，是个类数组的对象，selectedIndex属性用来获取选择项的索引

3、switch...case处理多种代码块情况的语句，类似条件语句

switch (b) {
//注意case使用的全等模式，即 === 而不是 ==
            case 0:
                console.log("hello");
                break;
            case 1:
                console.log(" ");
                break;
            case 2:        
                console.log("world");
                break;
//为3 || 4时
            case 3:
            case 4:
                console.log("3 or 4");
    //default最好放置在末尾
            default:
                console.log("hello world");
//最好能在default中也添加break
                break;    
        }
    }

如果你需要在一个范围内，则可以将switch中的参数改为true

switch(true) {
    //当然此处的foo必须是有意义的 而不是not a defined
    //可以为undefined
    //注意不要将switch的参数设为false 否则会有很多麻烦
    case foo>5 && foo<10:
    console.log("5~10");
    break;
    default:
    console.log("其他");
    break;
}

4、toUpperCase()，没什么可讲的，大家都了解，就是大写，只是提醒下可以用来将获取值全部化为大写这个思路

5、transform，CSS3的新属性，可以用来将div移动，旋转，可以多个属性连用，只要有空格，注意浏览器的兼容性

/*
translate与rotate中有个空格 以到达连用目的
 translate中x对应的为left y对应的为top
 此处的left与top可以看成与position: absolute;中的left、top相似
 即是说可以理解为向右移动了40px 向下移动了50px
rotate()正值顺时针 负值逆时针
*/
div {
 transform: translate(40px,50px) rotate(40deg);
 -ms-transform: translate(40px,50px) rotate(40deg);
 -moz-transform: translate(40px,50px) rotate(40deg);
 -webkit-transform: translate(40px,50px) rotate(40deg);
}

 

Internet Explorer 10、Firefox、Opera 支持 transform 属性。

Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。

Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。

Opera 只支持 2D 转换