JavaScript 基础知识（简单易懂）

一、获取未设置行内元素的样式

getComputedStyle（document.getElementById("div1").width）在IE6,7,8下不兼容；

document.getElementById("div1").currentStyle.width 在标准浏览器下不兼容

解决办法：属性判断

用上面两个方法，应注意以下问题：

• 获取到的是计算机（浏览器）计算后的样式
• background: url() red …… 复合样式（不要获取）
• backgroundColor 单一样式（不要用来做判断）
• 不要有空格
• 不要获取未设置后的样式：不兼容

二、定时器

• setTimeout("function",time) 设置一个超时对象,time为毫秒 
• setInterval("function",time) 设置一个超时对象,time为毫秒

• setInterval为自动重复，setTimeout不会重复，只执行一次。 

• clearTimeout(对象) 清除已设置的setTimeout对象 
• clearInterval(对象) 清除已设置的setInterval对象 

注意，在设置setInterval的时候，如果定时器由事件控制，先关再开为宜，避免多次设置定时器问题。

三、系统时间对象

1、系统时间对象：var mytime=new Date();

• 获取年：var iyear=mytime.getFullYear();                          //typeof object

    //以下函数的typeof number

• 获取月：var iMonth=getMonth()+1;                                (1月是从0开始，所以要+1)
• 获取日：var iDate=getDate();
• 获取星期：var iWeek=myTime.getDay();
• 获取时：var iHours=getHours
• 获取分：var iMinutes=getMinutes
• 获取秒：var iSeconds=getSeconds

2、计算倒计时

四、字符串相关方法

var str="www.baidu.com";

1、charAt()             //查找字符串

2、charCodeAt         //编码    0-9对象48-57    a-z对应97-122  A-Z 对应65-90

3、String.fromCharCode(22937);     //根据Unicode 编码返回对应汉子

4、indextOf（‘w’,1）              //从左至右找对应字符串的位置，一个个参数为要找的字符，第二个参数为起始位置（默认从0开始）不能为负值；返回值为要找字符串的开始位置

5、lastIndexOf          //从右往走找对应字符串的位置

6、字符串比较，比较 Unicode 编码，第一位能比较出大小，之后就不比较了

7、str.substring(0,2)    //ww      参数可以互换位置str.substring(2,0)，结果一样

    str.substring()       //www.baidu.com     整个字符串

    str.substring(-3,2)  //ww       -3当0处理

8、str.slice(0,2)         //ww

    str.slice(2,0)         // 返回空，第2位找不到字符串的第0位            参数不能互换位置

    str.slice(-2)        //om         参数为负数，从后面开始截取

9、转换成大写：str.toUpperCase();

     转换成小写：str.toLowerCase();

10、将字符串转成数组

str.split(".");       //["www","baidu","com"]         不放分隔符，整个当成数组第一项

var str1="leo";   str1.split("")      //["l","e","o"]

var str2="我爱你";   str2.split(爱)     //["我","你"]

var str3="/www.baidu.com/";       str3.split("/");      //[ ""."www.baidu.com".""]    分隔符左右都占内容，如果左边没有字符，当空字符串处理

      str.split(".",2)     //["www","baidu"]    分隔后截取份数，第二个参数可选

11、var arr=["aa","bb",cc""];        //把数组进行拼接，没有参数的话默认用，连接

      arr.join();          //"aa,bb,cc"      

      arr.join("");        //"aabbcc"

      arr.join("-");       //"aa-bb-cc"

五、数组相关方法

1、JSON数据格式及语法格式

var json={"name":"leo",age:3,fun:"开发"};

for(var attr in json){                   

alert(attr);  //attr是键名，返回name,age,fun

alert(json[attr])  //返回键值，返回leo,3,开发

}

 

var json1={

　　"url":["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"],

　　"text":["图片1","图片2","图片3","图片4"]

};

for(var attr in json1){

　　for(var i=0;i<json1[attr].length;i++){

     　　alert(json1[attr[i]]);

}

}

2、for in可以遍历数组

var arr=["a","b","c"];

for i in arr{

　　alert(i);   //0,1,2

　　alert(arr[i]);  //a,b,c

}

3、快速清空数组arr.length=0;或者赋值空数组arr=[];对于长数组，后者方法相对效率高一点

4、数组的方法

var arr=[1,2,3];

