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});