日期:2014-05-16  浏览次数:20418 次

[js] 那些相见恨晚的 JavaScript 技巧

[1] js简洁的创建对象

?

function obj_test() {
                //方法1
                var car1 = new Object();
                car1.color = "red";
                car1.wheels = "4";
                car1.hupcaps = "spinning"
                car1.age = 4;
                //方法2
                var car2 = {color:'red', wheels:'4', hubcaps:'spinning', age:'4'};
                var tmp = '';
                for(value in car2) {
                    tmp += value +',';
                }
                alert(tmp);
}

?

[2] js简洁的创建数组

?

function arr_test() {
                //方法1
                var arr1 = new Array('a', 'b', 'c');
                
                //方法二
                var arr2 = ['a', 'b', 'c'];
                var tmp = '';
                for(var i=0; i<arr1.length; i++) {
                    tmp += arr2[i] + ',';
                }
                alert(tmp);
            }

?

[3]js三元符号

?

function other_test() {
                var sign = 1;
                var value = sign ? 1 : 0;
                alert(value);
            }

?

[4]js使用json格式缓存复杂的数据

?

function json_test() {
                //json解决了缓存复杂数据的困境
                var band = {
                    "name":"liu86th",
                    "members":[
                        {"name":"liu", "role":"hero"},
                        {"name":"liu", "role":"hero"},
                        {"name":"liu", "role":"hero"},
                        {"name":"liu", "role":"hero"},
                        {"name":"liu", "role":"hero"}
                    ],
                    "year":"2000"
                };
                var value = eval(band);
                for(var j=0; j<value.members.length; j++) {
                    alert(value.members[j].name);
                }
            }

?

[5] js内置函数

?

function json_test() {
                //json解决了缓存复杂数据的困境
                var band = {
                    "name":"liu86th",
                    "members":[
                        {"name":"liu", "role":"hero"},
                        {"name":"liu", "role":"hero"},
                        {"name":"liu", "role":"hero"},
                        {"name":"liu", "role":"hero"},
                        {"name":"liu", "role":"hero"}
                    ],
                    "year":"2000"
                };
                var value = eval(band);
                for(var j=0; j<value.members.length; j++) {
                    alert(value.members[j].name);
                }
            }

function string_test() {
                //方法一
                function addclass(elm, newclass) {
                    var c = elm.className;
                    elm.className = (c == '') ? newclass : c+' '+newclass;
                }
                
                //方法二
                function addclass2(elm , newclass) {
                    var classes = elm.className.split(' ');
                    classes.push(newclass);
                    elm.className = classes.join(' ');
                }
            }

?

[6] js事件

?

function event_test() {
                //<h2> greate web resources </h2>
                //<ul id="resources">
                //<li> <a href="http://www.sina.com"> a </li>
                //<li> <a href="http://www.sina.com"> b </li>
                //<li> <a href="http://www.sina.com"> c </li>
                //<li> <a href="http://www.sina.com"> d </li>
                //<li> <a href="http://www.sina.com"> e </li>
                //</ul>
                //方法一
                (function(){
                    var resources = docu