• 添加：arr.push(4);     //push方法返回值为数组长度
• 往前面添加：arr.unshift(0);    //返回数组长度，IE6,IE7不支持此方法的返回值
• 删除：arr.pup();        //删除数组，返回被删除的对象
• 往前面删除：arr.shift();       //返回被删除的对象
• 指定删除：arr.splice(0,2);     //第一个参数为开始位置，第二个参数为删除几个，返回值为删除对象，修改数组长度
• 替换元素：arr.splice(0,1,4)  //替换第一个元素为4，返回删除的对象            //arr=[4,2,3]
• 在元素中间添加：arr.splice(1,0,5)    //  1位置开始，删除0个，替换为5，无返回值    //arr=[1,5,2,3]

六、排序

1、var arr=["c","d","a","e"]              arr.sort();      //a,c,d,e       //根据Unicode 编码，对字符进行排序

2、var arr1=[4,3,5,76,2,0,8]           arr1.sort();      //0,2,3,4,5,76,8       //默认情况下以字符串进行排序

3、比较排序函数

arr1.sort(function(a,b){

　　return a-b;           //第一个参数减去第二个   从小到大排序；第二个参数减去第一个   从大到小排序；

})

七、随机数

1、0~1之间随机小数：Math.random();

2、四舍五入：Math.round();

3、0~10之间整数：Math.round(Math.random()*10);

4、5~10之间整数：Math.round(Math.random()*5+5);

5、10~20之间整数：Math.round(Math.random()*10+10);

6、20~100之间整数：Math.round(Math.random()*80+20);

公式：X~Y之间整数：Math.round(Math.random()*(y-x)+x);

七、数学方法

向上取整：Math.cell(12.5)    //13

向下取整：Math.floor(12.5)  //12

四舍五入：Math.round(12.4);   //12

绝对值：Math.abs(-5)   //5 

八、其他方法

（一）concat数组连接

1、var arr1=[1,2,3];var arr1=[4,5,6];var arr1=[7,8,9];

     arr1.concat(arr2,arr3);      //1,2,3,4,5,6,7,8,9

（二）reverse数组颠倒

arr.reverse()              //3,2,1

