html css js 一些记录.

webstorm 的基本使用

• webstorm 格式化 html 代码: Ctrl+Alt+L

js html css 基本使用

• 注意 dom 的 innerHTML会刷新dom,所以里面包含的事件绑定可能无效,需要重新绑定.

• document ready 和 window.onload 区别
  window.onload 是所有文件加载完之后执行一个函数.
  document.ready(jquery里面才有这个函数,普通js里面没这个函数)是在dom文档树加载完之后执行一个函数, 不代表所有文件都加载完.所以 document.ready 要比 window.onload 先执行.
  下面是 document.ready 的方法:

  document.ready = function (callback) {
            ///兼容FF,Google
            if (document.addEventListener) {
                document.addEventListener('DOMContentLoaded', function () {
                    document.removeEventListener('DOMContentLoaded', arguments.callee, false);
                    callback();
                }, false)
            }
             //兼容IE
            else if (document.attachEvent) {
                document.attachEvent('onreadytstatechange', function () {
                      if (document.readyState == "complete") {
                                document.detachEvent("onreadystatechange", arguments.callee);
                                callback();
                       }
                })
            }
            else if (document.lastChild == document.body) {
                callback();
            }
        }

• js获取select标签选中的值,来源于:作者

var obj = document.getElementById("testSelect"); //定位id
var index = obj.selectedIndex; // 选中索引
var text = obj.options[index].text; // 选中文本
var value = obj.options[index].value; // 选中值

• js字符串格式化输出

String.prototype.format = function(args) {
    var result = this;
    if (arguments.length < 1) {
        return result;
    }

    var data = arguments;       //如果模板参数是数组
    if (arguments.length == 1 && typeof (args) == "object") {
        //如果模板参数是对象
        data = args;
    }
    for (var key in data) {
        var value = data[key];
        if (undefined != value) {
            result = result.replace("{" + key + "}", value);
        }
    }
    return result;
}

使用方法:

//两种调用方式
var template1="我是{0}，今年{1}了";
var result1=template1.format("loogn",22);

var template2="我是{name}，今年{age}了";
var result2=template2.format({name:"loogn",age:22});