首页 > 代码库 > JavaScript笔记(一)

JavaScript笔记(一)

JavaScript组成

EcmaScript:核心部分 作为解释器。几乎没有兼容性问题

DOM:Document Object Model,操作HTML页面的入口。有些操作不兼容。

BOM:Browser Object Model,和浏览器相关的操作。完全不兼容。

变量类型

变量本身没有类型,取决于内部存储的是什么类型。

类型转换

强制转换:parseInt(),parseFloat()。

隐式类型转换:==比较,先转换类型再比较;减法运算,只用于数字相减,所以会先转换再计算。

变量作用域

局部变量,全局变量。

闭包

子函数可以使用父函数中的局部变量。

命名规范

匈牙利命名法:.类型前缀,.首字母大写。

Json

用于存储数据

例如:var json={a:12,b:5,c:‘abc‘};

取出数据:(json.a)或json[‘a‘]

json中没有length属性,循环遍历用for...in。

函数返回值

1.返回的是函数执行结果

2.可以没有return,返回undefined

3.一个函数只有一个返回值

arguments:参数个数是可变的

arguments是一个数组,有argumemts.length属性

取非行间样式

行间样式:例如

---->oDiv.style.width;

非行间:currentStyle

oDiv.currentStyle.width;只兼容IE,其他浏览器(包括IE9)用getComputedStyle(Odiv,anything,width);

封装成获取样式的函数

function getStyle(obj,name){  if(obj.currentStyle)  {      return obj.currentStyle[name];      }      else      {       return getComputedStyle(obj,anything,name);      }}

获取复合样式,例如:background,需要具体到某一个单一样式,例如:background-color;

数组

定义:var a=[1,2,3];var a=new Array(1,2,3);

数组的方法:添加,push():向数组末尾添加一个值。

pop():在尾部删除一个值。

shift():从头部删除一个值。

unshift():从头部添加。

splice():数组的万能操作方法,splice(起点位置,长度):删除;splice(起点位置,0,“abc”):插入;splice(起点位置,长度,和长度同个数的新元素):替换。

contact():连接。

join(‘-‘):用某个符号连接数组元素。

sort():排序

比较函数

arr.sort(function(n1,n2){  return (n1-n2);});

DOM

DOM节点

子节点:childNodes (表现不一)/children(不包含文本节点,只包含元素节点), 节点类型:nodeType,父节点:parentNode, offsetParent:原理同absolute定位父级。

首尾子节点:firstChild和lastChild(有兼容问题,在IE6-8下可用,其他用firstElementChild和lastElementChild);

兄弟节点:nextSibling和previousSibling(同上兼容问题,对应nextElementSibling和previousElementSibling)。

元素属性操作

第一种:ODiv.style.display="block";

第二种:oDiv.style[‘display‘]=‘block‘;

第三种:DOM方式:setAttribute(‘name‘,‘value‘);

用className选择元素

封装getByClass()函数

function getByClass(oParent,sClass){

var aResult=[];

var aEle=oParent.getElementsByTagName(‘*‘);

for (var i=0;i<aEle.length;i++)

{ if (aEle[i].className==sClass) {

aResult.push(aEle[i]);

}

}

return aResult;

}

DOM操作应用

创建DOM元素

createElement(‘li‘),添加到父级下面:oUl.appendChild(‘oLi‘);

插入元素

insertBefore:同样在父级调用,区别是 父元素.insertBefore(子元素,在谁之前);

删除元素 父级.removeChild(子元素);

文档碎片 (基本不用了)

首先创建 oFrag=createDocumentFragment(); oFrag.appendChild(oLi); oUl.appenddChild(oFrag);








JavaScript笔记(一)