注意：如何颠倒字符串？var str="abcdef";    str.split(").reverse().join("");

二 

DOM与BOM相关操作

一、DOM节点操作：文档对象模型

（一）childNodes兼容性问题较多

1、元素节点：1

2、文本节点：3

3、属性节点：2

元素.childNodes:只读  属性  子节点列表集合

　　　　标准下：包含了文本和元素类型的节点，并且也会包含非法嵌套的子节点

　　　　非标准下：只包含元素类型的节点，IE7以下不会包含非法嵌套的子节点

　　　　childNodes只包含一级子节点，不包含后辈节点

 

DOM节点的类型有很多种  12种

 

元素.nodeType:只读  属性  当前元素的节点类型

元素.attributes:只读  属性 属性列表集合

（二）children

元素.children:只读  属性  子节点列表集合

　　　　标准下：只包含元素类型的节点

　　　　非标准下：只包含元素类型的节点

元素.fristChild:只读  属性  第一个子节点

　　　　标准下：firstChild会包含文本年类型的节点

　　　　非标准下：只包含元素节点

元素.firstElementChild:只读  属性  标准下获取第一个元素类型的子节点

元素.lastChild||元素.lastElementChild 最后一个子节点

元素.nextSibling||元素.nextElementSibling下一个兄弟节点

元素.previousSibling||元素.previousElementSibling上一个兄弟节点

（三）父节点操作

元素.parentNode:只读 属性  当前节点的父级节点——没有兼容问题

元素.offsetParent:只读  属性  离当前元素最近的有定位的父节点；

　　　　　　　　　　　　　　 如果没有定位父级，默认是body

　　　　　　　　　　　　　　 ie7以下，如果当前元素没有定位，默认是body;如果有定位，则是HTML

　　　　　　　　　　　　　　 ie7以下，如果当前元素的某个父级触发了layout，那么offsetParent就会被指向到这个触发了layout特性的父节点

元素.offsetLeft:只读  属性  当前元素到定位父级的距离（偏移值）/（到当前元素的offsetParent的距离）

　　　　　　　　　　　　　如果没有定位父级，

　　　　　　　　　　　　　　　offsetParent指向body

　　　　　　　　　　　　　　　offsetLeft指向html

                                    如果有定位父级

                               　　　　ie7下：如果自己没有定位，那么offsetLeft(Top)是到body的距离

                                          其他：到定位父级的距离

（四）节点宽度操作

1、style.width:样式宽               //100

2、clientWidth:可视宽              //样式宽+padding

3、offsetWidth:占位宽             //样式宽+padding+border

（五）创建节点操作

document.createElement(标签名称)                         //创建元素

父级.appendChild(要添加的元素)方法                         //追加子元素：

父级.insertBefore (新的元素，被插入的元素)                //在指定的某个元素前面插入一个新元素

　　　　在IE下如果第二个参数的节点不存在，会报错

　　　　在其他标准浏览器下如果第二个参数的节点不存在，则会以appendChild的形式替代

父级.removerChild(要删除的元素)；                           //删除元素

父级.replaceChild(新节点,被替换节点)                         //替换元素

（六）表格操作

tHead:表格头

tBodies:表格正文

tFoot:表尾

　　rows:行

　　cells:列

（七）表单操作

onchange : 当值发生改变的时候触发

text : 当光标离开元素的时候再去判断值是否发生了变化，如果发生了变化则触发onchange事件

radio,checkbox:标准下点击的时候只要值变了那么久触发；非标准下焦点离开的时候如果值变了就触发

onsubmit : 当表单被提交的时候触发

submit():提交表单方法

onreset: 当表单被提交的时候触发

二、BOM操作：浏览器对象模型

（一）window.open(页面的地址url，打开方式)方法，打开一个新的窗口（页面）

1、如果url为空，则默认打开一个空白页面

2、如果打开方式为空，默认为新窗口方式打开

3、返回值：返回新打开的窗口的window对象

（二）window.close()方法，关闭窗口，有兼容问题

1、火狐：默认无法关闭，火狐禁止用代码关闭

2、chrome：默认直接关闭

3、IE：询问用户，弹出确认关闭窗口

4、可以关闭在本窗口中通过js方法打开的新窗口

（三）window.navigator.userAgent：浏览器信息，返回值为string

（四）window.location：浏览器地址信息（对象类型object）

1、window.location.href:地址栏地址

2、window.location.search:url?后面的内容

3、window.location.hash:url#后面的内容

（五）窗口尺寸与大小

1、可视区的尺寸：

document.documentElement.clientWidth

document.documentElement.clientHeight

2、滚动距离：

document.documentElement.scrollTop

document.documentElement.scrollLeft

兼容性处理：var scrollTop=document.documentElement.scrollTop||document.body.scrollTop

3、内容高

oDiv.scrollHeight

4、文档高度

document.documentElement.offsetHeight

兼容性处理：document.body.offsetHeight

5、onscroll:当滚动条滚动的时候触发

     onresize:当窗口大小改变的时候触发

 

js事件详解

一、焦点事件

焦点：使浏览器能够区分用户输入的对象，当一个元素有焦点的时候，那么他就可以接收用户的输入

设置焦点方式：点击、tab、js

onfocus:当元素获取到焦点的时候触发

onblur:当元素失去焦点的时候触发

obj.focus();给指定的元素设置焦点

obj.blur();取消指定元素的焦点

obj.select();选择制定元素里面的文本内容（用户输入的内容，可以操作可交互性元素的内容，例如P，div内的内容是无法全选的）

 

oText.onfocus=function(){

　　if(this.value=="请输入内容"){

　　　　this.value="";

　　}

}

oText.onblur=function(){

　　if(this.value==""){

　　　　this.value="请输入内容";

　　}

}

二、event事件对象

定义：当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细信息都会被临时保存到一直指定地方——event对象，供我们在需要的时候调用

事件函数：事件调用的函数，一个函数是不是事件函数，不在定义的时候决定，而是取决于这个函数调用的时候

ie/chrome:event是内置全局对象

标准下:事件对象是通过事件函数的第一个参数传入

如果一个函数是被事件调用的，那么 这个函数定义的第一个参数就是事件对象

 

兼容处理：vav ev=ev||event; 

 

clientX:当一个事件发生的时候，鼠标到页面可视区的距离

clientY:当一个事件发生的时候，鼠标到页面可视区的顶部距离

 

onmousemove:当鼠标在一个元素上面移动的时候触发

触发的频率不是像素，而是间隔时间，在一个指定的时间内（很短），如果鼠标的位置和上一次的位置发生了变化，那么就会触发一次

三、事件流

1、事件冒泡：当一个元素接收到事件，会吧他接收到的所有传播给他的父级

　  阻止冒泡：当前要阻止冒泡的事件函数中调用event.cancelBubble=true;

2、时间捕获：当一个元素接收到事件

　 　  

3、事件绑定

（1）给一个对象绑定一个事件处理函数：obj.onclick=fn;　　　　会覆盖前面绑定的函数，属于赋值形式

（2）给一个对象的同一个事件绑定多个不同的函数：

ie:obj.attachEvent(事件名称，事件函数)             document.attachEvent("onclick",fn1);

• • 没有捕获
  • 事件名称有on
  • 事件函数执行的顺序：标准ie——正序      非标准ie——倒序
  • this指向window

标准：obj.addEventListener(事件名称，事件函数，是否捕获)        document.addEventListener("click",fn2)      //默认是false  false:冒泡   true：捕获

 

• • 有捕获
  • 事件名称没有有on
  • 事件函数执行的顺序：正序
  • this指向触发该事件的对象

call()函数下的一个方法，call方法的第一个参数可以改变函数执行过程中的内部this的执行

调用函数：fn1()=fn1.call();

4、取消事件绑定

（1）第一种事件绑定取消方法：document.onclick=null;

（2）第二种事件绑定取消方法：

ie:obj.detachEvent(事件名称，事件函数)；

标准：obj.removeEventListener(事件名称，事件函数，是否捕获);

四、键盘事件

 

 1、onkeydown:当键盘按键按下的时候触发，如果按下不抬起，那么会连续触发

     onkeyup:当键盘按键抬起的时候触发

2、event.keyCode:数字类型  键盘按键的值  键值

    ctrlKey,shiftKey,altKey  布尔值

    当一个事件发生的时候，如果ctrl||shift||alt是按下的状态，返回true

    不是所有元素都能够接收键盘事件，能够响应用户输入的元素，能够接收焦点的元素就能够接收键盘事件

3、如何取消连续输入时间间隔

五、事件默认行为

1、定义：当一个事件发生的时候，浏览器自己会默认做得事情

2、如何阻止？

（1）当前这个行为是什么事件触发的，然后在这个事件处理函数中使用return false;

（2）oncontextmenu:右键菜单事件，当右键菜单（环境菜单）显示处理的时候触发

六、拖拽事件

1、setCapture   //设置全局捕获，当我们给一个元素设置全局捕获以后，那么这个元素就会监听后续发生的所有事件，当有事件发生的时候，就会被当前设置了全局捕获的元素所触发

ie:有,并且有效果

ff:有，但是没有效果

chrome:没有

 

释放全局捕获：releaseCapture

七、鼠标滚轮

ie/chrome : onmousewheel
event.wheelDelta（数字类型的值）
上：120
下：-120

firefox : DOMMouseScroll 必须用addEventListener
event.detail（数字类型的值）
上：-3
下：3

return false阻止的是 obj.on事件名称=fn 所触发的默认行为
addEventListener绑定的事件需要通过event下面的preventDefault();

八、cookie存储数据

定义：当用户访问某个网站（网页）的时候，我们可以通过cookie来像访问者电脑上存储数据

1、不同的浏览器存放cookie的位置不一样，也是不能通用的

2、cookie的存储是以域名形式进行区分的

3、cookie的数据可以设置名字的  document.cookie=“名字=值”——可读可写的属性

4、一个域名下存放的cookie的个数是有限制的，不同的浏览器存放的个数不一样

5、每个cookie存放的内容大小也是有限制的，不同的浏览器存放的大小不一样

 

我们通过document.cookie来获取当前网站下的cookie的时候，得到的字符串形式的值，他包含了当前网站下所有的cookie，他会把所有的cookie通过一个分号+空格的形式串联起来

 

var oDate=new Date();

oDate.setDate(oDate.getDate()+5);

oDate.toGMTSring();
如果我们想长时间存放一个cookie。需要在设置这个cookie的时候同时给他设置一个过期的时间：document.cookie = '名称=值;expires=' + 字符串格式的时间;

 

cookie默认是临时存储的，当浏览器关闭进程的时候自动撤销

 

内容最好编码存放，encodeURI，解码读取：decodeURI

 

参考：http://www.cnblogs.com/BetterMyself/p/5651703.html