妙味JS学习记录（一）
在学习过程中零碎的知识点记录以及一些想法，加深印象，强化记忆。
零、预热课程
常见的JS效果实现原理：
~鼠标移入：display:'block'-->'none' ；上下移动轮播：改变ul的top值；左右轮播：改变left值；网页换肤：更换link便签的href；点击菜单展开收缩：用if来判断display;
~首先想好修改的属性，其次考虑加什么事件；
~函数加括号为调用该函数，返回值为函数返回值；
函数不加括号可认为是查看函数完整信息，即查看整个函数体，返回值即整个函数体，不加括号传参相当于传入函数整体。
~
实例：
0-1鼠标移入显示提示框-->改变display的值。将事件添加给外层包裹的label标签效果会更好。
0-2 改变class 因为class在JS中是个关键字，所以要用className对象，取消class也可用空字符串。
0-3 网页换肤 准备几套样式表，点击按钮时改变href值。
0-4 改变DIV样式 需要注意CSS的优先级。
0-5 输入法菜单展开，同lx-2。
0-6 点击全选 input.check = 'true'; 实现选中。
0-7 选项卡 首先头部的选项卡设置移入变色，其它默认：鼠标移入后先用for循环清除所有.active ，再给this添加.active。 给头部卡片指定当前 i 为index值，隐藏其他div 显示第[index]个DIV。
0-8 简易年龄，底部的文字变化，12个月定义成数组，给li绑定index ,调用当前第（li的this.index）个数组。
0-9 数码时钟 一串数字相加是求和，如果在最前方+空字符串，就能组合成为字符串；charAt(i)，提取字符串中第i个字符;因为setInterval是延迟1秒才开始加载，所以需要先单独调用一遍该时间函数
0-10 延时提示框 鼠标移出红框时，让灰框暂时不消失。所以红框onmouseout时添加setTimeout延时器，鼠标移入灰框时清楚延时器，让灰框一直存在。
0-11运动基+0-12无缝滚动 绝对定位后，oUl.style.left = oUl.offsetLeft + speed +'px'; 将现有li*2：oUl.innerHTML += oUl.innerHTML;
练习：
lx-1 论坛头像 通过display block>none; 修改。
lx-2 播放列表展开 右边的倒三角可以用修改class 来改变背景图像，也可以用CSS3 的rotate颠倒180deg 。
lx-3 多层选项卡菜单 移到第一个显示第二个，移到第二个显示第三个，注意mouseover 和 mouseout的关系就行 。
lx-4 星星评分效果 用无序列表写，给所有li设置索引，循环比鼠标移入的当前索引小的全变色，比当前索引大的不变色。
lx-5 展开菜单，先给li设置索引，display:none>block; 点击时先要none其他的菜单，然后将当前索引的菜单展开，再点击 block>none;
lx-6 改变输入法展开文字 点击展开菜单li 时改变 标题的innerHTML，同时隐藏菜单就好了。
lx-7 同0-9 时间的样式可以在CSS中写好，在innerHTML中套上标签。
lx-8 简单图片展示效果 首先实现一个小图环绕大图的布局，点击小图，把当前的innerHTML 传给大图就好了（当然也可以改变大图的src）
lx-9 按下鼠标列表上下滚动，松开停止 同0-12 点击时用onmousedown设定速度，松开onmouseup 速度清零
lx-10 站长之家导航条 将标题导航和子菜单直接写到一个li里，那样无论鼠标移入哪里都可以保持不消失，移入显示，移出延时隐藏，可以用push()方法获取那些元素组中的元素。
一、基础课程
~ JS 组成：
ECMAScript：解释器、翻译；提供语言的基本功能；
DOM：Document Object Model；给了JS操作页面元素的能力 （document.xxx）；
BOM：Browser Object Model：给了JS操作浏览器的能力 （window.xxx）；
~ 变量类型
typeof xxx ——检测变量类型 变量类型是由它里面存的东西决定的；
基本类型：number，string，boolean，undefined，null；
引用类型：object、Array、RegExp、Date、Function、特殊的基本包装类型(String、Number、Boolean)以及单体内置对象(Global、Math)。object是由基本对象组成的。
原则：一个变量应该只存放一种类型的数据；
~ 类型转换
显式转换（强制转换）—— parseInt() 字符串转整形（从字符串中提取数字）；parseFloat() 字符串转浮点型；
NaN 与自身不相等；isNaN(值) 检测NaN；
隐式转换 —— ‘==’ 先转换一样类型再比较；‘-’减法，先转换再相减；'*'乘法；'/'除法；
~ 变量作用域（变量作用范围）
全局变量：不定义在任何一个函数里，可以在任何地方去用；
局部变量：定义在一个函数里，只能在这个函数里使用；
~ 闭包
function aaa(){ //父函数 var a= 12; function bbb(){ //子函数 alert(a); } bbb(); } aaa();
子函数可以使用父函数的局部变量；变量作用域的一种形式；
~ JS命名规范
可读性 规范性 匈牙利命名法：类型前缀：首字母大写
数组 a Array
布尔值 b Boolean
浮点数 f Float
函数 fn Function
整数 i Integer
对象 o Object
正则 re RegExp
字符串 s String
变体变量 v Variant 不限定类型的变量
~ 运算符
算术 + - * / %；
赋值 = += -= /= %=；
关系 < > <= >= == === != !==；
逻辑 && || !
~ 程序流程控制
if switch xxx?xxx:xxx(三目) while for break continue
真：true 非零数字 非空字符串 非空对象
假：false 数字零 空字符串 空对象 undefined null
~ JSON
JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。
它是一种严格的js对象的格式，JSON的属性名必须有双引号，如果值是字符串，也必须是双引号；
var obj = {a: 'Hello', b: 'World'}; //这是一个对象，注意键名也是可以使用引号包裹的
var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串，本质是一个字符串
| 对比内容 | JSON | Javascript 对象 |
| 键名 | 必须是加双引号 | 可允许加单引号，双引号，也可以不加 |
| 属性值 | 只能是数值(10进制) ,字符串(双引号),布尔值和null,也可以是数组,符合JSON的对象，不能是函数,NaN,Infinity,-Infinity和undefined | javascript 中的任意值 |
| 逗号问题 | 最后一个值后面不能有逗号 | 可以有逗号 |
| 数值问题 | 前导不能为0，小数点后会有值 |
都可以 |
for (var in object) {
执行的代码块
}
~ 函数返回值
函数的执行结果；可以没有return；一个函数应该只返回一种类型的值;
arguments(不定参) 获取函数的参数;开发者无需明确指出参数名，就能访问它们。
argument.length 传参的个数；argument[i] 访问第i个参数
~ jQuery css()函数
封装一个函数获取属性，style只能获取行间样式 所以需要封装获取函数方法
function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; //兼容IE }else{ return getComputedStyle(obj,false)[attr]; //兼容火狐和谷歌 } }
function css(){ if(arguments.length == 2){//获取 return getStyle(arguments[0],arguments[1]); //获取计算后的样式（当前样式、非行间） }else if(arguments.length == 3){//设置 arguments[0].style[arguments[1]] = arguments[2]; } }
~ 数组
var arr = [1,2,3,4]；
var arr = new Array(1,2,3,4);
快速清空数组：arr.length = 0;
添加： push(元素),从尾部添加 unshift(元素)从头部添加
删除： pop()从尾部删除 shift()从头部删除
查找： indexOf() 方法可返回某个指定的值在数组中首次出现的位置，如果没有查找到则返回-1
颠倒顺序：reverse()
排序： sort(比较函数)；只认识字符串，只能把数字当作字符串；
想排序数字需要添加比较函数：sort(function(num1 , num2) {return num1 - num2;}) //从小到大排序
1.返回值小于0，num1,num2在数组中顺序不变
2.返回值等于0，num1,num2在数组中顺序不变
3.返回值大于0，num1,num2在数组中顺序交换
转换： concat(数组2)；连接两个数组或两个字符串；
join(分隔符)；将数组里的元素拼成一个大的字符串； 不能为空
split(分隔符)；大字符串拆解成数组，但其实还是小字符串，如果是数字需要转换 不能为空
截取： slice(起始索引，结束索引) 返回一个新数组，原数组不破坏
万能的 splice：splice(开始位置，长度，要插入的那些元素)
如： var arr = [1,2,3,4,5,6,7,8]
删除：arr.splice(2,3) 从第二个位置删三个 ——> [1,2,6,7,8]
中间插入： arr.splice(5,0,'a','b','c'); ——> [1,2,3,4,5,a,b,c,6,7,8]
替换： arr.splice(1,2,'a','b') ——> [1,a,b,4,5,6,7,8]
二、DOM
~ 创建插入删除元素
creatElement(元素名);
在末尾插入元素：父.appendChild(子节点)；创建出来的元素和原来的没有区别；
在xx之前插入子节点：父.insertBefore(子节点,在谁之前)；
删除一个节点： 父.removeChild(节点)；
~ 文档碎片
创建文档碎片 document.creatDocumentFragment()；仅仅在理论上能提高性能
new Date().getTime() 获取时间戳 （以毫秒为单位的时间）
~ DOM节点
childNodes 获取子节点 getAttributeNode()获取属性节点
nodeType 节点类型 1：元素节点 2：属性节点 3：文本节点 8：注释节点
children 兼容型，不会把空文本节点选中
parentNode 获取父节点 offsetParent 获取该元素相对于谁定位
firstChild 首个子节点(IE) || firstElementChild(FF) 处理兼容
lastChild 最后一个子节点(IE) || lastElementChild(FF)
nextSibling 兄弟节点 || nextElementSibling
previousSibling || previousElementSibling
~ 操作元素属性
获取：getAttribute(名称) 设置：setAttribute(名称，值) 删除：removeAttribute(名称)
用className选择元素：选出所有元素，通过className来筛选
~ BOM
打开窗口：window.open(地址，target); 返回值为当前窗口
document.write；清空当前页面，并输出内容
代码点击运行实现：开个新页面，把文本域里的内容用document.write写到新页面去；文本域的内容支持HTML
关闭窗口：window.close(); 最好用来关闭open()出来的窗口;
window.navigator.userAgent 查询当前浏览器版本
window.location 读取当前URL，也可以跳转指定URL
~ 窗口尺寸
可视区尺寸
document.documentElement.clientWidth； document.documentElement.clientHeight；
滚动距离（可视区距离）
document.body.scrollTop; || document.documentElement.scrollTop;
~ 系统对话框
alert(); confirm()是否框，返回布尔值； prompt('输入内容');返回用户输入的文字或null
~ 常用事件
window.onload; window.onresize;调整窗口大小 window.onscroll;页面滚动时
三、事件
~ event 对象
用来获取事件的详细信息 鼠标位置、键盘按键...
document其实是一个节点，一个最外层虚拟的父节点。
获取event对象 var oEvent = ev || event；处理兼容性
oEvent.clientX oEvent.clientY 鼠标的'可视区'坐标；
~ 事件流
事件冒泡，子级执行完事件会不断往父级传递；
阻止冒泡，oEvent.cancelBubble = true, 要在子级设置阻止
div鼠标跟随：给div绝对定位后，X轴把clientX赋给 left，Y轴需要用滚动距离(scrollTop)加上clientY
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
只要用到clientX和clientY 就一定要加滚动条；
一串DIV跟随鼠标的效果：倒循环，从大到小，后一个跟着前一个的left和top；第一个的left和top跟随鼠标的位置
~ 键盘事件
onkeydown + onkeyup = onkeypress 根据keyCode知道具体按了哪个键 可以用alert(oEvent.keyCode);
ctrlKey shiftKey altKey 按住对应的按键返回true
if(oEvent.ctrlKey && oEvent.keyCode == 13) 按住ctrl和回车发送
键盘控制div移动，解决停顿问题：
window.onload = function() { var oDiv = document.getElementById("div1"); var timer = null; var left = false; var right = false; var top = false; var bottom = false; setInterval(function() { if(left) { oDiv.style.left = oDiv.offsetLeft - 10 + "px"; } else if(top) { oDiv.style.top = oDiv.offsetTop - 10 + "px"; } else if(right) { oDiv.style.left = oDiv.offsetLeft + 10 + "px"; } else if(bottom) { oDiv.style.top = oDiv.offsetTop + 10 + "px"; } }, 50); document.onkeydown = function(ev) { var ev = ev || event; var keyCode = ev.keyCode; switch(keyCode) { case 37: left = true; break; case 38: top = true; break; case 39: right = true; break; case 40: bottom = true; break; } } document.onkeyup = function(ev) { var ev = ev || event; var keyCode = ev.keyCode; switch(keyCode) { case 37: left = false; break; case 38: top = false; break; case 39: right = false; break; case 40: bottom = false; break; } } }
~ 默认行为（默认事件）
浏览器自身就具备的功能
阻止右键菜单：document.oncontextmenu = function(){return false;}
阻止文本框输入 text.onkeydown = function(){return false};
自定义右键菜单：div的left 和 top 等于 clientX 和clientY
拖拽原理：
div.onmousedown ：存储距离 document.onmousemove ：根据距离，计算div最新的位置 document.onmouseup：清空onmousemove
只有在鼠标点下去后，onmousemove才能发生 因此要把onmousemove事件写在onmousedown内
防止鼠标从DIV中拖出去，直接给document加事件;
四、COOKIE
页面用来保存信息，比如自动登陆，记住用户名。
特性：同一个网站中所有的页面共享一套Cookie；数量大小有限；有过期时间；存在客户端，可以更改。
~ cookie的使用：
格式：名字=值；不会覆盖，’=‘为添加；没指定过期时间，那么一直到浏览器关闭为止
function setCookie(name,value,iDay){//发送 var oDate = new Date(); oDate.setDate(oDate.getDate()+iDay); document.cookie = name+'='+value+';expires='+oDate; } function getCookie(name){//获取 var arr = document.cookie.split('; '); for (var i = 0; i < arr.length; i++) { var arr2 = arr[i].split('='); if (arr2[0]==name) { return arr2[1]; } } return ''; } function removeCookie(){//删除COOKIE setCookie(name,'1',-1);//让cookie昨天就过期 }
