input标签属性介绍
name属性：表示元素的名称，也就是name的值代表当前input元素的名字；
id属性：用于css引用或者其他引用
value属性：表示当前input框内显示的文字
style属性：用于设置css样式。如颜色，背景色等
type属性:用于设置输入框的类型，最重要的属性
input标签的type属性详述
其type属性有多种类型：
文本框（type=text)，
按钮（type=button)，
单选（type=radio)
复选（type=checkbox)
下拉列表（type=select)
文本域（type=textarea)
用Input标签，利用其type属性，从而可以设置一系列表单元素，input表签放在form表单中。
placeholder属性
Placeholder 是 HTML5 新增的一个表单标签属性，当 input 或者 textarea 设置了该属性后，该属性的值将作为灰字提示显示在文本框中，当文本框获得焦点（或输入内容）时，提示文字自动消失。
修改 Placeholder 文本颜色
默认情况下，Placeholder 的文字是灰色，输入的文字是黑色。而我们拿到的设计稿上的色值往往并不与默认情况下完全一致。那么，如何修改 Placeholder 的色值呢？ 如果直接写input{color:red;}，IE10 和 Firefox下，Placeholder 文字和输入文字都变成了红色，在 Chrome 和 Safari 下，Placeholder 文字颜色不变，只有输入的文字变成红色。 显然，这种做法是行不通的。因为我们只想改变 Placeholder 文字的颜色，并不想改变输入文字的颜色。正确的写法如下：
::-moz-placeholder{color:red;}
//Firefox::-webkit-input-placeholder{color:red;}
//Chrome,Safari:-ms-input-placeholder{color:red;}
//IE10
使 Placeholder 兼容所有浏览器
前面我们知道了，IE6 到 IE9 并不支持原生的 Placeholder，并且即使在支持原生 Placeholder 的浏览器上，其表现也并不一致。在实际项目中，如何使所有浏览器都一致地支持 Placeholder呢？
1、如果只需要让不支持 Placeholder 的浏览器能够支持改功能，并不要求支持原生 Placeholder 的浏览器表现一致，那么可以采用如下方法：
function placeholder(nodes,pcolor) {
if(nodes.length && !("placeholder" in document_createElement("input"))){
for(i=0; i<nodes.length; i++){
var self = nodes[i], placeholder = self.getAttribute('placeholder') || '';
self.onfocus = function(){
if(self.value == placeholder){
self.value = '';
self.style.color = "";
}
}
self.onblur = function(){
if(self.value == ''){
self.value = placeholder;
self.style.color = pcolor;
}
}
self.value = placeholder;
self.style.color = pcolor;
}
}
}
2、如果需要自定义样式，并且希望 Placeholder 在所有浏览器下表现一致，可以通过利用 label 标签模拟一个 Placeholder 的样式放到输入框上，当输入框获得焦点的时候隐藏 label，当输入框失去焦点的时候显示 label。
<script>
$(function(){
$('.for_text').click(function(){
$('.text').focus() })
$('.text').blur(function(){
$('.for_text').hide();
})})
</script>
<style>
.for_text{
position:absolute;
cursor:text;
margin:5px;
color:#999;
}
.text{
padding:5px;
}
</style>
<form>
<label for="text" class="for_text">请输入文本</label>
<input type="text" name="text" class="text"/>
</form>
3、最后一种方法，也是使用最常见的，但是不能改变文本的颜色，使用脚本的方式判断文本框的值，获取焦点或者输入文本的时候，如果为预设的值，那么就清空文本框，失去焦点的时候，如果文本框的值为空，则替换为我们预设的值。
<input type="text" name="text" value="请输入文本" class="text"onFocus="if(this.value=='请输入文本')
this.value = ''"onBlur="if(this.value=='')
this.value='请输入文本'"/>
let:
实现块级作用域
ES6 新增关键字let，可以使用 let 关键字来实现块级作用域。let 声明的变量只在 let 命令所在的代码块 {} （离let最近的{}）内有效，在{} 之外不能访问。
在 ES6 之前，JavaScript 只有两种作用域： 全局作用域和私有作用域， 没有块级作用域的概念，使用 var 关键字声明的变量在{} 外依然能被访问到（函数内使用 var 声明的变量只能在函数内访问，如果不使用 var 则是全局变量）。
// 块级作用域
{
let s=3;
console.log(s);//3
}
console.log(s);//s is not defined
不存在变量提升
let声明的变量不会进行变量提升，但是有一个语法检测的机制，会在代码自上而下执行之前先进行语法检测，看是否有语法错误（是否有重复声明的变量、是否有let声明的变量在声明前访问），如果有就直接报错。
console.log(a);//Uncaught ReferenceError: a is not defined
let a=2;
阻断了与window的关系
let声明的变量不会成为window对象的属性。
let a=2;
console.log(window.a);// undefined
不能重复声明
let a=2;
console.log(a);
var a=3; // 不能进行重复的声明：Uncaught SyntaxError: Identifier 'a' has already been declared
console.log(3);
注意：如果在{}中用function声明变量，代码块内部会进行语法检测，如果发现有重名的变量就直接报错
{
function fn(){};
var fn = 2;//SyntaxError: Identifier 'fn' has already been declared
}
暂时性死区
如果代码块中存在let和const命令，这个代码块从一开始就对这些命令声明的变量形成了封闭作用域。只要是在声明之前就使用这些变量，就会报错。代码块内，在使用let声明变量之前的那个区域内，该变量都是不可用的（不允许访问），一旦访问就报错。这就是“暂时性死区”（temporal dead zone，简称 TDZ）。
可以理解为，只要一进入当前作用域，经过词法检测就已经知道待使用变量是谁了，但是不可获取，只有等到声明变量的代码执行后，才可以获取和使用该变量。
const
const声明一个只读的常量 。一旦声明， 常量的值就不能改变。常量 所谓的常量就是不能改变的值
const PI = 3.1415;
PI // 3.1415
PI = 3;
// TypeError: Assignment to constant variable.
上面代码表明改变常量的值会报错。const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化(赋值)，不能留到以后赋值。
并不是变量的值不能改动，而是指向的那个内存地址所保存的数据不得改动；数据一半存储在堆中，对于简单的基本数据类型（string number boolean null undefined）值保存在指向的那个内存地址，因此等同于常量。但对于引用数据类型(object array ),变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的(即指向另一个固定的地址)，至于它指向的数据结构是不是可变的，就完全不能够控制了。
const foo = {};
// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123
// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only
上面代码中，常量foo储存的是一个地址，这个地址指向一个对象。不可变的只是这个地址，即不能把foo指向另一个地址，但对象本身是可变的，所以依然可以为其添加新属性。
const a = [];//空值也是值
a.push('Hello'); // 可执行
a.length = 0; // 可执行
a = ['Dave']; // 报错
上面代码中，常量a是一个数组，这个数组本身是可写的，但是如果将另一个数组赋值给a，就会报错。
如果真的想将对象冻结，应该使用Object.freeze方法。
const foo = Object.freeze({});
// 常规模式时，下面一行不起作用；
// 严格模式时，该行会报错
foo.prop = 123;
上面代码中，常量foo指向一个冻结的对象，所以添加新属性不起作用，严格模式时还会报错。
除了将对象本身冻结，对象的属性也应该冻结。下面是一个将对象彻底冻结的递归函数。
var constantize = (obj) => {
Object.freeze(obj);
Object.keys(obj).forEach( (key, i) => {
if ( typeof obj[key] === 'object' ) {
constantize( obj[key] );
}
});
};
keycode==13
window.onload
window.onload出现的原因？
我们都知道页面的代码顺序是从上往下进行加载，很多时候我们要对页面中的某一个模块进行操作，这时候我们常常使用javascript代码来进行操作。为了能够保证操作的模块或对象在js代码之前就加载了，我们不得不把js代码放在页面的底端。但是我们在设计页面的时候，为了把js代码放在一起，或者一个让页面更加简洁的位置，那就有可能出现代码中操作的对象未被加载的情况，那么我们该如何去解决呢？这时候window.onload就被有了存在的意义了。
window.onload是什么？
window.onload是一个事件，在文档加载完成后能立即触发，并且能够为该事件注册事件处理函数。将要对对象或者模块进行操作的代码存放在处理函数中。即：window.onload =function (){这里写操作的代码};
node
nodeValue属性
用于设置或返回指定结点的节点值
nodeValue 属性对于文档节点和元素节点是不可用的。
注释：如果您希望返回元素的文本，请记住文本始终位于文本节点中，并且您必须返回文本节点的值（element.childNodes[0].nodeValue）。提示：nodeValue 属性的替代选择是 textContent 属性。
forEach()方法对数组的每个元素执行一次提供的函数
var array = ['a', 'b', 'c'];
array.forEach(function(element) {
console.log(element);
});
forEach方法中的function回调有三个参数：第一个参数是遍历的数组内容，第二个参数是对应的数组索引，第三个参数是数组本身
foreach 语法：
[ ].forEach(function(value,index,array){
//code something
});
setAttribute()
增加一个指定名称和治的新属性，或者把一个现有属性设定为指定的值
elementNode.setAttribute(name,value)
说明：
1.name：要设置的属性名
2.value:要设置的属性值
注意：
1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。
2.类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数
substring（）方法
定义和用法
substring() 方法用于提取字符串中介于两个指定下标之间的字符。
substring() 方法返回的子串包括 开始 处的字符，但不包括 结束 处的字符。
string.substring(from, to)
参数描述
from必需。一个非负的整数，规定要提取的子串的第一个字符在 string Object 中的位置。
to可选。一个非负的整数，比要提取的子串的最后一个字符在 string Object 中的位置多 1。如果省略该参数，那么返回的子串会一直到字符串的结尾
innerHTML innerText的使用和区别
document对象中有innerHTML、innerText这两个属性，都是获取document对象文本内容，但使用起来还是有区别的。
1） innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容，包括HTML标签，但不包括自身)
2） outerHTML设置或获取标签自身及其所包含的HTML+文本信息（包括自身）
3） innerText设置或获取标签所包含的文本信息（从标签起始位置到终止位置的内容，去除HTML标签，但不包括自身）
4） outerText设置或获取标签自身及其所包含的文本信息（包括自身）
innerText和outerText在获取的时候是相同效果，但在设置时，innerText仅设置标签所包含的文本，而outerText设置包含包括标签自身在内的文本。
JS中的rows和cells
Table下面可以有thead和tbody两个分组对象，某些时候可以代替div使用，比如实现某部份表格隐藏。
tr是行，th或者td是列，这些对象构成表格阵列
rows集合返回表格中所有行的一个数组；
cells集合返回表格中所有单元格的一个数组。
rows：表示表格所有行的集合
cells：表示行内单元格的集合
语法
tableID.rows[rowsIndex]
tableID.cells[cellsIndex]
var x=document.getElementById('table1').rows[0].cells[0].innerHTML;
// 显示出第一个单元格的内容
className属性
通过className属性设置某个元素的class属性时将替换该元素原有的class设置
className 属性设置或返回元素的 class 属性。
如果需要的的“追加”效果而不是“替换”，可以利用字符串拼接操作，把新的class设置追加到className属性上去。
elem.className += " intro"; //注意：intro的第一个字符是空格
