分类：N10_前端
2016.01.07_js第一个特效，鼠标提示框
1. document.getElementById('').style.display='block'; //主要的是处理兼容性问题
2. onmouseover,onmouseout 鼠标移入，移出事件。
3. 例句：onmouseover="document.getElementById('').style.display='block';"
4. 编写JS的流程
布局：HTML+CSS
属性：确定要修改的属性
事件：确定用户做了那些操作（产品设计）
编写JS：在事件中，用JS来修改页面的样式
5. 初识函数
函数的格式, 例如：function toGreen(){代码}
变量的使用(变量可以理解为别名)
函数的定义和调用
函数定义：只是告诉系统有这个函数，不会实际执行
函数调用：真正执行函数里的代码
例子：function show(){ alert('abc');} //定义函数show() show();//调用函数，如果没有调用，则不起作用。就像法律与执行法律的，没有人执行，法律是没有用的。
2016.01.07_js第二个特效，网页换肤
1. 任何标签都可以加Id,包括link,html 等等。 例如：{OL.herf='2.css';}
2. 任何标签的任何属性都是可以修改的。
3. Html里面怎么写，JS里面就怎么写。{OL.title='abc';}
4. if语句的使用，用来判断
function showHide(){
var oDiv =document.getElementById('odiv');
if(oDiv.style.display=='block'){
oDiv.style.display='none';
}else{
} oDiv.styel.display='block';
}
5. 为a连接添加JS
<a href="javascript:;">连接</a> 点击时，页面不会有反映，不像#一样跳转。
6. ClassName的应用 应为Class是JS的关键字。所以，div的class，需要写成ClassName。
2016.01.07_函数传参，提取行间事件，循环，选项卡
1. 函数传参，
functions show(a,b){alert(a+b);} show(12,34); //show(a,b)中的a,b作用是占位符。
2. 属性操作的第二中方法，oTxt[name]='abc'
name可以是参数，可以是变量，比较灵活。 对比oTxt.value='abc'
变量和字符串的区别：
变量，参数，可以不用加引号，而字符串就要加引号。
.style 加样式，是加入到行间 从.style 取样式，也是从行间取出。
样式的优先级，行间的优先CSS的class,一般的style与class只用一种。
3. 提取行间事件，既是不在行间加如onclick等等的事件。
4. 匿名函数的格式 oBtn=function(){}
5. 为了不使js先加载，用Windows.onload=function(){}
6. 获得一个类型的元素。用：document.getElementsByTagName('div')
7. 循环while,例句
var i=0; //1,初始化
while(i<5){ //2,条件
alert(i); //3,语句
i=i+1; //4,自增
}
8. for循环，复选框，选中改为不选，不选改为选中。
2016.01.08_选项卡，年历
1. this:当前发生事件的元素
2. 自定义属性，index, 例如：oD[i].index=i adiv[this.index].style.display='block';
2个循环搞定，第一个是给所有的按钮加点击事件，第二个是让所有显示的隐藏。
3. 年历，修改div中的文字。innerHTML的使用,能在里面写HTML。如<h1>123</h1>
4. JS中字符串的连接"+"; 例如：alert('abc'+12+5+'def') 输出为abc125def,计算机是按循序相加。
如果是alert('abc'+(12+5)+'def') 输出为abc17def.
5. 数组的使用。
2016.01.08_JS的基础
JS组成：ECMAScript:用来翻译
DOM：document，object ,Model
BOM: browser , object ,Model
1. 变量的类型
常见的变量类型有：number,string,boolean,undefined,object,function
建议：一个变量应该只存一种类型的数据。
可以用typeof查看变量的类型。例如：var a=123 ;alert(typeof a);
2. 数据类型的转换
字符串转换成数字：parseInt() var a='34px' alert(parseInt(a); 结果为34
parseInt():只能转换整数；转成小数用parseFloat();
// NaN = not a number;没有数字 JS中NaN与NaN不等。
判断是不是NaN用：isNaN();
隐性的转换，== //先转换再比较。 ===//不转换，需要两边全等 -//先转换
3. 变量的作用域与闭包
局部变量与全局变量
闭包：子函数可以使用父函数的局部变量
4. 命名规范
命名规范及必要性
可读性-能看懂
规范性-符合规则
匈牙利命名法
类型前缀例如，字母大写：
类型 前缀 类型 例子
数组 a Array aItems
布尔值 b Boolean bIscomplete
浮点数 f float fPrice
函数 fn Function fnHandler
整数 i Integer iItemcount
对象 o Object oDiv1
正则表达式 re RegExp reEmailCheck
字符串 s String sUserName
变体变量 v Variant vAnything
5. 运算符
主要的几个运算符：+ - * / %
%取模， 例如：alert(7%2) 弹出的结果为3；
用于：隔行变色，if(i%2==0)
时间转秒，例如：var s=156; alert(parseInt(s/60)+'分'+s%60+'秒');
i++ // i+=1 //i=i+1 三个的效果是一样的。
!= / !==
&&:并且 // ||:或者 // !:否 调换真价值。
6. 程序流程控制语句
判断：if、switch、?:
switch(变量){
case 值1：
break;
case 值2；
break;
···
default：默认值;
}
?: 三元运算符； 代替if,else;
条件?(语句1):(语句2) 例如var a=15; a%2==0?alert('双数'):alert('单数')
循环：while 、for
跳出：break 、continue
什么是真，什么是假：
真：true、非零数字、非空字符串、非空对象
假：false、数字零、空字符串、空对象、undefined
7. Json {a:12,b:15,c:42} alert(json.a);//alert(json['a'])
循环用for(var i in json){ alert('第'+i+'个东西：'+json[i]);}
2016.01.08_深入Javascript;
函数的返回值 用：return,那里调用，返回到那里，但是返回值只有一个，要是多个，可以折中，用json
函数传参arguments:可变参，不定参。
var result=0; for(var i=0;i<arguments.length;i++){result+=arguments[i];}
return result;
alert(sum(12,13,14));
css()函数
css(oDiv,'width') 获取样式 css(oDiv,'width','200px') 设置样式
获取非行间的样式(不能用来设置)：
currentStyle 只是IE支持
getComputedStyle 兼容火狐，Chrome
alert(oDiv.currentStyle.width);
alert(getComputedStyle(oDiv,false),width);
几个同时兼容的模式
if(oDiv.currentStyle)
{
alert(oDiv.currentStyle.width);
}else{
alert(getComputedStyle(oDiv,false),width);
}
数组基础 数组的使用
定义 var arr=[12,13,14]; 或者 var arr=new Array(12,13,14);
数组的属性
length
既可以获取，也可以设置
例子：快速清空数组 oDiv.length=0;
数组使用原则：数组中应该只存在一中类型的变量数组的方法
添加
push(元素)，从尾部添加
unshift(元素)，从头部添加
删除
pop(),从尾部弹出
shift(),从头部弹出
splice (万能操作)
splice(开始，长度，元素...)
先删除，后插入
删除
splice(开始，长度)
插入
splice(开始，0，元素...)
替换
splice(开始，2，a,b) 先删除2个，后插入2个，等同与替换
转换类 ,数组的连接
concat()：连接两个数组 例如：var a=[1,2] var b=[3,4]
alert(a.concat(b))； 结果为[1,2,3,4]
join():拼接数组； 例如：var arr=[1,2,3] alert(arr.join('-'));
结果为[1-2-3];
排序
sort([比较函数]),排序一个数组 sort:只是认识字符串
排序一个字符串数组
排序一个数字数组
帮助sort认识数字例句：
var arr=[12,8,99,112]
arr.sort(function(n1,n2){
return n1-n2;
});
alert(arr);
2016.01.09_深入Javascript;
定时器的作用开启定时器
setInterval 间隔型 ; setInterval(要执行的函数,间隔时间)
例句：setInterval(show,1000);表示每个1000毫秒执行一次函数show()
setTimeout 延时型; setInterval(要执行的函数,延时的时间)
例句：setInterval(show,1000);表示隔1000毫秒后执行函数show(),仅仅执行一次函数
停止定时器
clearInterval 间隔型
clearTimeout 延时型
数码时钟效果思路获取系统时间
Date对象
getHours、getMinutes、getSeconds
var oDate=new Date()
var str=toDoule(oDate.getHours())+toDoule(oDate.getMinutes())+toDoule(oDate.getSeconds())
显示系统时间
字符串连接
空位补零
function toDoule(n){
if(n<10){
return '0'+n;
}else{
return ''+n;
}
}
跟随系统时间，改路径
function tick{ 获得当前时间，更改图片路径}
setInterval(tick,1000);
tick() //防止启动时为全零
设置图片路径
charAt方法，解决兼容模式问题 charAt(a)
aImg[i].src='img/'+str.charAt(i)+'.png';
Date对象其他方法
年：getFullYear()
月：getMonth() //特殊点:需要+1，(Date.getMonth()+1)
日：getDate()
星期：getDay()
延时提示框
效果演示
原来的方法：移入显示，移出隐藏
移出延时隐藏：移入下面的Div后，还是隐藏
简化代码：合并两个相同的mouseover和mouseout
var timer=null;
oDiv2.onmouseover=oDiv1.onmouseover=function()
{
clearTimeout(timer);
oDiv2.style.display='block';
}
oDiv2.onmouseout=oDiv1.onmouseout=function()
{
timer=setTimeout(function(){
oDiv2.style.display='none';
},500);
}
无缝滚动-基础
效果演示
物体运动基础 position:absolute;
让Div移动起来
offsetLeft的作用
用定时器让物体连续移动:定时的
无缝滚动
效果原理：让ul一直向左移动
复制li :innerHTML和+=
修改ul的width
滚动过边界后，设置位置：判断过界
无缝滚动-扩展
改变滚动反向
修改speed
修改判断条件
鼠标移入暂停
移入关闭定时器
移出重新开启定时器
例子：<head>
<style>
*{margin:0;padding:0;}
#div1{width:714px;height:108px;margin:100px auto;
position:relative;background:red;overflow:hidden}
#divl ul{position:absolute;left:0;top:0;}
#div1 ul li{float:left;width:178px;height:108px;list-style :none;}
</style>
</head>
<script>
window.onload=function()
{
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
oUl.styel.width=ali[0].offsetWidth*aLi.length+'px'
function move(){
if(oUl.offsetLeft<-oUl.offsetWidth/2)
{
oUl.style.left='0';
};
if(oUl.offsetLeft>0)
{
oUl.style.left=-oUl.offsetWidth/2+'px';
};
oUl.style.left=oUl.offsetLeft+speed+'px';
};
var timer=setInterval(move,30);
oDiv.onmouseover=function()
{
clearInterval(timer);
};
oDiv.onmouseout=function()
{
timer=setInterval(move,30);
};
document.getElementByTagName('a')[0].onclick=function()
{
speed=-2;
};
document.getElementByTagName('a')[0].onclick=function()
{
speed=2;
};
};
</script>
<body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<div id='div1'>
<ul>
<li><img src='#'/></li>
<li><img src='#'/></li>
<li><img src='#'/></li>
<li><img src='#'/></li>
</ul>
</div>
</body>
例子结束！
2016.01.09_DOM基础
DOM基础什么是DOM 为document
浏览器支持的情况 IE(6-8):10% 火狐：99% chrome:60%
DOM节点 节点，元素，标签，三个说的是同一个。
childNodes nodeType 配合循环子节点
for(var i=1;i<oUl.childNodes.length;i++)
{
if(oUl.childNodes[i].nodeType==1)
{
oUl.childNodes[i].style.background='red';
}
}
获取字节点
children //比nodeType好用
parentNode
例子：点击连接，隐藏整个li 利用<a>的父节点来操作li
offsetParent
例子：获取元素在页面上的实际位置
2.DOM基础2DOM节点(2)
首尾子节点
有兼容性问题
firstChild、firstElementChild
lastChild、lastElementChild
兄弟节点
有兼容性问题
nextSibling、nextElementSibling
previousSibling、previousElementSibling
兼容处理：例子
if(oUl.firstElementChild)
{
oUl.firstElementChild.style.background='red';
}
else{
oUl.fisrstChild.style.background='red';
}
操作元素属性元素属性操作
第一种：oDiv.style.display='block';
第二种：oDiv.style['display']='block';
第三种：Dom方式
DOM方式操作元素属性
获取：getAttribute(名称)
设置：setAttribute(名称，值)
删除：removeAttribute(名称)
DOM元素灵活查找
用className选择元素
如何用className选择元素
选出所有元素
同过className条件筛选
例句： //获取页面所有的class='box'元素，并且背景变为红色
for(var i=0;i<aLi.length;i++)
{
if(aLi[i].className=='box')
{
aLi[i].style.background='red';
}
}
封装成函数 className 经常用，可以封装成为一个函数
function getByClass(oParent,sclass){
var aResult=[];
var aEle=oparent.getElementByTagname('*');
for (var i=0;i<aEle.length;i++)
{
if(aEle[i].className==sClass)
{
aResult.push(aEle[i]);
}
}
}
使用例句： var aBox=getByClass(oUl,'box'); 获得oUl里面所有的class='box'元素
2016.01.09_DOM操作应用
创建DOM元素createElement(标签名) 创建一个节点
appendChile(节点) 追加一个节点
例子：为ul插入li
var oBtn=document.getElementById('btn1');
var oUl=document.getElementById('ul1');
var oTxt=document.getElementById('txt');
oBtn.onclick=function()
{
var oLi=document.createElement('li');
oLi.innerHTML=oTxt.value;
//父级.appendChild(子节点)；
oUl.appendChild(oLi);
}
插入元素
insertBefore(节点，原有节点) 在已有的元素前插入
例子：倒序插入li
var oBtn=document.getElementById('btn1');
var oUl=document.getElementById('ul1');
var oTxt=document.getElementById('txt');
oBtn.onclick=function()
{
var oLi=document.createElement('li');
var aLi=oUl.getElementsByTagName('li');//获得所有li,知道插入到那个li的前面
oLi.innerHTML=oTxt.value;
//父级.appendChild(子节点)；
if(aLi.length>0)
{
oUl.insertBefore(oLi,ali[0]);
}else{
oUl.appendChild(oLi);
}
}
删除DOM元素
removeChild(节点) 删除一个节点 例子：删除li var aA=document.getElementsByTagName('a'); var oUl=document.getElementById('ul1'); for(var i=0;i<aA.length;i++) { aA[i].onclick=function() { oUl.removeChild(this.parentNod); }; }文档碎片; 要插入的li,多个一起插入。 //现在基本没有什么用。只有低级的浏览器才有用。文档碎片可以提高DOM操作性能(理论上)
文档碎片原理 使用：document.createDocumentFragment() 例子： var oUl=document.getElementById('ul1'); var oFrag=document.createDocumentFragment(); for(var i=0;i<1000;i++) { var oLi=document.createElement('li'); oFrag.appendChild(oLi); } oUl.appendChild(0Frag);