妙味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昨天就过期
}