javascript教程

作用：交互
修改样式

事件 ：用户操作,
html引入js其他方式
js可以写在html行内中，不用通过script标签，比如标签绑定一个事件，onclick="divi.style.display='none' ;ivi.style.display='none' ;ivi.style.display='none' ;" 原来可以这样写，但在实际中不会这样做，这就引出函数的概念

函数

参数
形参：占位符，场景：不确定时时候，
当函数业务逻辑相似时，把多个函数写成一个，代码重用性;

注意

html中怎么写，js中就怎么写
1.用style加样式 作用在行间

2. 用style取样式， 也是取行间，如果行间没有就取不到
   styleg与className 如果用过style修改样式了再通过添加类名的方式，如果style有className修改过的属性，哪么通过className修改的方式没有效，原理style修改的样式加在行间（优先级）

提取行间事件

ECMAScript :解释器
DOM document

BOM windom

为什么数据类型转换
类型不是我们要的类型
parseInt()参数 字符串返回NaN
NaN 不等于NaN
isNaN() 是 不是数字 trun

闭包：子函数可以使用父函数的局部变量

//真：true ,非零数字， 非空字符串 非空对象
//假：false ,数字零， 空字符串 空对象 ， undefined

Json
访问
求值
没有length
怎么循环
for(var i in json)

arguments 数组

currentStyle

数组操作

添加

• push(元素)， 从尾部添加
• unshift(元素)， 从头部添加
  删除
• pop(), 从尾部弹出
• shift(),从头部弹出
  splice 万能操作 数组添加删除
• splice(开始，长度，元素。。。)
• 先删除，后插入
  删除
• splice(开始，长度)
  插入
• splice(开始，0，元素。。。。)
  替换
  数组连接合并
  arr.concat(arrb) 数组连接合并
  数组元素连接成字符串
  arr.join("-")
  排序

arr.sort();
arr.sort(function(n1,n2){
//return  n1-n2
if(n1<n2){
return -1
}
else if (n1>n2){
  return -1;
}
else{
return 0 ;
}
})

定时器的作用

开启定时器
var time =setInterval （funtion,100） 间隔型
setTimeout （funtion,100） 延时型
停止定时器
clearInterval(time)
clearTimeout（）

获取系统时间

Date对象
getHours , getMinutes, getSeconds
getFullYear(), getMonth(),getDate(), getDay()

字符串

str.charAt(0);获取字符串指定下标对应的字符

延时提示框
如果两个元素绑定的事件一样，可以用 连object1.onclick=object2 .onclik=function(){};
无缝滚动
运动本质，改变position
offsetLeft 元素左边距
offsetTop 上边距

DOM基础

标签 html
元素 js
节点 DOM
获取子节点
childNodes nodeType
children
会把空格当成文本节点，而nodeType可以判断文本节点还是元素节点

var oUl = document.getElementById("ul1");
for(var i=0;i<oUl.childNodes.length;i++){
if(oUl.childNodes[i].nodeType==1){
oUl.childNodes[i].style.background = 'red';
}
}

获取父节点
e.parentNode
offsetParent 定位的父节点

操纵元素属性

oDiv.style.display = "block";
oDiv.style['display'] = "block"
获取：getAttribut(名称)
设置：setAttribut(名称,值)
删除：removeAttribut(名称)

DOM元素灵活查找

className

DOM操作应用

创建元素

var oLi=document.createElement(标签名);
父级.appendChild(oLl);

插入元素
父级.insertBefore(节点，原有节点)

if(aLi.length>0){
  oUl.insertBefore(oLi,aLi[0])
}else{
  oUl.appendChild(oLi);
}

删除元素
父级.removeChild(节点) 删除一个节点

文档碎片

相当一个包 先把所有创建的元素装到文档碎片中，然后一次性装到父级中，减少浏览器渲染

var oUl = document.getElementById('ul1');
var oFrag = document.createDocumentFragment();//文档碎片
for(var i=0;i<10000;i++){
var oLi = document.createElement('li');
oFrag = appendchild(oLi);
}
oUl.appendChild(oFrag)

DOM高级应用

表格应用

oTab.tBodies[0].rows[1].cells[1].innerHTML

运动框架
像素 px 为什么没有小数， 电脑分辨率最小单位是1px,所以不能小于1，如果有小数，就会取整
所以运动中的left 不能取整的话，就不能到达目标位置

js事件高级应用

事件绑定

ev.attachEvent(事件名，函数)
addEventListener(事件名，函数，false);

function myAddEvent(obj,ev,fn){
  if(obj.attachEvent){
      obj.attachEvent('on'+ev,fn);
  }
 else
  {
      obj.addEventListener(ev,fn,false);
  }
}

解除绑定
dedtachEvent(事件名称，函数)
removeEventListener(事件名称，函数)

function myRemoveEvent(obj,ev,fn){
  if(obj.dedtachEvent){
      obj.dedtachEvent('on'+ev,fn);
  }
 else
  {
      obj.removeEventListener(ev,fn,false);
  }
}