js小结
var c;
console.log(c); //一个变量未定义，值 undefined
console.log(typeof c); //未赋值 类型 undefined
var d = null;
console.log("d:"+d); //值:null
console.log(typeof d); //类型：object
//+ 当有字符串参与 表示字符串拼接
console.log(10 + "3"); // 103
// - * / 均为数字
console.log("3"-"2"); // 1
console.log("20"+20-10); // 2010
//false --0
console.log(3-false); // 3
console.log(4-"djijfi223"); // Nan
console.log(typeof NaN); // number
console.log("11a" >= 3); // false
console.log("12" >= 4); //true
//=== 内容与类型都必须一致
// == 只需内容相同即可，类型不要求
// != 是对 == 否定 !== 对 === 否定
console.log(0 == false);
//逻辑运算府
//短路现象
var i = 9;
console.log(0 || i++); //9 执行|| 运算符，从左到右执行， 遇到0认为假，直接返回第二个表达式
console.log(i); // 10
console.log("" ? 56 : 90); // 非0数字转化成true;非空字符串转成true;0--false;空字符串---false
html 标记语言，负责页面的结构
css 层叠样式表，负责页面的样式
javascript 编程语言，负责页面的行为{客户端}
客户端 特效 动画 交互 数据校验....
服务器端：node
数据库：mongodb————json格式-------------------------------------------------
-------------------------------------------------
书写位置：
建议：放在body末尾
嵌入式：
<script type="text/javascript">
alert("hello world");
</script>
外链文件（实际项目中）
<script src="./my.js"></script>
行内式（了解）
<p onclick="alert('haha')">这是一段文字</p>熟悉JS常见的语句
alert("*********************")document.write() 在页面中输出信息
console.log()
变量：
var 变量名；
ex: var x;
var a,b;es6中： let/const定义变量
变量类型：
number: 数字 整数 小数 负数
string: 字符串 "hello" \ 'hello'
boolean :布尔值true\false
undefined 未赋值的变量类型就是undefined
null 空引用引用类型
数组 函数 对象 正则 日期 ...运算符：
算术运算符
+ - * / mod
++ --
应用
setInterval(function() {
var eleImg = document.createElement('img');
eleImg.src = 'star.gif';
document.body.appendChild(eleImg);
var width = height = parseInt(Math.round(Math.random(0, 1) * 20)) + 10;
var _left = parseInt(Math.round(Math.random(0, 1) * (window.innerWidth - width)));
var _top = parseInt(Math.round(Math.random(0, 1) * (window.innerHeight - height)));
eleImg.style.width = width + 'px';
eleImg.style.height = height + 'px';
eleImg.style.position = 'absolute';
eleImg.style.left = _left + 'px';
eleImg.style.top = _top + 'px';
eleImg.onclick = function() {
// this.remove();
document.body.removeChild(eleImg);
};
}, 10);
节点关系
元素节点：标签
属性节点：
文本节点：
document.body document.head
document.documentElement——获取html元素
节点变量.parentNode——由子节点找到父亲节点
节点变量.parentNode——由子节点找到父亲节点
节点变量.firstChild\firstElementChild
childNodes包含：文本子节点，元素节点
children:只包含：元素节点
节点类型（nodeType description nodeName nodeValue）
1 元素节点 div... null
3 文本节点 #text 回车换行
8 注释节点 #comment 注释内容
---注意：兼容问题IE 6\7\8不支持 element这些。
previousSibling nextSibling
previousElementSibling nextElementSibling
//在任意位置插入元素
document.body.insertBefore(插入元素，参照元素);
//元素克隆
元素.cloneNode()——浅层复制
元素.cloneNode(true)——深层复制
事件：
注册事件
---绑定事件：
---DOM0级：
特点，相同事件绑定，后面函数会覆盖前面的。
onclick()
---DOM2级：ie9不支持
特点：功能更加丰富
addEventListener()
//第一个参数：字符串，表示事件类型，不带on
//第二个参数：事件处理函数
//特点：同一个元素可以绑定相同的事件，不会冲突
ie9一下： attachEvent()
删除事件
---解绑事件
[1] eleDelete.onclick = null;
[2] 解绑
eleDelete.addEventListener('click', fn);
eleDelete.removeEventListener('click', fn);
[3] 兼容处理
eleDelete.attachEvent('click', fn);
eleDelete.detachEvent('click', fn);
DOM事件流
页面接收事件的顺序：事件发生后，会在元素节点之间按照某种顺序传递、传播。
顺序传播
document -> html -> body -> div -> body -> html -> document
捕获阶段 当前目标阶段 冒泡阶段
on*** / attachEvent : 只能得到冒泡阶段
addEventListener : 捕获阶段 --第三个参数默认是false,即：冒泡阶段
假如：目标元素绑定了捕获与冒泡两个，则按照代码实际顺序执行
有的事件不具有冒泡：焦点事件
进入、离开 进入、离开
onmouseenter\onmouseleave || onmouseover\onmouseout
区别：跟父子元素有关
事件对象
//增加形参event，获取事件对象
var eleDiv = document.querySelector('.box');
eleDiv.onclick = function(event) {
console.log(event);
}
//或者： windows.event; ---兼容问题：ie6-8支持
常见事件对象属性
[DOM事件流]
-target：触发事件的元素对象 --如：对儿子触发
-this:绑定事件的对象 --如：对父亲绑定
-type : 'click' \
阻止浏览器的默认行为——比如链接跳转
var e = window.event;
e.preventDefault();
//ie6~8 兼容： e.returnValu()
//通用： return false;
事件冒泡阻止：
e.stopPropagation();
ie6~8 : e.cancelBubble = true;
事件冒泡:局限是会触发父亲、父亲的父亲等。
事件委托(事件代理、事件委派)
-核心：给父亲绑定事件，只操作一次DOM，提高程序性能
-event.target 获取触发事件的元素
常用鼠标或键盘事件
鼠标事件：
onclick
onmouseover/onmouseout————父亲儿子之间切换多次执行
onmouseenter/onmouseleave————只会执行一次
onfocus\onblur
onmouseup\onmousedown
onmousemove
oncontextmenu:禁止右击事件
event.preventDefault();——阻止右击事件
selectstart:禁止复制事件
鼠标事件常用信息：
event
//鼠标相对于浏览器窗口可视区坐标
clientX: clientY：
//鼠标相对于电脑屏幕的可视区坐标
screenX screenY
// 兼容性：ie9+ ;
pageX pageY
键盘事件：
keyup——不区分大小写,默认大写ACII码值
keydown——不区分大小写
keypress:不能识别功能键，如 左右箭头，control,shift——区分大小写
键盘事件对象：keyboard ---> keyCode:按键对应的字母
表单元素.focus()——获取焦点
