作用：交互
修改样式
事件 ：用户操作,
html引入js其他方式
js可以写在html行内中，不用通过script标签，比如标签绑定一个事件，onclick="divi.style.display='none' ;ivi.style.display='none' ;ivi.style.display='none' ;" 原来可以这样写，但在实际中不会这样做，这就引出函数的概念
函数
参数
形参：占位符，场景：不确定时时候，
当函数业务逻辑相似时，把多个函数写成一个，代码重用性;
注意
html中怎么写，js中就怎么写
1.用style加样式 作用在行间
- 用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);
}
}
网友评论