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);