浏览器

背景

 
IE 6~11:到IE10支持ES6
Chrome: 基于Webkit内核的V8 JavaScript搜索引擎
Safari: OS X 10.7 Lion自带的6.1版本开始支持ES6,目前最新的OS X 10.11 El Capitan自带的Safari版本是9.x,早已支持ES6
Firefox: Mozilla自己研制的Gecko内核和JavaScript引擎OdinMonkey
 

浏览器对象:window

 
window innerWidth和innerHeight属性 ie<=8 不支持
navigator 表示浏览器的信息,为了兼容各个版本可以使用短路运算符||
screen 屏幕
 

Dom操作

 

动态创建一个节点然后添加到DOM树中

var d = document.createElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p { color: red }';
document.getElementsByTagName('head')[0].appendChild(d);

list.insertBefore(haskell, ref);//通过insertBefore将haskell节点插入到ref节点后面
 

删除DOM(removeChild)

 
删除dom需要知道该dom的父节点
var parent = document.getElementById('parent'); parent.removeChild(parent.children[0]);

表单提交

  • 文本框,对应的<input type="text">,用于输入文本;
  • 口令框,对应的<input type="password">,用于输入口令;
  • 单选框,对应的<input type="radio">,用于选择一项;
  • 复选框,对应的<input type="checkbox">,用于选择多项;
  • 下拉框,对应的<select>,用于选择一项;
  • 隐藏文本,对应的<input type="hidden">,用户不可见,但表单提交时会把隐藏文本发送到服务器。
<form id="login-form" method="post" onsubmit="return checkForm()">
    <input type="text" id="username" name="username">
    <input type="password" id="password" name="password">
    <button type="submit">Submit</button>
</form>

<script>
function checkForm() {
    var pwd = document.getElementById('password');
    // 把用户输入的明文变为MD5:
    pwd.value = toMD5(pwd.value);
    // 继续下一步:
    return true; //true 继续提交 ;false 中断提交
}
</script>

Canvas(Echarts) 

可以进行相关图表、地图的绘画
<canvas id="test-canvas" width="300" height="200"></canvas>

原文地址:https://www.cnblogs.com/fuGuy/p/9208477.html