随笔记录的,全作以后参考,好者可参之
================无聊的分隔线=============================
2014-10-8 星期三
1. 变量,常量?有点开发经验的都懂的,不解释
2. HTML的 标签属性怎么写,在JS代码中对 HTML属性 进行操作时就怎么写,简单的说就是,HTML怎么写,JS就是怎么写!但要排除一个标签属性,那就是class属性,在JS中要以className的名字进行操作。这是因为class这个词是js中的保留字。
3. 定义变量是var , 设置对象用 set
4. JS操作HTML属性的两种方式,一个是点 “.” ,一个是方括号 "[ ]"。点 能表达的意思,方括号都能做到,但方括号能表达的意思 点却是做不到。如:
var oDiv=document.getElementById('div1'); '获取id="div1" 的div元素对象
oDiv.style.width='200px'; '设置div元素的宽度为200px
oDiv.style.height='200px'; '设置div元素的高度为200px
以上语句可写成
var oDiv=document.getElementById('div1'); '获取id="div1" 的div元素对象
oDiv.style['width']='200px'; '设置div元素的宽度为200px
oDiv.style['height']='200px'; '设置div元素的高度为200px
但当写成一个集成函数时,由于属性元素不固定,属性值不固定,所以需要两个参数,使用name表示属性元素,使用value表示属性值
function setAttr(name,value)
{
var oDiv=document.getElementById('div1'); '获取id="div1" 的div元素对象
’oDiv.style.name=vlaue; '这样的写法是不行的,无法执行的,JS不能智能识别name是这个函数参数,此时只有使用方括号
oDiv.style[name]=vlaue; '这样写才能行的通。
}
5. HTML 样式的优先级: *(通配符最低)< 标签 < class < ID < 行间
即:如果先操作
元素.style.属性=xxx '是修改了行间样式
之后再修改className,就不能覆盖上面的效果(优先级的原因)
建议:同一个标签使用同一种方式操作标签样式最好,不可交叉使用。
6. 提取行间事件。
由将事件写在行间对以后的调示工作会带来很多的不便,所以需要提取出来在JS中进行集中操作。
如:单击,双击,滑上,悬停,滑下等都是事件,同时需要知道,事件也同标签属性一样,可以被JS操作。
事件的值一般是一个函数。建议是一个匿名函数,因为给函数取名字也是一个纠结的事儿。
7. 事件执行前需要先加载完HTML页面,因为一个标签在未加载完时,写在<HEAD></HEAD>中的JS脚本是会报错的,特别是经过优化提取了行间事件后更容易页面报错。 须使用 window.οnlοad=function(){......}; ,即待页面load完成后,再执行Js代码。
8. 有了以上几件事情的发生,就构成一件事儿:即实现了,行为(即事件==JS),样式(CSS),结构(即HTML代码) 三者的分离操作。
9. 记住:获取 一个HTML元素 对象,使用 document.getElementById('id');
获取 一组HTML元素 对象,使用document.getElementsByTagName('标签名');
注意:如果对组进行操作,最好使用DIV将其进行分离并包含起来,再分别操作。
2014-10-9 星期四
10. 原来checkbox元素的checked属性值,在JS中使用true/false来设置的。
11. 这一点我想记下的就是中英文输入法切换的原因带来的不必要的麻烦,标点符号必须是英文输入法下输入,否则让你纠结到死。
12. this关键字,它的作用是代替当前所操作对象。如:oDiv.οnclick=function(){......this.........}; //中的this就是代表oDiv对象。同是注意自定义属性的使用,这个自定义属性必须通过JS添加上去,不能在行间元素中添加,因为主流浏览器不支持,会被过滤掉。
13. 选项卡式的切换效果,其实就是先禁用掉所有元素的效果显示,再启用指定的元素效果,原理就是这样。
14. innerHTML, 主要用于读写DIV , span等除input标签外的内容。意思就是说DIV的内容可以是HTML代码。
15. 如果有这样的一个字符串运算式:'abc'+23+5+'cde',其结果一定是'abc235cde',但是如果我要的是23+5的和呢,那么这时就要用到运符的优先级特性了,修改表达式为:'abc'+(23+5)+'cde' 那么结果就是'abc28cde‘了。
16. 定义数组的三种方式:
方式一:
var mycars=
mycars[1]="Volvo";
方式二:(常用)
var arr=['字符串1','字符串2',...];
方式三:
var arr2=new Array('字符串1','字符串2',...);
================无聊的分隔线=============================
17. 前面16项都也许有些比我还菜的鸟友不太懂,再来回顾一下基础:
javascript的核心是ECMAScript,说白了就一个命令解释器,就是人与电脑之间的翻译,将人类的操作命令解释给电脑听,再将电脑的语言解释给人类看。你不需要太明白这个,其实我也不太明白。大概了解一下,ECMAScript是javascript的核心就可以了。
其实,ECMAScript这个核心给javascript提供的功能也不多,加减乘除,变量定义等一些简单的操作,在DOM未出世的时间很不受待见。
DOM:Document Object Model 文档对象模型。其中的文档指的就是HTML,DOM的作用是就是赋于JS操作HTML的能力。即我们在JS中经常会用到的一个对象document。
BOM:Browser Object Model 浏览器对象模型。即BOM赋于JS操作浏览器的能力。即我们在JS中常用的对象window
18. 谈兼容性问题:
ECMA:几乎没有兼容性问题(细微处还是有的)
DOM:有一些操作不兼容
BOM:没有兼容性问题(其实意思是 完全不兼容,所以这个功能几乎也不用它)
19. JS中常见的六种数据类型:
var a=12;
//alert(typeof a); //number 数字类型
var a='abcdefg';
//alert(typeof a); //string 字符串类型
var a=true;
//alert(typeof a); //boolean 布尔类型
function a()
{
alert(‘abc’);
};
//alert(typeof a); //function 函数类型
var a=document;
//alert(typeof a); //object 对象类型
//alert(typeof b); //undefined 未定义类型(这个是真的未定义)
var b;
alert(typeof b); //undefined 未定义类型(这个虽说定义了,但没有被赋值,同样是未定义类型)
20. 数据类型转换:
字符串转数字:parseInt('字符串'); //从字符串的左边向右边找数字,碰到非数字的字符就会中断查找,只获取即得的数字显示出来。如果没有数字,则显示 NaN = Not a Number 非数字的意思。
注意:任何数 与 NaN 运算皆得NaN。但:两个NaN却是不相等的。
判断一个结果是否为NaN使用 isNaN();
字符串转小数:parseFloat('字符串'); 相对于parseInt来说,parseFloat()最常用。
相对上面两个显示转换,还有个隐式转换:
== 这个运算符是先将两边数据类型转换成一样的再比较,=== 这个运算则不是,它是比较两个原始数据。常用==运算符。
21. 变量的作用域:即变量有效的使用范围,分为局部变量和全局变量,不细说,自个百度去。
22. 闭包:百度出来的意思说的乱七八槽,简直不是人话。
闭包说白了就一句话,即:子函数可以使用父函数的局部变量!我们不知道不代表我们没用过,这名词就是一大忽悠闲着淡疼想出来的。
都是最平常不过的事儿,所以建议别去想这个概念,自然就好。
23. JS命名规范:有规则,可读性强。建议建立自己的类型前缀+首字母大写。
常见的数据类型前缀:
数组:a
布尔:b
浮点:f
函数:fn
整数:i
对象:o
正则:re
字符串:s
变体变量:v
2014-10-10 星期五
24.运算符:
算术:+ ,- ,* ,/ ,%(取模) ;加减乘除就不用说了,取模意思就是求余数,如:10%3=1 可用于隔行变色或秒转时间的功能实现。
赋值:= ,+= ,-= ,*= ,/= ,%=
关系:< , > , <= , >= , == , === , != , !==
逻辑:&&(且) ,||(或) ,!(非)
运算符优先级:括号(可改变运算符优先级的符号)
25. 程序流程控制
判断:if, switch, ?:
循环:while, for
跳出:break, continue
什么是真:true , 非零数字,非空字符串,非空对象
什么是假:false,数字零,空字符串,空对象(NULL),undefined
26. JSON
什么是JSON? 它是基于JS的一种数据交换格式。
JSON的格式类似于数组,但定义方式不同,数组使用 [ ] 符号,JSON使用 { } 符号
如:数组,var arr=[1,2,3,4,5,6];
而JSON,var json={a:1,b:2,c:3,d:4}; //a,b,c,d这几个相当于是变量," : " 后是变量的值,这个有别于数组,数据是成对的也可以叫键值对。
如果JS中定义几个变量:
var a=1;
var b=2;
var c=3;
这样还不如写成JSON格式:var json={a:1,b:2,c:3,d:‘abc’};
如果要使用JSON中的各项值: alert(json.a); //如此即可,同样可以通过之种方式被作为变量进行操作,如,json.a++;
JSON和数组:
实例说明:
var json={a:12, b:5, c:7}; //json
var arr=[12, 5, 7]; //数组
操作数据:
alert(json.a); //显示json数据项
alert(arr[0]); //显示数组数据项
区别:
操作json数据的方式还可以这个样子:
alert(json['a']); //和先前讲的HTML元素属性操作一样,有点的地方都可以使用 [ ] 符号代替。
说明:JSON的下标可以是字符串,而数组的下标只能是数字。
JSON和FOR IN
另一区别是:json不像数组一样有length属性。由循环读取的方式如下:
读取数组:
for(var i=0; i<arr.length; i++){ alert(arr[i]); } 也可以 for(var i in arr){ alert(arr[i]); } //可以使用for循环,也可以使用for...in...
读取JSON:
for(var i in json){ alert(json[i]); } //只能使用 for...in...
================无聊的分隔线=============================
27. 函数返回值
如:function test(){ return 值; } 也可以 function test(参数1,参数2,....){ ...语名... ; return 结果; }
但是:一个函数应该只返回一个类型的值。
但是:如果使用JSON数据类型,那。。。返回的值就可以打破上面的限制了。
当然,也可以不使用return
28. 函数传参
可变参(不定参):arguments 【这个很重要】
参数的个数可变,参数数组的应用
arguments是个数组,默认这个数组里存的是函数的参数,不管几个参数都在这里面了。
如:function sum(){ ...... } ,看这个函数可知,它里面没有参数,但如果在使用过程中添加了参数进去呢,那不是要报错吗?也许会,但如果使用了arguments这个数组来操作,也许就不会了。就把arguments当成一个数组,数组中的每一项都是参数。
例:
function sum()
{
var result=0;
for(var i=0; i<arguments.length; i++)
{
result += arguments[i];
}
return result;
}
针对上面sum()这个函数,
我可以这样调用:var a = sum(1,2,3,4,5); 返回的结果就是a=15;
我也可以这样用:var a=sum(1,2,3,4,5,6,7,8,9,10); 返回的结果是a=55;
由以上可知,参数个数是不固定的,当然,你也可以不给参数,那a=0; 不知道你是否明白,不明白就是回家抱孩子去,呵呵!
再一例:
写个函数,功能:当此函数的参数为2个时的功能是从元素中获取元素样式的值,当参数为3个时,就是设置指定的样式。
两个参数:一个是元素对象,一个是元素样式
三个参数:一个是元素对象,一个是元素样式,一个是样式值 【注:参数顺序不能变】
function css()
{
if(arguments.length == 2)
{
return arguments[0].style.arguments[1];
}
else
{
arguments[0].style.arguments[1] = arguments[2];
}
}
这时有这么一个元素,它的样式是这个的:
#div1{ width:200px; height:200px; border:1px solid red; background:red}
我在JS中这么来写:
window.οnlοad=function(){
var oDiv = document.getElementById('div1'); //获取要操作对象指定样式的值
var a = css(oDiv, 'width'); //带入两个参数,意思就是获取或说读取
alert(a); //结果是 200px
var b = css(oDiv, 'background', 'green'); //设置样式
alert(b); //结果是,被操作对象的样式 背景色被修改为绿色
};
当然,如果确定了这个函数的功能后,可以这样改一下:
function css(obj, name, value)
{
if(arguments.length == 2)
{
return obj.style[name]; //注意这里要将 点 修改为 [ ] ,否则会报错
}
else
{
obj.style[name] = vlaue;
}
}
29. 如何取非行间的样式 currentStyle
如果样式是写在行间的,我们可以通过 对象.style.样式名 这种方式获取到,但如果是写在样式表里的,使用这个方法就不能获取了。
如果不是行间样式,我们可以使用 currentStyle 换掉 style ,即:对象.currentStyle.样式名 以这种方式就可以获取当前使用的样式了。
当然:先不要高兴的太早,好东西总是存在不兼容的现象,currentStyle就只能兼容IE,在其它浏览器下是用不了的,会报错的。
那么其它浏览器如何实现这个提取非行间样式功能的呢?
Chrome 最新版本已经支持 currentStyle了
FireFox 用的是独自的方式 getComputedStyle(对象,任意值) 如:alert( getComputedStyle(oDiv, false).width); //就是获取oDiv对象的宽度样式值。参数中除了oDiv必须滴以外,另一个参数你写什么都行,无所谓,它就是一废参。但是它却又不被IE兼容
那么既然存在浏览器间的兼容问题,就要想个完美的解决方案了:
if(oDiv.currentStyle)
{ //因为currentStyle在IE中 alert 弹出的是一个对象,而在FF中弹出的是undefined,在真假判断中undefined是false,所以
alert(oDiv.currentStyle.width);
}
else
{
alert(getComputedStyle(oDiv,false).width);
}
封装成一个函数:
function getStyle(obj, name) //obj 操作对象,name要获取的样式
{
if(obj.currentStyle)
{ //因为currentStyle在IE中 alert 弹出的是一个对象,而在FF中弹出的是undefined,在真假判断中undefined是false,所以
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj,false)[name];
}
}
但是 ,对于background , border, margin 等这些复合样式(即其有很多部分组成的),上面那个函数是无法获取的,它只能对单一样式进行操作,如: backgroundColor
30. 数组基础:很基础,很好用,很重要
数组定义:
var arr=[1, 2, 3, 4, 5];
var arr=new Array(1, 3, 4, 5, 6, 7);
以上两种方式,都对,但 [ ] 的性能略高,因为代码短
数组的属性:length 既可以获取 ,又可以设置。使用这个方法,可以快速清空数组,直接设置 数组.length=0 就可了。
数组使用原则:数组中应该只存一种类型的数据。
31. 数组的方法:设:定义数组 arr
添加元素:
arr.push(元素),从尾部添加
arr.unshift(元素), 从头部添加
删除元素:
arr.pop(), 从尾部弹出
arr.shift(), 从头部弹出
元素排序
arr. sort([比较函数]), 排序一个数组, 如果只是这样:arr.sort() 默认sort只按字母顺序排序,这样就不适用于数字排序。
排序一个字符串数组
arr.sort(); 这样子就可以了
排序一个数字数组
数字数组排序要这样:arr.sort( function(n1,n2){return n1-n2;} );
转换类
arr.concat(数组2)
连接两个数组
arr. join(分隔符)
用分隔符,组合数组元素,生成字符串
字符串split
插入,删除
splice替换
arr. splice(开始,长度,元素......)
先删除,后插入
删除
arr. splice(开始,长度)
插入
arr. splice(开始,0,元素......)
================无聊的分隔线=============================
2014-10-11 周六
32. 定时器的作用
开启定时器:
setInterval 间隔型
语法:setInterval(函数名, 间隔时间长度);
function show(){ alert('a'); }
如:setInterval(show, 1000); //1000ms=1s,每隔1秒执行1次
setTimeout 延时型:
语法:setTimeout(函数名, 时间长度);
function show(){ alert('a'); }
如:setTimeout(show, 1000); //1000ms=1s,只执行一次,执行时长为1秒
【注意】:每个定时器都是有返回值的,这利用其返回值进行下面两个功能的实现
如:var timer1=setInterval(show, 1000);
如:var timer2=setTimeout(show, 1000);
停止定时器:
clearInterval
语法:clearInterval(定时器名);
如:clearInterval(timer1);
clearTimeout
语法:clearTimeout (定时器名);
如:clearTimeout (timer2);
33. 数码时钟实例
获取系统时间:
Date对象
var oDate = new Date();
getHours, getMinutes, getSeconds
如:alert(oDate.getHours());
显示系统时间:
字符串连接
【注意】字符串也是数组,可以当成数组操作。如:var a='abc123'; 可以使用 a.length 获取字符串的长度,a[0] == a ,其它你懂的。
但是,这个简单易用的功能只有高版本的浏览器才兼容,如IE7就不能识别这种写法。
空位补零
【注意】因为获取系统时间 oDate.getHours(); 小于10的数字时它的空位被过滤,所以需要在数据小于10时进行补字符’0‘的操作。
因为js中数字字符相加会被解释成加法运算,而不是字符串连接,所以当时间数字即时是大于等于10的时候也要加一个空字符。
如:
function toDouNum(n) //此函数可以解决字符连接问题
{
return n<10 ? ('0'+n) : (''+n);
}
设置图片路径:
采用字符串匹配图片名的方式来,时时获取系统时间 ,再通过系统时间对象获取时分秒,生成字符串,再通过 str.charAt(n) 匹配图片名称。
charAt方法: 它本身的功能就是取字符串中的某一位。
上面提到的字符串数组使用,如上:var a='abc123'; 当使用a[1] 这种方式到获取字符串中某元素时,只有高版本的浏览器才支持这种写法,像IE7这个版本就不支持。所以有charAt方法,a[1] 改写成 a.charAt(1) 这样就可以兼容了。
34. Date对象的其他方法
年:oDate.getFullYear()
月:oDate.getMonth() //默认从0开始,使用时须加1.
日:oDate.getDate()
星期:oDate.getDay() //0, 1, 2, 3, 4, 5, 6
35. 延时提示框 实例
1. 鼠标移入A 显示B,移出A 就隐藏B //用到的事件onmouseover, onmouseout
2. 鼠标从A,移到B,中间需要有延时,即B隐藏需要进行延时且要去除B的隐藏 //setTimeout, clearTimeout
3. 鼠标从B中移出时,中间也需要延时。即B执行延时隐藏
【注意】:每完成一个功能后,首先要做的是优化代码,能减则减,能合并就合并,减少代码冗余量。
36. 无缝滚动--基础
物体运动的基础
1. DIV的移动 //必须对元素先定位,绝对定位position:absolute;
2. offsetleft 的作用 //获取元素的左边距,最大的优点是能综合考虑所有影响物体位置的因素,得出最终结论。
【注意】:类似的还有:offsetTop, offsetWidth, offsetHeight
3. 用定时器让物体连续移动
4. 效果原理:让ul 一直向左移动
5. 复制 li :InnerHTML 和 += , 修改ul 的 width // 注意overflow:hidden 对DIV内容溢出的处理
如:var oDiv = document.getElementById('div'); //如果要对oDiv中的内容进行复制,使用InnerHTML如下操作
oDiv.innerHTML += oDiv.innerHTML;
6. 滚动过界后,重设位置:判断过界
//将滚动内容复制左移,以 “-” 号代表方向:左移距离 = -滚动内容/2 时还原初始位置
【注意】:距离运算中,别忘了连接上单位 'px' 。
7. 无缝滚动--扩展
1. 改变滚动方向:添加一个位移变量,根据用户点击判断 设置变量正负方向
2. 鼠标移入暂停:入则clearInterval关闭定时器,出则setInterval开启定时器
================无聊的分隔线=============================
37. DOM基础
DOM基础:
什么是DOM? DOM= Document Object Model 文档对象模型,是JS的最重要组成部分
浏览器支持情况:FF > Chrome > IE9 【IE6~8 对DOM的支持更差】
DOM节点(1):
childNodes(表示一个集合数组) nodeType(节点类型:文本节点或空白==3,元素节点==1)
如何获取节点
children 【相似于childNodes,但是它只包括元素节点而不包括文本和空白】
parentNode 父节点【如:点击连接,隐藏整个 li 】
offsetParent 【获取元素在页面上有定位样式的父级对象】
【关于绝对定位】:绝对定位要起作用,是根据上一级即父级是否有定位来决定的,如果父级没有定位则向上查找直至BODY
DOM节点(2):
首尾子节点
有兼容问题
firstChild (适用于IE7等低版本), firstElementChild (适用于IE9等高版本)
lastChild (适用于IE7等低版本),, lastElementChild (适用于IE9等高版本)
【注意】:针对兼容问题的解决办法就是,判断真假。如下:
if(oDiv.firstChild){ oDiv.firstChild.style.background='red'; }else{ oDiv.firstElementChild.style.background='red'; }
兄弟节点
有兼容问题(问题如上)
nextSibling, nextElementSibling
previousSibling, previousElementSibling
【注意】:兼容问题解决方法如上
38. 操纵元素属性
元素属性的操作
1. oDiv.style.display = 'block';
2. oDiv.style['display'] = 'block';
3. Dom方式:
DOM方式操作元素属性
获取:getAttribute(属性名称);
设置:setAttribute(属性名称,值);
删除:removeAttribute(属性名称);
39. DOM元素灵活查找
用className选择元素,由此还封装了一个函数,通过父级对象和子级下的className来过滤元素。
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;
}
2014-10-12 周日
40. 创建,插入和删除元素
创建DOM元素
document. createElement(标签名) //创建一个节点
父对象.appendChild(节点) //追加一个节点
如:为 ul 插入 li 节点
插入元素
父对象.insertBefore(节点,原有节点) //在已有元素前插入,原有节点就是第一个节点,如果没有第一个节点,就直接 父对象.insertBefore(节点)即可,这里需要进行一次判断,由此可以避免兼容问题
如:倒序插入 li
删除DOM元素
父对象.removeChild(节点) //删除一个节点
如:删除 li
41. 文档碎片
1. 文档碎片可以提高DOM操作性能(理论上是这么说的)
2. 文档碎片原理
3. document.createDocumentFragment() //只适用于低版本的浏览器(低于IE9版本,不常用,只用于大批量的元素操作)
================无聊的分隔线=============================
42. 表格应用 --1
获取
tBodies, tHead, tFoot, rows 行, cells 单元格
如:getElementsByTagName('tbody')[0] 可以简写为 tBodies[0] //这是专为表格定义的功能
【注意】:一个表格只能有一个表头和表尾,但可以多个 tBody, 所以要用tBodies.
【注意】:操作表格时,万不可忘记tbody这个标签,否则你懂的。
隔行变色
鼠标移入高亮
添加,删除一行
DOM方法的使用
43. 表格应用 --2
搜索【实例操作】
版本1:基础版本---字符串比较
版本2:忽略大小写---大小转换 //使用大小写转换的方法,大写转小写: 字符串.toLowerCase() 小写转大写: toUpperCase()
版本3:模糊搜索---search的使用 //JS的一个方法:字符串.search(关键字); 没找到就返回 -1
版本4:多关键字---split //JS的一个方法:字符串.split(关键字);
高亮显示, 筛选
2014-10-13 周一
44. 表格应用 -- 排序
移动 Li
appendChild的真正功能是:先将元素从原父级下删除掉,再将元素添加到新的父级下。
如:var aLi=document.getElementsByTagName('li'); //其实aLi并不是一个真正意义上的Array对象,因为数组对象特有sort()方法,它真的用不了,可aLi却可以使用length和方括号这两个数组特性。除非你循环将这个集合aLi,push到一个真正的数组中去。然后,sort(function(){});//看到没,sort()方法中可以放函数的。
元素排序:转换---排序---插入
转换就是:将Li或表格元素集合转换成真正的数组。
排序就是:数组.sort(function(tr1,tr2){....});
插入就是:将排序好的数组,再通过循环方法,appendChild到Li或Tr 的父对象中去
45. 表单应用 -- 1
什么是表单?主要作用就是向服务器提交数据的。如:用户注册,其中的action属性值就是代表提交到哪里。
表单事件?onsubmit 提交时发生的事件,onreset 重置时发生的事件。
46. 表单应用 -- 2
阻止用户输入非法字符---阻止事件
输入时,失去焦点时验证 onkeyup, onblur
提交时检查 onsubmit
后台数据检查
================无聊的分隔线=============================
2014-10-14 周二
47. 运动基础
1. 让DIV运动起来:
主要使用DIV对象的offsetLeft, setInterval, clearInterval 等属性方法来实现。
2. 速度--物体运动的快慢【修改物体每次移动距离的长短】
3. 运动中的BUG
不会停止【可限制物体运动距离】
速度取某些值会无法停止【注意比较运算符的使用】
到达位置后再点击还会运动【使用条件判断来解决】
重复点击速度加快
【注意】:注意定时器的使用,在点击按钮开启一个定时器时,不管有没有开先进行一次关闭定时器操作,此操作是用于避免,因用户多次点击按钮而导致开多个定时器。
4. 匀速运动
速度不变的运动
48. 运动框架及应用
运动框架【所谓框架说白了就是前人总结的经验基础上设定好的做事流程】
在开始运动时,关闭已有定时器
把运动和停止隔开(if...else...)
运动框架实例
1. ‘分享到’ 侧边栏
通过目标点,计算速度值【根据当前位置与目标位置的比较确定方向是正还是负】
这里就上面实例,封装一个函数:
var timer = null;
//var alpha;
function startMove(iTarget) 【此函数适用于侧边栏实例】
{
var oDiv=document.getElementById('div1');
clearInterval(timer); //打开定时器前先清空当前运行的定时器,即使没有也要执行。
var speed = 0;
if(iTarget > oDiv.offsetLeft) //根据目前点与当前位置的比较确定,物体移动的方向
{
speed = 10;
}
else
{
speed = -10;
}
timer= setIterval(function(){
if(iTarget == oDiv.offsetLeft) //当物体到达目录位置时,清空定时器
{
clearInterval(timer);
}
else
{
oDiv.style.left = oDiv.offsetLeft + speed + 'px'; //以指定的速度向目标位置移动
}
},30);
}
2. 淡入淡出的图片
用变量存储透明度
var timer = null;
var alpha=30;
function startMove(iTarget) 【此函数适用于透明度变化实例】
{
var oDiv=document.getElementById('div1');
clearInterval(timer); //打开定时器前先清空当前运行的定时器,即使没有也要执行。
var speed = 0;
if(iTarget > alpha) //根据目标透明度,确定alpha是增还是减
{
speed = 10;
}
else
{
speed = -10;
}
timer = setInterval(function(){
if(iTarget == alpha)
{
clearInterval(timer);
}
else
{
alpha += speed;
oDiv.style.filter = 'alpha(opacity:' + alpha + ')'
oDiv.style.opacity=alpha/100;
}
},30);
}
49. 缓冲运动
逐渐变慢,最后停止
距离越远速度越大
速度由距离决定
速度 = (目标值-当前值)/缩放系数
【注意】document.title 这个文档属性可以更改网页标题。
【注意】像素是计算机能接受的最小显示单位,无四舍五入之说。
Math对象:Math.ceil(3.1) 向上取整 4,Math.floor(3.9) 向下取整 3
【做缓冲运动的效果时,一定要记得取整。】
var timer = null;
function startMove(iTarget) 【此函数适用于缓冲运动】
{
var oDiv=document.getElementById('div1');
clearInterval(timer); //打开定时器前先清空当前运行的定时器,即使没有也要执行。
timer= setIterval(function(){
var speed = (iTarget - oDiv.offsetLeft)/5
speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
if(iTarget == oDiv.offsetLeft) //当物体到达目录位置时,清空定时器
{
clearInterval(timer);
}
else
{
oDiv.style.left = oDiv.offsetLeft + speed + 'px'; //以指定的速度向目标位置移动
}
},30);
}
例子:缓冲菜单
bug: 速度取整
跟随页面滚动的缓冲侧边栏
潜在问题:目标值不是整数时【注意速度取整操作】
【注意】 window.onscroll 这个事件的使用。即,当用户滚动浏览器的滚动条时发生的事件处理程序
scrollTop 的兼容性写法:scrollTop指的是滚动条距离页面顶部的距离,如下:
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
也见有如下写:
var scrollTop = document.documentElement.scrollTop + document.body.scrollTop;
当页面加入DTD标示后 document.documentElement.scrollTop的值在IE和FF下正常,但document.body.scrollTop一直为0。在Chrome下就反过来了。
<script type="text/javascript">
window.οnscrοll=function(){
var oDiv=document.getElementById('div1');
var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;//兼容性写法
startMove(document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop);
};//解释:浏览器可视区域 减去 物体的本身高度 加上 页面顶部到可视区域顶部的距离,如上图示
//如果是修改成对联式的悬浮框,作如下修改:
//startMove(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight)/2 + scrollTop));
};//注意这里用了parseInt这个方法,因为除以2可能会产生小数位数,由此效果中悬浮框会有抖动。因此要取整
var timer=null;
function startMove(iTarget)
{
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
var speed=(iTarget-oDiv.offsetTop)/4;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(iTarget == oDiv.offsetTop)
{
clearInterval(timer);
}
else
{
oDiv.style.top = oDiv.offsetTop + speed + 'px';
}
},30);
}
</script>
50. 匀速运动停止条件
匀速运动:距离足够近
缓冲运动:两点重合
【注意】:物体匀速运动中,如果速度是无法被整减为0时,结果会使物体抖动的厉害,这里建议使用Math.abs(); 。
当距离目标距离小于速度值是,对进行条件判断。
如:
if(Math.abs(iTarget - oDiv.offsetLeft) <= 7)
{
clearInterval(timer);
oDiv.style.left = iTartget + 'px';
}
else
{
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
================无聊的分隔线=============================
2014-10-15 周三
51. 多物体运动框架
多个物体同时运动
实例:多个DIV,鼠标移入变宽
单定时器,存在问题【多物体不能使用同个定时器,也可说成一个确实不够用】
每个DIV一个定时器【这里把定时器当作一个物体的属性如:aDiv[i].timer = null】
多物体运动框架
定时器作为物体的属性
参数的传递:物体,目标值
例:多个DIV淡入淡出
所有东西都不能公用【注意这一句】
属性与运动对象绑定:速度,其他属性值(如透明度等)
【注意:在多物体运动框架中,所有的东西都不能共用】
<script type="text/javascript">
window.οnlοad=function(){
var aDiv=document.getElementsByTagName('div');
for(var i=0; i<aDiv.length; i++)
{
aDiv[i].timer=null;
aDiv[i].οnmοuseοver=function(){
startMove(this,800);
};
aDiv[i].οnmοuseοut=function(){
startMove(this,100);
};
}
};
//var timer=null;
function startMove(obj,iTarget)
{
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=(iTarget - obj.offsetWidth)/4;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(iTarget == obj.offsetWidth)
{
clearInterval(obj.timer);
}
else
{
obj.style.width = obj.offsetWidth + speed +'px';
}
},30);
}
</script>
【多物体框架中,不能有共用的东西】如上面的透明度变化函数也要做如下修改:
function startMove(obj, iTarget) 【此函数适用于透明度变化实例】
{
clearInterval(timer); //打开定时器前先清空当前运行的定时器,即使没有也要执行。
var speed=(iTarget - obj.alpha)/4;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
obj. timer = setInterval(function(){
if(iTarget == obj.alpha)
{
clearInterval(timer);
}
else
{
obj.alpha += speed;
oDiv.style.filter = 'alpha(opacity:' + obj.alpha + ')'
oDiv.style.opacity=obj.alpha/100;
}
},30);
}
52. 任意值运动框架
offset属性的Bug
有边框的DIV宽度在减1的运动中却变宽而不是变窄
此问题的解决方法是,用currentStyle代替offset
【offset取的是DIV盒子模型的长宽高的值,一个宽是100,边框是1的DIV,在做变宽运动的过程中,因为宽是100,而offsetWidth的值却是102, 减1后,是101.每间隔执行一次, offsetWidth都是加2,这个width就不是减1,反而是加1了.】
原有运动框架的问题
只能让某个值运动起来
如果想让其他值运动起来,则需要复制修改程序块
扩展的运动框架
要参与运动属性作为参数
封闭opacity
小数的问题。
Math.round() 方法,对小数时行四舍五入操作。
【注意】:计算机是不能真正存储一个小数,大多是小数的近似值。所以有时会产品这样那样的误差。
function getStyle(obj, name) //获取指定样式
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj,false)[name];
}
}
function startMove(obj, attr, iTarget) //任意运动框架函数
{
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var cur=0;
if(attr == 'opacity')
{
//cur = parseFloat(getStyle(obj,attr))*100; //因为取整会使样式中的,兼容于FF/chrome浏览器的 opacity样式 小于1的值,取整后为0。所以这里要对运动的样式进行判断。【但是】:这个地方易产品误差,还需要优化调整。如下:
cur = Math.round(parseFloat(getStyle(obj,attr))*100);
}
else
{
cur = parseInt(getStyle(obj,attr));
}
var speed=(iTarget-cur)/5;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(iTarget == cur)
{
clearInterval(obj.timer)
}
else
{
if(attr=='opacity')
{
//alert(cur+speed);
document.title=speed+cur;
obj.style.filter='alpha(opacity:'+(cur+speed)+')'
obj.style.opacity = (cur+speed)/100;
}
else
{
obj.style[attr]=cur+speed+'px';
}
}
},30);
}
2014-10-16 周四
53. 仿Flash图片展示--1
效果思路【重要的是元素布局】
1.两边的按钮---淡入淡出【这部分简单】
2.大图下拉---层级,高度变化【技巧在下拉的效果,切换是通过zIndex层次高低来实现】
3.下方的 li---多物体淡入淡出【跟按钮一样的】
4.下的的 UI ---位置计算
左右按钮
1.淡入淡出
鼠标移到按钮上,按钮会消失
层级问题
按钮和遮罩上都得加上事件
【注意】:此实例涉及前面的学习知识,如淡入淡出,无缝滚动,自定义属性,setInterval定时器,clearInterval(),及div, ul, li三者布局的应用。
2014-10-17 周五
54. 仿Flash图片展示 --2
1.下方li 效果
2.点击切换大图 ---- 选项卡效果应用
3.li 淡入淡出 --- 移入移出
4. Ul 移动 --- 位置计算
大图片切换
1. 图片层级 ----zIndex+1【每切换一次加1】
2. 图片下拉效果(应用前面讲的 任意运动框架 封装好的函数)
加入自动播放
1.定时器的应用 。
================无聊的分隔线=============================
55. 链式运动框架
回调函数
1. 运动停止时,执行函数
2. 运动停止时,开始下一次运动
3. 例子:土豆网右下角菜单
【注意】:注意这个所谓的 链式运动框架 就是在原来的那个 任意运动框架 的基础上,添加一个 函数参数 如:
functio startMove(obj, name, iTarget, fnEnd) //fnEndI() 这个函数是在运动结束时执行的一个函数,修改如下,仅加了一个函数参数和一条语句:
function startMove(obj, attr, iTarget, fnEnd) //任意运动框架函数,追加一个函数参数
{
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var cur=0;
if(attr == 'opacity')
{
//cur = parseFloat(getStyle(obj,attr))*100; //因为取整会使样式中的,兼容于FF/chrome浏览器的 opacity样式 小于1的值,取整后为0。所以这里要对运动的样式进行判断。【但是】:这个地方易产品误差,还需要优化调整。如下:
cur = Math.round(parseFloat(getStyle(obj,attr))*100);
}
else
{
cur = parseInt(getStyle(obj,attr));
}
var speed=(iTarget-cur)/5;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(iTarget == cur)
{
clearInterval(obj.timer)
if(fnEnd)fnEnd(); //如果这个函数是存在的就是执行它。
}
else
{
if(attr=='opacity')
{
//alert(cur+speed);
document.title=speed+cur;
obj.style.filter='alpha(opacity:'+(cur+speed)+')'
obj.style.opacity = (cur+speed)/100;
}
else
{
obj.style[attr]=cur+speed+'px';
}
}
},30);
}
function getStyle(obj, name) //获取指定样式
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj,false)[name];
}
}
56. 完美运动框架
多个值同时变化【参考下面的完美运动框架,及前两个自定义库函数】
1. setStyle同时设置多个属性
参数传递
Json的使用 如:var json={a:1, b:2, c:3};
for in遍历 如: for(var i in json){alert(json[a]);}
2. 运用到运动框架
3. 检测运动停止
标志变量
4. 例子:伸缩同时淡入淡出的菜单
如:
var oDiv=document.getElementById('div1');
//注意这里使用了下面的完美运动框架
starMove(oDiv, 'width', 300, function(){
startMove(oDiv, 'height', 300, function(){
startMove(oDiv, 'opacity', 100);
});
});//当第一个动作执行完成后立即执行下一个动作。
2014-10-20 周一
function getByClass(oParent, name) //根据元素类属性值获取元素对象
{
var result=[];
var aEle=oParent.getElementsByTagName('*');
for(var i=0; i<aEle.length; i++)
{
if(aEle[i].className == name)
{
result.push(aEle[i]);
}
}
return result;
}
function getStyle(obj, name) //根据元素样式名获取样式值
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj,false)[name];
}
}
function startMove(obj, json, fnEnd) //接近完美的运动框架
{
clearInterval(obj.timer);
obj.timer=setInterval(function(){
for(var attr in json)
{
var cur=0;
if(attr == 'opacity')
{
cur = Math.round(parseFloat(getStyle(obj,attr))*100);
}
else
{
cur = parseInt(getStyle(obj,attr));
}
var speed=(json[attr]-cur)/5;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(json[attr] == cur)
{
clearInterval(obj.timer)
if(fnEnd)fnEnd();
}
else
{
if(attr=='opacity')
{
//alert(cur+speed);
document.title=speed+cur;
obj.style.filter='alpha(opacity:'+(cur+speed)+')'
obj.style.opacity = (cur+speed)/100;
}
else
{
obj.style[attr]=cur+speed+'px';
}
}
}
},30);
}
57. 修正完美框架,BUG: 当多个动作同时执行时,其中一个物体动作提前完成时,其它动作也会被终止
function getByClass(oParent, name)
{
var result=[];
var aEle=oParent.getElementsByTagName('*');
for(var i=0; i<aEle.length; i++)
{
if(aEle[i].className == name)
{
result.push(aEle[i]);
}
}
return result;
}
function getStyle(obj, name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj,false)[name];
}
}
function startMove(obj, json, fnEnd)
{
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var bStop=true;//这里增加一个标志变量, 如果这个标志变量在此事件的外面定义,则透明度无动作
for(var attr in json)
{
var cur=0;
if(attr == 'opacity')
{
cur = Math.round(parseFloat(getStyle(obj,attr))*100);
}
else
{
cur = parseInt(getStyle(obj,attr));
}
if(cur != json[attr]) bStop=false; //这里来判定每个物体运动是否完全执行,如果任一个动作执行未完成,则标志量为否。
var speed=(json[attr]-cur)/5;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(attr=='opacity')
{
//alert(cur+speed);
document.title=speed+cur;
obj.style.filter='alpha(opacity:'+(cur+speed)+')'
obj.style.opacity = (cur+speed)/100;
}
else
{
obj.style[attr]=cur+speed+'px';
}
}
if(bStop) //每到间隔时间点,这里都会来检测一下标志量,如果仍为true则清空定时器
{
clearInterval(obj.timer)
if(fnEnd)fnEnd();
}
},30);
}
58. 总结运动框架的演变进度:
1. startMove(iTarget) //运动框架
2. startMove(obj,iTarget) //多物体
3. startMove(obj, attr, iTarget) //任意值
4. startMove(obj, attr, iTarget, fn) //链式运动
5. startMove(obj, json) //任意物体
6. startMove(obj, json, fn) //完美运动框架
59. 完美运动框架的应用实例
例:幻灯片【大图右下角 有以 数字1-5为 按钮的鼠标悬停动作】
例:新浪微博里的链式运动实例【发布留言,留言被插入到留言列表中,以样式链动效果展示】
================无聊的分隔线=============================
事件基础
60. event对象和事件冒泡
1. 什么是event对象
用来获取事件的详细信息:鼠标位置,键盘按键等
例:获取鼠标位置:clientX
document的本质:document.childNodes[0].tagName
2. 获取event对象(兼容性写法)
var oEvent=ev || event;
3. 事件流
事件冒泡【多元素层次如果都有一个onclick事件,那么,如果单击低层级事件,各层级同类事件会根据元素层级由低到高依次执行】
取消冒泡:oEvent.cancelBubble = true;
例:仿select控件
DOM事件流
61. 鼠标事件
1. 鼠标位置
可视区位置:clientX, clientY, 要记得加scrollTop
例:跟随鼠标的DIV
消除滚动条的影响
滚动条的意义 ----可视区与页面顶部的距离
2. 获取鼠标在页面的绝对位置
封装函数
function getPos(ev)
{
var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft|| document.body.scrollLeft;
return {x: ev.clientX+scrollLeft, y:ev.clientY+scrollTop};
}
例:一串跟随鼠标的DIV
使用上面的函数是:
window.οnlοad=funciton(ev) //括号里的参数不能忘哦
{
var oEvent=ev || event; //兼容性写法
var pos = getPos(oEvent);
alert(pos.x +" , "+pos.y); //一个橫座标X, 一个纵坐标Y
};
62. 键盘事件
keyCode
获取用户按下键盘的哪个按键 // onkeydown, onkeyup
例:键盘控制DIV移动【如果关闭键盘的辅助功能,即按键延时?】
其他属性
ctrlKey, shiftKey, altKey【注意Key单词的首字母大写】
例:提交留言
回车提交
ctrl+回车 提交
================无聊的分隔线=============================
2014-10-21 周二
63. 默认行为
什么是默认行为?如:页面的右键菜单
oncontextmenu 上下文菜单事件
如: document.οncοntextmenu=function(){return false;};
阻止默认行为
普通写法:return false;
例:屏蔽右键菜单
弹出自定义右键菜单
例:只能输入数字的输入框
onkeydown, onkeyup事件的区别:键盘按下时,和键弹起时【注意被作用的对象】
64. 拖拽
1. 简单拖拽 //onmousedown, onmouseup
距离不变:即onmousedown事件中,鼠标与被拖拽对象的相对距离不变
三个事件:即鼠标onmousedown后执行onmousemove和onmouseup 三个事件的编写
2. 靠普拖拽
原有拖拽的问题,鼠标易滑出元素的范围
直接给document加事件
FF下, 空DIV拖拽BUG
阻止默认事件
防止拖拽出页面
修正位置
流程:1. 获取对象【var oDiv=document.getElementById('div1')】
2. 在onmousedown事件下,计算鼠标在对象中的相对位置。如:var disX=oEvent.clientX-oDiv.offsetLeft
3. 在onmousemove事件下,时时计算oDiv对象的位置,保持鼠标在对象中的相对位置:
如:oDiv.style.left = oEvent.clientX-disX+'px';
【注意】:这里要可以添加条件将对象圈在可视范围区域内,那就是时时判定oDiv对象的 left 值。当left小于0时,left=0;
【但是】:这个事件的对象不能是oDiv对象,否则鼠标在移动时很容易超出oDiv对象的范围,无法保持鼠标与oDiv对象的相对位置。只有将事件的对象更改为document,此BUG可修正。
4. 在ounmouseup事件下,也要是保证,此事件跟onmousemove事件一样,都是document对象下的事件。否则会有异常。
此事件上,清空事件:document.οnmοusemοve=null; document.οnmοuseup=null;
2014-10-22 周三
65. 事件绑定【什么时候能用到:当同一对象有多个相同行为要发生时。如:同一个按钮的单击事件,被多次赋于不同的执行内容,如果不用绑定,在事件会被相互覆盖,如同同一个变量被多次赋值只显示最后一次被赋的值一样。】
1. IE方式【只适用于IE浏览器】
attachEvent(事件名,函数),绑定事件处理函数
如:
oBtn.attachEvent('onclick', function(){ alert('a'); });
oBtn.attachEvent('onclick', function(){ alert('b'); });//这两个事件处理函数都将被以次执行,但如果不使用事件绑定则只执行最后一个事件处理函数。
【注意】:在IE9版本以下的浏览器,被绑定事件处理函数的执行顺序与绑定顺序相反。
detachEvent(事件名,函数),解除绑定
2. DOM方式【只适用于chrome, FF浏览器,不兼容低IE9的IE浏览器版本】
addEventListener(事件名,函数,捕获)
如:
oBtn.addEventListener('click', function(){ alert('a'); }, false);
oBtn.addEventListener('click', function(){ alert('b'); }, false);//执行效果如attachEvent
【注意】:事件名前后两者是不同的,一个带有on 一个没有。
removeEventListener(事件名,函数,捕获)
【封装一个兼容处理函数】:
fuction myAddEvent(obj, ev, fn) //事件处理对象obj, 不带on的事件名ev, 事件处理函数fn
{
if(obj.attachEvent)//处理兼容问题常用的方式
{
obj.attachEvent( 'on'+ev, fn );
}
else
{
obj.addEventListener( ev, fn, false );
}
}
fuction myDelEvent(obj, ev, fn) //事件处理对象obj, 不带on的事件名ev, 事件处理函数fn
{
if(obj.detachEvent)//处理兼容问题常用的方式
{
obj.detachEvent( 'on'+ev, fn );
}
else
{
obj.removeEventListener( ev, fn, false );
}
}
3. 何时使用事件绑定
4. 绑定事件和this
5. 绑定匿名函数,会无法删除
【注意】:一个不小听到老师一句话,父级必须要有相对定位,子级才能有绝对定位。
66. 高级拖拽 ----1
1. 复制拖拽原理
距离不变
三个事件:down, move, up
2. 限制范围
对位置进行判断
例1:不能拖出窗口的DIV【前面已经讲过】
例2:不能拖出指定对象的DIV【将document.documentElement.clientWidth-oDiv.offsetWidth 改为 oDiv2.offseWidth-oDiv.offsetWidth 即改变被减对象就可以】
磁性吸附:其实就是判断物体与窗口边缘的距离 小于 某长度时,将物体的位置=边缘位置
如:
var disY=ev.clientY - oDiv.offsetTop;
var t=ev.clientY - disY;
if(t<5)//这里的5像素就是物体与窗体边缘的距离
{
t=0;//当距离小于5像素时,物体自动吸附到边缘
}else if(t>(document.documentElement.clientHeight-oDiv.offsetHeight-5))//效果如物体到左边时一样
{
t=document.documentElement.clientHeight-oDiv.offsetHeight;
}
67. 高级拖拽 ----2
1. 图片拖拽
阻止默认事件 return false;
2. 文字选中
阻止默认事件
IE下拖动有问题【使用阻止默认行为,IE9版本以下的浏览器依然有异常。解决方法就是使用事件捕获】
事件捕获?setCapture() //这个方法只适用于低版本的IE浏览器,如:鼠标按下时,oDiv.setCapture(); 鼠标释放时,oDiv.releaseCapture();
将setCapture绑定到oDiv上,或锁定在oDiv对象上了。如果没有在onmouseup事件中执行oDiv.releaseCapture(),页面上的所事件都集中指向这个oDiv对象,鼠标在页面上也不能作其它操作。
当然,如果在onmouseup事件中执行oDiv.releaseCapture()后,好像一切都OK了,但是,在chrome浏览器中由,setCapture和releaseCapture只支持ie浏览器,所以在其它浏览器中大多是不兼容的。
由此还要做兼容性的调示:IE可以使用setCapture,在Chrome,FF下还要使用原来的那段代码,即需要将onmousemove和onmouseup事件绑定到document对象上。且在onmouseup事件中释放的是:document.οnmοusemοve=null; document.οnmοuseup=null;
3. 与DOM配合
带框的拖拽
说白了就是在原有的拖拽实例中,当鼠标按下时添加一个只有边框的DIV2元素,大小跟原有DIV元素相等。
这时能被拖拽的元素换成新增的边框元素了,且,在释放鼠标时还要清除掉DIV2这个边框。
且,不担要清除掉因拖拽生成的DIV2边框,还要将原来的DIV元素移动到DIV2元素所在的位置
保留原有位置的拖拽
同时在给新增元素设置大小为DIV元素的大小后,还要记得使每次移动DIV2元素时,它的起点都是DIV当前所在的位置。
2014-10-23 周四
68. 自定义滚动条
1. 拖拽
只有横向拖拽
限制范围----范围的大小
计算比例----当前值/最大值
2. 控制其他对象【重在操作】
例1:控制物体的大小
例2:控制物体的透明度
例3:控制文字滚动
【以上几个例子都是在原有拖拽实例的基础上完成的,主要是计算被拖拽物的当前x位置与其与父级元素的offsetWidth差的比例。得到比例值,就可以轻松的实现控制物体大小,透明度及文字滚动了。】
================无聊的分隔线=============================
AJAX基础
69. AJAX基础----1
1.什么是服务器?
网页浏览过程的分析
如何配置自己的服务器程序(AMP)【学习测试使用的是wampServer】
2. 什么是Ajax?
无刷新数据读取
用户注册,在线聊天
同步,异步
70. Ajax基础 ----2
使用Ajax
基础:请求并显示静态TXT文件
字符集编码?GB2312 , UTF-8
缓存,阻止缓存【缓存就是老家灶台旁边的水桶,因为那时做不到边抽边用,即时现在有了自来说,也不如有个水桶方便。】
【阻止缓存】:使用 'url?a='+new Date().getTime() 或 ‘url?a=’+Math.random()
动态数据:请求JS(或json)文件
eval的使用:可以将字符串解析成JS能够识别的数据类型,如:一个文本内容是 [a,b,c,d,1,3,4] ,那么eval这个字符串,就可以得到一个数组对象。如果文本的内容是[{a:1,b:12}, {c:22,d:55}] ,那么eval过后,得到的也是个数据,可数据内部却是两个json数据:
var arr=eval([{a:1,b:12}, {c:22,d:55}] ); alert(arr[0].a); //它的结果就是1
DOM创建元素
局部刷新:请求并显示部分网页文件
71. Ajax原理
HTTP请求方法
GET ----用于获取数据(如:浏览帖子)
POST ----用于上传数据(如:用户注册 )
GET, POST的区别【本质区别就是两个页面是不是通过地址栏来传递数据】
get是在url里传递数据:安全性低, 容量小不适于传送大数据,有缓存
POST,安全性相对高,容量可达2GB,无缓存
缓存?
2014-10-24 周五
72. 编写Ajax ---1
1. 创建Ajax对象
ActiveXObject("Microsoft.XMLHTTP"); //主要用于兼容IE6浏览器的一个对象,且这个对象只兼容IE浏览器
XMLHttpRequest() //只兼容非IE6的浏览器
【全局变量】其实就是window对象的一个属性。
【注意】:如果在JS中只写一个
alert(a); //运行时浏览器会报错,因为a变量没有定义 .Js从初始化中也找不到
alert(window.a); //运行时不会报错,只是提示一个undefined,这时JS只认为此对象没有添加这个属性
function ajax( url, fnSucc, fnFaild )
{
//创建oAjax对象
if(window.XMLHttpRequest) //这个window对象必须加上,否则IE6浏览器会报错
{
var oAjax=new XMLHttpRequest();
}
else
{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}
//连接服务器
oAjax.open('GET', url, true);
//发送请求
oAjax.send();
//接收返回值
oAjax.onreadystatechange=function(){
if(oAjax.readyState==4) //请求状态码为4时,表示读取完成,但不代表成功
{
if(oAjax.status==200) //结果属性值200代表返回成功,即完成任务且返回信息
{
//alert('成功'); //responseText.
fnSucc(oAjax.responseText);
}
else
{
if(fnFaild)
{
fnFaild(oAjax.status);
}
//alert('失败');
}
}
};
}
2. 连接服务器
open(方法名,文件名,异步传输) //如:oAjax.open('GET', 'a.txt', true); //是否为异步,true为异步,false为同步。大多为异步,极少为同步。
同步和异步?
现实生活中,同步就是多件事一起,异步是一件一件的来
而此处的同步是一件一件的来, 异步则是多件事一起来
3. 发送请求
send()
73. 编写Ajax ---2
请求状态监控
onreadystatechange事件:
1. readyState属性:请求状态码如下:
0:(未初始化)还没有调用open()方法
1:(载入)已调用send()方法,正在发送请求
2:(载入完成)send()方法完成,已收到全部响应内容
4:(解析)正在解析响应内容
5:(完成)响应内容解析完成,可以在客户端调用了
2. oAjax.status属性:请求结果
3. oAjax.responseText
74. Ajax数据
数据类型【字符编码格式存储时统一为UTF-8】
什么叫数据类型 -----英文,中文
XML,Json
字符集
所有文件字符集相同
================无聊的分隔线=============================
2014-10-25 周六
面向对象
75. 什么是面向对象?一切皆对象,使用对象时,只关注对象提供的功能,不关注其内部细节,如:Jquery
面向对象是一种通用思想,并非只有编程中能,任何事情都可以用。
76. JS中的面向对象
1. 面向对象编程(OOP)的特点:
抽象:抓住核心问题
封装:不考虑内部实现,只考虑功能使用
继承:从已有对象上,继承出新的对象
多重继承
多态
2. 对象的组成
方法 ---- 函数:过程,动态的【函数也是自由的,不属于任一对象。方法则是属于某】
属性 ---- 变量:状态,静态的【变量和属性其实是一样的,只是变量是自由的,不属于任何对象,而属性却是有主儿的,它属于某一对象。】
76. 一个面向对象程序实例
为对象添加方法和属性
this详解,事件处理中this的本质
window
如:function show(){ alert(this); }; //结果是window对象 相当于如下写法:
window.show=function(){ alert(this); };
this ----函数属于谁【当前的方法或函数属于谁,this就是谁】
不能在系统对象中随意附加方法,属性,否则会覆盖已有方法,属性
object对象:是个空白对象。可以它上面加属性加方法
77. 工厂方式
什么是工厂?需要原料,加工,出厂,如下实例:
function createPerson(name, qq)
{
//获取原料
var obj=new object(); //手动创建一个对象
//加工原料
obj.name=name; //添加并设置对象的属性
obj.qq=qq;
obj.showName=function(){
alert('我的姓名:'+this.name);
};
obj.showQQ=function(){
alert('我的QQ号:'+this.qq);
};
//出厂
return obj; //手动返回对象
}
工厂方式
用构造函数创建一个类
什么是类,对象(实例):模具和零件
78. 工厂方式的问题
问题:
1. 没有new
加上new后相当于做了两件事儿:创建了一个空白对象,返回这个对象
如:系统后台对New的处理是这样的
var this=new object();
。。。
return this;//这两条语句在编译器中是不合法,只是用来说明new的作用。
实例说明一下:
function createPerson(name, qq)
{
var obj=new object(); //手动创建一个对象
obj.name=name; //添加并设置对象的属性
obj.qq=qq;
obj.showName=function(){
alert('我的姓名:'+this.name);
};
obj.showQQ=function(){
alert('我的QQ号:'+this.qq);
};
return obj; //手动返回对象
}
//看上面的实例是人为的手动的去创建一个对象,相当于我们创建了一个构造函数,调用如下
var obj=createPerson('blue', '1234567');
alert(obj.name); //即可获取blue这个人的姓名
如果:var obj=new createPerson('张三', '654789');//这里用了New,如前如说,使用New关键字后,是系统自动为我们创建一个空白对象,且最后返回给我们。那这里的createPerson函数要如下写:
function createPerson(name, qq)
{
//系统后台执行如下
//var this=new object(); //此语句不能被编译器识别,为系统后台创建过程
this.name=name; //添加并设置对象的属性
this.qq=qq;
this.showName=function(){
alert('我的姓名:'+this.name);
};
this.showQQ=function(){
alert('我的QQ号:'+this.qq);
};
//系统后台自动返回对象
//return this; //此语句不能被编译器识别,为系统后台创建过程
}
那么:var obj=new createPerson('张三', '654789'); 所获取的obj对象,alert(obj.name); //结果也能正常执行,得 张三
New 和 this? 【任何函数前面都能加new, new出来的都是新对象。而this指就是代表其所属对象。如上面实例说明,它有时也是系统默认生成的空白对象。】
2.函数重复定义问题
js 原型?prototype
简单的CSS解释:
class 一次给一组元素添加样式 JS中被称为原型
行间样式 一次给一个元素添加样式 JS中称作给对象加事件
如实例:
var arr1=new Array(1,2,3,4);
arr1.sum=function(){ //这里操作好比给单个元素添加样式一样,只给arr1添加这个方法,这个方法也只服务于arr1对象
var result=0;
for(var i=0; i<this.length; i++)
{
result += this[i];
}
return result;
};
调用:alert(arr1.sum()); //结果正常显示为10
如果var arr2=new Array(2,3,5);
调用:alert(arr2.sum()); //结果报错,因为sum()这个方法不是为arr1对象创建的。
【但如果将函数修改如下】:
Array.prototype.sum=function(){ //这里操作好比给单个元素添加样式一样,只给arr1添加这个方法,这个方法也只服务于arr1对象
var result=0;
for(var i=0; i<this.length; i++)
{
result += this[i];
}
return result;
};
那么:alert(arr2.sum());//结果也能正常显示了。因为这次sum()方法是定义在Array这个类(类似class的作用)上的,new 出的对象当然也都有这个方法可以用。
【但是】:因为方法是写在createPerson类中的,所以每个对象都有一个,但是创建的对象中所带的同名方法是不等的,如:
alert(arr1.showName与arr2.showName); //返回false
类:
function createPerson(name, qq)
{
//系统后台执行如下
//var this=new object(); //此语句不能被编译器识别,为系统后台创建过程
this.name=name; //添加并设置对象的属性
this.qq=qq;
this.showName=function(){
alert('我的姓名:'+this.name);
};
this.showQQ=function(){
alert('我的QQ号:'+this.qq);
};
//系统后台自动返回对象
//return this; //此语句不能被编译器识别,为系统后台创建过程
}
修改为:
function createPerson(name, qq)
{
//系统后台执行如下
//var this=new object(); //此语句不能被编译器识别,为系统后台创建过程
this.name=name; //添加并设置对象的属性
this.qq=qq;
//系统后台自动返回对象
//return this; //此语句不能被编译器识别,为系统后台创建过程
}
而两个方法添加到类的原型上去:
createPerson.prototype.showName=function(){
alert('我的姓名:'+this.name);
};
createPerson.prototype.showQQ=function(){
alert('我的QQ号:'+this.qq);
};
这样, alert(arr1.showName与arr2.showName); //返回ture
【总结】 :构造函数加属性,用原型加方法
79. 流行的面向对象编写方式
1.用混合方式构造对象
混合的构造函数/原型方式
2. 原则
构造函数:加属性
原型:加方法
3. 对象命名规范
类的首字母大写
如:上面的createPerson类【也叫构造函数】,就可以写成CreatePerson了
2014-10-27 周一
80. 【实例】面向对象的选项卡【只作了解,很少用,只在大型程序中应用】
把面向过程的程序,改写成面向对象的形式
原则:不能有函数套函数,但可以有全局变量
过程:【去除函数嵌套 --> 改造onload为构造函数(即:类,构造函数名不一定要用Onload)---> 原来的全局变量改造成构造函数的属性,原来的函数改造成构造函数的方法 ----> 】
onload ----> 构造函数
全局变量 ----> 属性
函数 -----> 方法
改错:this, 事件,闭包,传参
对象与闭包
通过闭包传递this
81. Json方式的面向对象【简单,不适合对对象操作,常称单体】
把方法包在一个Json里
有人管他叫----命名空间
在公司里,把同一类方法,包在一起【即json中元素层次的妙用】
82. 拖拽和继承
面向对象的拖拽:改写原有拖拽
对象的继承 【call() 实现属性的继承,方法的继承用原型】
什么是继承:在原有类的基础上,略作修改,得到一个新类,且不影响原有类的功能
instanceof运算符:查看对象是否是某个类的实例。
83. 使用继承
限制范围的拖拽类
构造函数的伪装:
属性的继承:原理是欺骗构造函数,和call使用
原型链:
方法的继承:原理是复制方法。覆盖原型和方法复制
如:
function a(){ this.x=12; }//构造函数a,a的属性x=12
a.prototype.showX=function(){ alert(x); }; //a的原型绑定方法showX()
调用:a.showX(); //正确
创建b构造函数,继承a
funciotn b(y){ a.call(this, y) };//属性继承,并传递一个参数给b对象
for(var z in a.prototype){ b.prototype[z] = a.prototype[z]; } //方法继承,不能用b.prototype=a.prototype, 因为直接赋值是引用关系,b的再修改同时也会影响到a。只有通过复制才是正确的方式。
84. 系统对象
1. 本地对象(非静态对象)【不能直接使用,要New出来才能用】
什么是本地对象?
常用对象:Object, Function, Array, String, Boolean, Number, Date, RegExp, Error
2. 内置对象(静态对象)【不经过New的对象,大多是直接使用】
什么是内置对象?Global(不存在的,虚的东西), Math
3. 宿主对象(由浏览器提供的对象)
DOM, BOM
================无聊的分隔线=============================
BOM的应用
85. BOM基础
1. 打开,关闭窗口
open:蓝色理想运行代码功能 window.open(url, 打开方式_blank/_self);
close:关闭时提示问题, FF中close只能关闭open打开的窗口
2. 常用属性
window.navigator.userAgent //当前浏览器的相关版本信息
window.location //当前页面的地址,可读取写设置
86. 尺寸及坐标
窗口尺寸,工作区尺寸
1. 可视区尺寸
document.documentElement.clientWidth
document.documentElement.clientHeight
2. 滚动距离
document.body.scrollTop
document.documentElement.scrollTop
87. 常用方法和事件
1. 系统对话框
警告框:alert("内容"),没有返回值
选择框:confirm("提示内容"),返回boolean
输入框:prompt(),返回字符串或Null
2. window对象常用事件
onload
onscroll
onresize
例:回到顶部按钮,侧边栏广告
闪烁问题
================无聊的分隔线=============================
cookie的基础和应用
88. cookie基础
什么时cookie:如自动登陆,记住用户名,是document对象中的一个属性,document.cookie
cookie的特性
同一个网站中所有页面共享一套cookie
数量,大小有限
过期时间 如:oDate.setDate(oDate.getDate() + 8);//获取8天后日期
JS中使用cookie:document.cookie
如:document.cookie="user=blue"; //等号相当于添加值,而不是赋值
如:document.cookie="user='张三'; expires="+oDate;//oDate就是上面修改后的日期
为设置cookie封装一个函数
function setCookie(name, value, iDay)//name就是cookie名,value就是cookie值,iDay就是过期时间长度
{
var oDate=new Date();
oDate.setDate(oDate.getDate() + iDay);
document.cookie=name+'='+value+'; expires='+oDate;
}
89. cookie的使用---1
设置cookie
格式:名字=值
不会覆盖
如:document.cookie="user=blue"; //等号相当于添加值,而不是赋值
document.cookie="password=123456" //这两条内容都cookie的值,结果:user=blue;password=123456
过期时间:expires=时间 ,时间对象的使用
封装函数
function setCookie(name, value, iDay)//name就是cookie名,value就是cookie值,iDay就是过期时间长度
{
var oDate=new Date();
oDate.setDate(oDate.getDate() + iDay);
document.cookie=name+'='+value+'; expires='+oDate;
}
读取cookie,字符串分割 split()
function getCookie(name)
{
var arr=document.cookie.split(';');
for(var i=0;i<arr.length;i++)
{
var arr2=arr[i].split('=');
if(arr2[0]==name)
{
return arr2[1];
}
}
return '';
}
删除cookie已经过期
fuction removeCookie(name)
{
setCookie(name,1,-1);//即将过期时间修改为已过期
}
90. 使用cookie--2
例:用cookie记录上次登陆的用户名
提交时---记录用户名
window.onload---读取用户名
================无聊的分隔线=============================
2014-10-28 周二
JS正则表达式
91. 正则表达式基础 ----1 假设:var str='abcdefg';
1. 复习字符串操作
search 查找 如:alert(str.search('a'); //结果就是0,因为a在字符串的第0位,如果没有找到则值为-1
substring 获取子字符串 如:str.substring(2,5) //结果是cde,因为截取的字符串不包含结束位置的字符
而如果:str.substring(2) //结果是cdefg,这样可以从起始截取到结尾
charAt 获取某个字符 如:str.charAt(1) //结果是b
split 分割字符串,获得数组 如前面实例。str.split('分隔符');
2. 找出字符串中的所有数字
用传统字符串操作完成
function getNum(str)//获取字符串中所有的数字
{
var tmp='';
var arr=[];
for(var i=0;i<str.length;i++)
{
if(str.charAt(i)>='0' && str.charAt(i)<='9')
{
tmp+=str.charAt(i);
}
else
{
if(tmp)
{
arr.push(tmp);
tmp='';
}
}
}
if(tmp)
{
arr.push(tmp);
tmp='';
}
}
用正则表达式完成 上面一堆的语句找数字的方法,如果换成正则如下:
str.match(/\d+/g); //这样alert出来的结果跟上面函数获取的结果是一样的。
92. 正则表达式基础 ----2
什么是正则表达式?
1. 什么叫正则?规则,模式
2. 强大的字符串匹配工具
3. 是一种正常人类很难懂的文字
4. RegExp对象
JS风格----new RegExp("a" , "i") //'a' 就是正则表达式,'i' 是正则的选项内容表式忽略大小写。
perl风格 ----/a/i //表达的意思跟JS的风格是一样的。
93. 字符串与正则配合 ----1
search
字符串搜索
返回出现的位置
忽略大小写:i -----ignore(忽略的)
判断浏览器的类型
如:var str='abc 3456 2 a43 sdfa2'; var re=/\d/; alert(str.search(re)); //找出字符串中的第一个数字,结果是4,search()可以直接匹配正则表达式,但只能获取位置信息。
match
获取匹配的项目
量词:+
量词变化:\d , \d\d 和 \d+
全局匹配:g -------global(全局的),即找到全部的
例如:找出所有的数字【如91号记录中如记】如:str.match(/\d+/g);//获取字符串中的所有数字
94. 字符串与正则配合 ----2
replace 【语法:replace(被替换字符串,预替换的字符串) 如:str.replace('a', 'c') //即将字符串str中的a字符替换成c字符】
替换所有匹配【上述语法中的例子的不足之处就是replace只能替换单个字符或字符串】
返回替换后的字符串
例如:敏感词过滤 //var re=/a/; str.replace(re); //这样也只能匹配单个的,要找替换全部不要忘记 g 这个选项 var re=/a/g;
95. 字符串 ----1 元字符 就是 方括号
1. 任意字符匹配 [abc]
如:o[usb]t 匹配 obt, ost , out
2. 范围匹配 [a-z], [0-9]
如:id[0-9] 匹配 id0, id1, id2......id9
3. 排除匹配 [^a]
如:o[^0-9] 匹配 oat, o?t, o t //排除了o后跟有数字0-9的字符串
96. 字符串----2
组合 [a-z0-9A-Z]
例如:过滤HTML标签,自定义innerText方法
转义字符:
. (点):任意单个字符【极少用】
\d, \w, \s
\d 单个数字[0-9]
\w 单个英文,数字,下划线 [0-9a-z_]
\s 单个空白字符,包括空格,tab等不可显示不可打印的字符
\D, \W, \S
\D 排除数字[^0-9] //与\d的意义相反
\W 排除数字,英文,下划线 [^0-9a-z_]
\S 排除字符,TAB符等不可显示不可打印的字符,即非空白字符
97. 量词【个数】
什么是量词?
1. 出现的次数
2. {n,m} , 至少出现n次,最多m次
如:查找QQ号
常用量词
{n, },至少n次
* ,0或多次 {0, } 【少用】
?,0或1次 {0,1} 【被限定的表达要用括号括起来先,如果跟在限定字符*+{}后则表示非贪婪模式的设定】
+,1或多次 {1, }
{n} ,等于n次
验证邮箱地址的正则:var re=/\w+@[0-9a-z]\.[a-z]+/i
正则表达式对象的一个方法test(),是用来验证正则表达式的合法性的。如:re.test(匹配的字符串);
^ 用在表达式开头代表行首
$ 用在表达式结尾代表行尾
常用正则的如:表单检验,邮箱地址校验等,不要忘记 忽略大小的i,搜索全部的g,行首行尾的 ^ 和 $
================无聊的分隔线=============================
2014-10-8 星期三
1. 变量,常量?有点开发经验的都懂的,不解释
2. HTML的 标签属性怎么写,在JS代码中对 HTML属性 进行操作时就怎么写,简单的说就是,HTML怎么写,JS就是怎么写!但要排除一个标签属性,那就是class属性,在JS中要以className的名字进行操作。这是因为class这个词是js中的保留字。
3. 定义变量是var , 设置对象用 set
4. JS操作HTML属性的两种方式,一个是点 “.” ,一个是方括号 "[ ]"。点 能表达的意思,方括号都能做到,但方括号能表达的意思 点却是做不到。如:
var oDiv=document.getElementById('div1'); '获取id="div1" 的div元素对象
oDiv.style.width='200px'; '设置div元素的宽度为200px
oDiv.style.height='200px'; '设置div元素的高度为200px
以上语句可写成
var oDiv=document.getElementById('div1'); '获取id="div1" 的div元素对象
oDiv.style['width']='200px'; '设置div元素的宽度为200px
oDiv.style['height']='200px'; '设置div元素的高度为200px
但当写成一个集成函数时,由于属性元素不固定,属性值不固定,所以需要两个参数,使用name表示属性元素,使用value表示属性值
function setAttr(name,value)
{
var oDiv=document.getElementById('div1'); '获取id="div1" 的div元素对象
’oDiv.style.name=vlaue; '这样的写法是不行的,无法执行的,JS不能智能识别name是这个函数参数,此时只有使用方括号
oDiv.style[name]=vlaue; '这样写才能行的通。
}
5. HTML 样式的优先级: *(通配符最低)< 标签 < class < ID < 行间
即:如果先操作
元素.style.属性=xxx '是修改了行间样式
之后再修改className,就不能覆盖上面的效果(优先级的原因)
建议:同一个标签使用同一种方式操作标签样式最好,不可交叉使用。
6. 提取行间事件。
由将事件写在行间对以后的调示工作会带来很多的不便,所以需要提取出来在JS中进行集中操作。
如:单击,双击,滑上,悬停,滑下等都是事件,同时需要知道,事件也同标签属性一样,可以被JS操作。
事件的值一般是一个函数。建议是一个匿名函数,因为给函数取名字也是一个纠结的事儿。
7. 事件执行前需要先加载完HTML页面,因为一个标签在未加载完时,写在<HEAD></HEAD>中的JS脚本是会报错的,特别是经过优化提取了行间事件后更容易页面报错。 须使用 window.οnlοad=function(){......}; ,即待页面load完成后,再执行Js代码。
8. 有了以上几件事情的发生,就构成一件事儿:即实现了,行为(即事件==JS),样式(CSS),结构(即HTML代码) 三者的分离操作。
9. 记住:获取 一个HTML元素 对象,使用 document.getElementById('id');
获取 一组HTML元素 对象,使用document.getElementsByTagName('标签名');
注意:如果对组进行操作,最好使用DIV将其进行分离并包含起来,再分别操作。
2014-10-9 星期四
10. 原来checkbox元素的checked属性值,在JS中使用true/false来设置的。
11. 这一点我想记下的就是中英文输入法切换的原因带来的不必要的麻烦,标点符号必须是英文输入法下输入,否则让你纠结到死。
12. this关键字,它的作用是代替当前所操作对象。如:oDiv.οnclick=function(){......this.........}; //中的this就是代表oDiv对象。同是注意自定义属性的使用,这个自定义属性必须通过JS添加上去,不能在行间元素中添加,因为主流浏览器不支持,会被过滤掉。
13. 选项卡式的切换效果,其实就是先禁用掉所有元素的效果显示,再启用指定的元素效果,原理就是这样。
14. innerHTML, 主要用于读写DIV , span等除input标签外的内容。意思就是说DIV的内容可以是HTML代码。
15. 如果有这样的一个字符串运算式:'abc'+23+5+'cde',其结果一定是'abc235cde',但是如果我要的是23+5的和呢,那么这时就要用到运符的优先级特性了,修改表达式为:'abc'+(23+5)+'cde' 那么结果就是'abc28cde‘了。
16. 定义数组的三种方式:
方式一:
var mycars=
new Array();
mycars[0]="Saab";mycars[1]="Volvo";
方式二:(常用)
var arr=['字符串1','字符串2',...];
方式三:
var arr2=new Array('字符串1','字符串2',...);
================无聊的分隔线=============================
17. 前面16项都也许有些比我还菜的鸟友不太懂,再来回顾一下基础:
javascript的核心是ECMAScript,说白了就一个命令解释器,就是人与电脑之间的翻译,将人类的操作命令解释给电脑听,再将电脑的语言解释给人类看。你不需要太明白这个,其实我也不太明白。大概了解一下,ECMAScript是javascript的核心就可以了。
其实,ECMAScript这个核心给javascript提供的功能也不多,加减乘除,变量定义等一些简单的操作,在DOM未出世的时间很不受待见。
DOM:Document Object Model 文档对象模型。其中的文档指的就是HTML,DOM的作用是就是赋于JS操作HTML的能力。即我们在JS中经常会用到的一个对象document。
BOM:Browser Object Model 浏览器对象模型。即BOM赋于JS操作浏览器的能力。即我们在JS中常用的对象window
18. 谈兼容性问题:
ECMA:几乎没有兼容性问题(细微处还是有的)
DOM:有一些操作不兼容
BOM:没有兼容性问题(其实意思是 完全不兼容,所以这个功能几乎也不用它)
19. JS中常见的六种数据类型:
var a=12;
//alert(typeof a); //number 数字类型
var a='abcdefg';
//alert(typeof a); //string 字符串类型
var a=true;
//alert(typeof a); //boolean 布尔类型
function a()
{
alert(‘abc’);
};
//alert(typeof a); //function 函数类型
var a=document;
//alert(typeof a); //object 对象类型
//alert(typeof b); //undefined 未定义类型(这个是真的未定义)
var b;
alert(typeof b); //undefined 未定义类型(这个虽说定义了,但没有被赋值,同样是未定义类型)
20. 数据类型转换:
字符串转数字:parseInt('字符串'); //从字符串的左边向右边找数字,碰到非数字的字符就会中断查找,只获取即得的数字显示出来。如果没有数字,则显示 NaN = Not a Number 非数字的意思。
注意:任何数 与 NaN 运算皆得NaN。但:两个NaN却是不相等的。
判断一个结果是否为NaN使用 isNaN();
字符串转小数:parseFloat('字符串'); 相对于parseInt来说,parseFloat()最常用。
相对上面两个显示转换,还有个隐式转换:
== 这个运算符是先将两边数据类型转换成一样的再比较,=== 这个运算则不是,它是比较两个原始数据。常用==运算符。
21. 变量的作用域:即变量有效的使用范围,分为局部变量和全局变量,不细说,自个百度去。
22. 闭包:百度出来的意思说的乱七八槽,简直不是人话。
闭包说白了就一句话,即:子函数可以使用父函数的局部变量!我们不知道不代表我们没用过,这名词就是一大忽悠闲着淡疼想出来的。
都是最平常不过的事儿,所以建议别去想这个概念,自然就好。
23. JS命名规范:有规则,可读性强。建议建立自己的类型前缀+首字母大写。
常见的数据类型前缀:
数组:a
布尔:b
浮点:f
函数:fn
整数:i
对象:o
正则:re
字符串:s
变体变量:v
2014-10-10 星期五
24.运算符:
算术:+ ,- ,* ,/ ,%(取模) ;加减乘除就不用说了,取模意思就是求余数,如:10%3=1 可用于隔行变色或秒转时间的功能实现。
赋值:= ,+= ,-= ,*= ,/= ,%=
关系:< , > , <= , >= , == , === , != , !==
逻辑:&&(且) ,||(或) ,!(非)
运算符优先级:括号(可改变运算符优先级的符号)
25. 程序流程控制
判断:if, switch, ?:
循环:while, for
跳出:break, continue
什么是真:true , 非零数字,非空字符串,非空对象
什么是假:false,数字零,空字符串,空对象(NULL),undefined
26. JSON
什么是JSON? 它是基于JS的一种数据交换格式。
JSON的格式类似于数组,但定义方式不同,数组使用 [ ] 符号,JSON使用 { } 符号
如:数组,var arr=[1,2,3,4,5,6];
而JSON,var json={a:1,b:2,c:3,d:4}; //a,b,c,d这几个相当于是变量," : " 后是变量的值,这个有别于数组,数据是成对的也可以叫键值对。
如果JS中定义几个变量:
var a=1;
var b=2;
var c=3;
这样还不如写成JSON格式:var json={a:1,b:2,c:3,d:‘abc’};
如果要使用JSON中的各项值: alert(json.a); //如此即可,同样可以通过之种方式被作为变量进行操作,如,json.a++;
JSON和数组:
实例说明:
var json={a:12, b:5, c:7}; //json
var arr=[12, 5, 7]; //数组
操作数据:
alert(json.a); //显示json数据项
alert(arr[0]); //显示数组数据项
区别:
操作json数据的方式还可以这个样子:
alert(json['a']); //和先前讲的HTML元素属性操作一样,有点的地方都可以使用 [ ] 符号代替。
说明:JSON的下标可以是字符串,而数组的下标只能是数字。
JSON和FOR IN
另一区别是:json不像数组一样有length属性。由循环读取的方式如下:
读取数组:
for(var i=0; i<arr.length; i++){ alert(arr[i]); } 也可以 for(var i in arr){ alert(arr[i]); } //可以使用for循环,也可以使用for...in...
读取JSON:
for(var i in json){ alert(json[i]); } //只能使用 for...in...
================无聊的分隔线=============================
27. 函数返回值
如:function test(){ return 值; } 也可以 function test(参数1,参数2,....){ ...语名... ; return 结果; }
但是:一个函数应该只返回一个类型的值。
但是:如果使用JSON数据类型,那。。。返回的值就可以打破上面的限制了。
当然,也可以不使用return
28. 函数传参
可变参(不定参):arguments 【这个很重要】
参数的个数可变,参数数组的应用
arguments是个数组,默认这个数组里存的是函数的参数,不管几个参数都在这里面了。
如:function sum(){ ...... } ,看这个函数可知,它里面没有参数,但如果在使用过程中添加了参数进去呢,那不是要报错吗?也许会,但如果使用了arguments这个数组来操作,也许就不会了。就把arguments当成一个数组,数组中的每一项都是参数。
例:
function sum()
{
var result=0;
for(var i=0; i<arguments.length; i++)
{
result += arguments[i];
}
return result;
}
针对上面sum()这个函数,
我可以这样调用:var a = sum(1,2,3,4,5); 返回的结果就是a=15;
我也可以这样用:var a=sum(1,2,3,4,5,6,7,8,9,10); 返回的结果是a=55;
由以上可知,参数个数是不固定的,当然,你也可以不给参数,那a=0; 不知道你是否明白,不明白就是回家抱孩子去,呵呵!
再一例:
写个函数,功能:当此函数的参数为2个时的功能是从元素中获取元素样式的值,当参数为3个时,就是设置指定的样式。
两个参数:一个是元素对象,一个是元素样式
三个参数:一个是元素对象,一个是元素样式,一个是样式值 【注:参数顺序不能变】
function css()
{
if(arguments.length == 2)
{
return arguments[0].style.arguments[1];
}
else
{
arguments[0].style.arguments[1] = arguments[2];
}
}
这时有这么一个元素,它的样式是这个的:
#div1{ width:200px; height:200px; border:1px solid red; background:red}
我在JS中这么来写:
window.οnlοad=function(){
var oDiv = document.getElementById('div1'); //获取要操作对象指定样式的值
var a = css(oDiv, 'width'); //带入两个参数,意思就是获取或说读取
alert(a); //结果是 200px
var b = css(oDiv, 'background', 'green'); //设置样式
alert(b); //结果是,被操作对象的样式 背景色被修改为绿色
};
当然,如果确定了这个函数的功能后,可以这样改一下:
function css(obj, name, value)
{
if(arguments.length == 2)
{
return obj.style[name]; //注意这里要将 点 修改为 [ ] ,否则会报错
}
else
{
obj.style[name] = vlaue;
}
}
29. 如何取非行间的样式 currentStyle
如果样式是写在行间的,我们可以通过 对象.style.样式名 这种方式获取到,但如果是写在样式表里的,使用这个方法就不能获取了。
如果不是行间样式,我们可以使用 currentStyle 换掉 style ,即:对象.currentStyle.样式名 以这种方式就可以获取当前使用的样式了。
当然:先不要高兴的太早,好东西总是存在不兼容的现象,currentStyle就只能兼容IE,在其它浏览器下是用不了的,会报错的。
那么其它浏览器如何实现这个提取非行间样式功能的呢?
Chrome 最新版本已经支持 currentStyle了
FireFox 用的是独自的方式 getComputedStyle(对象,任意值) 如:alert( getComputedStyle(oDiv, false).width); //就是获取oDiv对象的宽度样式值。参数中除了oDiv必须滴以外,另一个参数你写什么都行,无所谓,它就是一废参。但是它却又不被IE兼容
那么既然存在浏览器间的兼容问题,就要想个完美的解决方案了:
if(oDiv.currentStyle)
{ //因为currentStyle在IE中 alert 弹出的是一个对象,而在FF中弹出的是undefined,在真假判断中undefined是false,所以
alert(oDiv.currentStyle.width);
}
else
{
alert(getComputedStyle(oDiv,false).width);
}
封装成一个函数:
function getStyle(obj, name) //obj 操作对象,name要获取的样式
{
if(obj.currentStyle)
{ //因为currentStyle在IE中 alert 弹出的是一个对象,而在FF中弹出的是undefined,在真假判断中undefined是false,所以
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj,false)[name];
}
}
但是 ,对于background , border, margin 等这些复合样式(即其有很多部分组成的),上面那个函数是无法获取的,它只能对单一样式进行操作,如: backgroundColor
30. 数组基础:很基础,很好用,很重要
数组定义:
var arr=[1, 2, 3, 4, 5];
var arr=new Array(1, 3, 4, 5, 6, 7);
以上两种方式,都对,但 [ ] 的性能略高,因为代码短
数组的属性:length 既可以获取 ,又可以设置。使用这个方法,可以快速清空数组,直接设置 数组.length=0 就可了。
数组使用原则:数组中应该只存一种类型的数据。
31. 数组的方法:设:定义数组 arr
添加元素:
arr.push(元素),从尾部添加
arr.unshift(元素), 从头部添加
删除元素:
arr.pop(), 从尾部弹出
arr.shift(), 从头部弹出
元素排序
arr. sort([比较函数]), 排序一个数组, 如果只是这样:arr.sort() 默认sort只按字母顺序排序,这样就不适用于数字排序。
排序一个字符串数组
arr.sort(); 这样子就可以了
排序一个数字数组
数字数组排序要这样:arr.sort( function(n1,n2){return n1-n2;} );
转换类
arr.concat(数组2)
连接两个数组
arr. join(分隔符)
用分隔符,组合数组元素,生成字符串
字符串split
插入,删除
splice替换
arr. splice(开始,长度,元素......)
先删除,后插入
删除
arr. splice(开始,长度)
插入
arr. splice(开始,0,元素......)
================无聊的分隔线=============================
2014-10-11 周六
32. 定时器的作用
开启定时器:
setInterval 间隔型
语法:setInterval(函数名, 间隔时间长度);
function show(){ alert('a'); }
如:setInterval(show, 1000); //1000ms=1s,每隔1秒执行1次
setTimeout 延时型:
语法:setTimeout(函数名, 时间长度);
function show(){ alert('a'); }
如:setTimeout(show, 1000); //1000ms=1s,只执行一次,执行时长为1秒
【注意】:每个定时器都是有返回值的,这利用其返回值进行下面两个功能的实现
如:var timer1=setInterval(show, 1000);
如:var timer2=setTimeout(show, 1000);
停止定时器:
clearInterval
语法:clearInterval(定时器名);
如:clearInterval(timer1);
clearTimeout
语法:clearTimeout (定时器名);
如:clearTimeout (timer2);
33. 数码时钟实例
获取系统时间:
Date对象
var oDate = new Date();
getHours, getMinutes, getSeconds
如:alert(oDate.getHours());
显示系统时间:
字符串连接
【注意】字符串也是数组,可以当成数组操作。如:var a='abc123'; 可以使用 a.length 获取字符串的长度,a[0] == a ,其它你懂的。
但是,这个简单易用的功能只有高版本的浏览器才兼容,如IE7就不能识别这种写法。
空位补零
【注意】因为获取系统时间 oDate.getHours(); 小于10的数字时它的空位被过滤,所以需要在数据小于10时进行补字符’0‘的操作。
因为js中数字字符相加会被解释成加法运算,而不是字符串连接,所以当时间数字即时是大于等于10的时候也要加一个空字符。
如:
function toDouNum(n) //此函数可以解决字符连接问题
{
return n<10 ? ('0'+n) : (''+n);
}
设置图片路径:
采用字符串匹配图片名的方式来,时时获取系统时间 ,再通过系统时间对象获取时分秒,生成字符串,再通过 str.charAt(n) 匹配图片名称。
charAt方法: 它本身的功能就是取字符串中的某一位。
上面提到的字符串数组使用,如上:var a='abc123'; 当使用a[1] 这种方式到获取字符串中某元素时,只有高版本的浏览器才支持这种写法,像IE7这个版本就不支持。所以有charAt方法,a[1] 改写成 a.charAt(1) 这样就可以兼容了。
34. Date对象的其他方法
年:oDate.getFullYear()
月:oDate.getMonth() //默认从0开始,使用时须加1.
日:oDate.getDate()
星期:oDate.getDay() //0, 1, 2, 3, 4, 5, 6
35. 延时提示框 实例
1. 鼠标移入A 显示B,移出A 就隐藏B //用到的事件onmouseover, onmouseout
2. 鼠标从A,移到B,中间需要有延时,即B隐藏需要进行延时且要去除B的隐藏 //setTimeout, clearTimeout
3. 鼠标从B中移出时,中间也需要延时。即B执行延时隐藏
【注意】:每完成一个功能后,首先要做的是优化代码,能减则减,能合并就合并,减少代码冗余量。
36. 无缝滚动--基础
物体运动的基础
1. DIV的移动 //必须对元素先定位,绝对定位position:absolute;
2. offsetleft 的作用 //获取元素的左边距,最大的优点是能综合考虑所有影响物体位置的因素,得出最终结论。
【注意】:类似的还有:offsetTop, offsetWidth, offsetHeight
3. 用定时器让物体连续移动
4. 效果原理:让ul 一直向左移动
5. 复制 li :InnerHTML 和 += , 修改ul 的 width // 注意overflow:hidden 对DIV内容溢出的处理
如:var oDiv = document.getElementById('div'); //如果要对oDiv中的内容进行复制,使用InnerHTML如下操作
oDiv.innerHTML += oDiv.innerHTML;
6. 滚动过界后,重设位置:判断过界
//将滚动内容复制左移,以 “-” 号代表方向:左移距离 = -滚动内容/2 时还原初始位置
【注意】:距离运算中,别忘了连接上单位 'px' 。
7. 无缝滚动--扩展
1. 改变滚动方向:添加一个位移变量,根据用户点击判断 设置变量正负方向
2. 鼠标移入暂停:入则clearInterval关闭定时器,出则setInterval开启定时器
================无聊的分隔线=============================
37. DOM基础
DOM基础:
什么是DOM? DOM= Document Object Model 文档对象模型,是JS的最重要组成部分
浏览器支持情况:FF > Chrome > IE9 【IE6~8 对DOM的支持更差】
DOM节点(1):
childNodes(表示一个集合数组) nodeType(节点类型:文本节点或空白==3,元素节点==1)
如何获取节点
children 【相似于childNodes,但是它只包括元素节点而不包括文本和空白】
parentNode 父节点【如:点击连接,隐藏整个 li 】
offsetParent 【获取元素在页面上有定位样式的父级对象】
【关于绝对定位】:绝对定位要起作用,是根据上一级即父级是否有定位来决定的,如果父级没有定位则向上查找直至BODY
DOM节点(2):
首尾子节点
有兼容问题
firstChild (适用于IE7等低版本), firstElementChild (适用于IE9等高版本)
lastChild (适用于IE7等低版本),, lastElementChild (适用于IE9等高版本)
【注意】:针对兼容问题的解决办法就是,判断真假。如下:
if(oDiv.firstChild){ oDiv.firstChild.style.background='red'; }else{ oDiv.firstElementChild.style.background='red'; }
兄弟节点
有兼容问题(问题如上)
nextSibling, nextElementSibling
previousSibling, previousElementSibling
【注意】:兼容问题解决方法如上
38. 操纵元素属性
元素属性的操作
1. oDiv.style.display = 'block';
2. oDiv.style['display'] = 'block';
3. Dom方式:
DOM方式操作元素属性
获取:getAttribute(属性名称);
设置:setAttribute(属性名称,值);
删除:removeAttribute(属性名称);
39. DOM元素灵活查找
用className选择元素,由此还封装了一个函数,通过父级对象和子级下的className来过滤元素。
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;
}
2014-10-12 周日
40. 创建,插入和删除元素
创建DOM元素
document. createElement(标签名) //创建一个节点
父对象.appendChild(节点) //追加一个节点
如:为 ul 插入 li 节点
插入元素
父对象.insertBefore(节点,原有节点) //在已有元素前插入,原有节点就是第一个节点,如果没有第一个节点,就直接 父对象.insertBefore(节点)即可,这里需要进行一次判断,由此可以避免兼容问题
如:倒序插入 li
删除DOM元素
父对象.removeChild(节点) //删除一个节点
如:删除 li
41. 文档碎片
1. 文档碎片可以提高DOM操作性能(理论上是这么说的)
2. 文档碎片原理
3. document.createDocumentFragment() //只适用于低版本的浏览器(低于IE9版本,不常用,只用于大批量的元素操作)
================无聊的分隔线=============================
42. 表格应用 --1
获取
tBodies, tHead, tFoot, rows 行, cells 单元格
如:getElementsByTagName('tbody')[0] 可以简写为 tBodies[0] //这是专为表格定义的功能
【注意】:一个表格只能有一个表头和表尾,但可以多个 tBody, 所以要用tBodies.
【注意】:操作表格时,万不可忘记tbody这个标签,否则你懂的。
隔行变色
鼠标移入高亮
添加,删除一行
DOM方法的使用
43. 表格应用 --2
搜索【实例操作】
版本1:基础版本---字符串比较
版本2:忽略大小写---大小转换 //使用大小写转换的方法,大写转小写: 字符串.toLowerCase() 小写转大写: toUpperCase()
版本3:模糊搜索---search的使用 //JS的一个方法:字符串.search(关键字); 没找到就返回 -1
版本4:多关键字---split //JS的一个方法:字符串.split(关键字);
高亮显示, 筛选
2014-10-13 周一
44. 表格应用 -- 排序
移动 Li
appendChild的真正功能是:先将元素从原父级下删除掉,再将元素添加到新的父级下。
如:var aLi=document.getElementsByTagName('li'); //其实aLi并不是一个真正意义上的Array对象,因为数组对象特有sort()方法,它真的用不了,可aLi却可以使用length和方括号这两个数组特性。除非你循环将这个集合aLi,push到一个真正的数组中去。然后,sort(function(){});//看到没,sort()方法中可以放函数的。
元素排序:转换---排序---插入
转换就是:将Li或表格元素集合转换成真正的数组。
排序就是:数组.sort(function(tr1,tr2){....});
插入就是:将排序好的数组,再通过循环方法,appendChild到Li或Tr 的父对象中去
45. 表单应用 -- 1
什么是表单?主要作用就是向服务器提交数据的。如:用户注册,其中的action属性值就是代表提交到哪里。
表单事件?onsubmit 提交时发生的事件,onreset 重置时发生的事件。
46. 表单应用 -- 2
阻止用户输入非法字符---阻止事件
输入时,失去焦点时验证 onkeyup, onblur
提交时检查 onsubmit
后台数据检查
================无聊的分隔线=============================
2014-10-14 周二
47. 运动基础
1. 让DIV运动起来:
主要使用DIV对象的offsetLeft, setInterval, clearInterval 等属性方法来实现。
2. 速度--物体运动的快慢【修改物体每次移动距离的长短】
3. 运动中的BUG
不会停止【可限制物体运动距离】
速度取某些值会无法停止【注意比较运算符的使用】
到达位置后再点击还会运动【使用条件判断来解决】
重复点击速度加快
【注意】:注意定时器的使用,在点击按钮开启一个定时器时,不管有没有开先进行一次关闭定时器操作,此操作是用于避免,因用户多次点击按钮而导致开多个定时器。
4. 匀速运动
速度不变的运动
48. 运动框架及应用
运动框架【所谓框架说白了就是前人总结的经验基础上设定好的做事流程】
在开始运动时,关闭已有定时器
把运动和停止隔开(if...else...)
运动框架实例
1. ‘分享到’ 侧边栏
通过目标点,计算速度值【根据当前位置与目标位置的比较确定方向是正还是负】
这里就上面实例,封装一个函数:
var timer = null;
//var alpha;
function startMove(iTarget) 【此函数适用于侧边栏实例】
{
var oDiv=document.getElementById('div1');
clearInterval(timer); //打开定时器前先清空当前运行的定时器,即使没有也要执行。
var speed = 0;
if(iTarget > oDiv.offsetLeft) //根据目前点与当前位置的比较确定,物体移动的方向
{
speed = 10;
}
else
{
speed = -10;
}
timer= setIterval(function(){
if(iTarget == oDiv.offsetLeft) //当物体到达目录位置时,清空定时器
{
clearInterval(timer);
}
else
{
oDiv.style.left = oDiv.offsetLeft + speed + 'px'; //以指定的速度向目标位置移动
}
},30);
}
2. 淡入淡出的图片
用变量存储透明度
var timer = null;
var alpha=30;
function startMove(iTarget) 【此函数适用于透明度变化实例】
{
var oDiv=document.getElementById('div1');
clearInterval(timer); //打开定时器前先清空当前运行的定时器,即使没有也要执行。
var speed = 0;
if(iTarget > alpha) //根据目标透明度,确定alpha是增还是减
{
speed = 10;
}
else
{
speed = -10;
}
timer = setInterval(function(){
if(iTarget == alpha)
{
clearInterval(timer);
}
else
{
alpha += speed;
oDiv.style.filter = 'alpha(opacity:' + alpha + ')'
oDiv.style.opacity=alpha/100;
}
},30);
}
49. 缓冲运动
逐渐变慢,最后停止
距离越远速度越大
速度由距离决定
速度 = (目标值-当前值)/缩放系数
【注意】document.title 这个文档属性可以更改网页标题。
【注意】像素是计算机能接受的最小显示单位,无四舍五入之说。
Math对象:Math.ceil(3.1) 向上取整 4,Math.floor(3.9) 向下取整 3
【做缓冲运动的效果时,一定要记得取整。】
var timer = null;
function startMove(iTarget) 【此函数适用于缓冲运动】
{
var oDiv=document.getElementById('div1');
clearInterval(timer); //打开定时器前先清空当前运行的定时器,即使没有也要执行。
timer= setIterval(function(){
var speed = (iTarget - oDiv.offsetLeft)/5
speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
if(iTarget == oDiv.offsetLeft) //当物体到达目录位置时,清空定时器
{
clearInterval(timer);
}
else
{
oDiv.style.left = oDiv.offsetLeft + speed + 'px'; //以指定的速度向目标位置移动
}
},30);
}
例子:缓冲菜单
bug: 速度取整
跟随页面滚动的缓冲侧边栏
潜在问题:目标值不是整数时【注意速度取整操作】
【注意】 window.onscroll 这个事件的使用。即,当用户滚动浏览器的滚动条时发生的事件处理程序
scrollTop 的兼容性写法:scrollTop指的是滚动条距离页面顶部的距离,如下:
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
也见有如下写:
var scrollTop = document.documentElement.scrollTop + document.body.scrollTop;
当页面加入DTD标示后 document.documentElement.scrollTop的值在IE和FF下正常,但document.body.scrollTop一直为0。在Chrome下就反过来了。
<script type="text/javascript">
window.οnscrοll=function(){
var oDiv=document.getElementById('div1');
var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;//兼容性写法
startMove(document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop);
};//解释:浏览器可视区域 减去 物体的本身高度 加上 页面顶部到可视区域顶部的距离,如上图示
//如果是修改成对联式的悬浮框,作如下修改:
//startMove(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight)/2 + scrollTop));
};//注意这里用了parseInt这个方法,因为除以2可能会产生小数位数,由此效果中悬浮框会有抖动。因此要取整
var timer=null;
function startMove(iTarget)
{
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
var speed=(iTarget-oDiv.offsetTop)/4;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(iTarget == oDiv.offsetTop)
{
clearInterval(timer);
}
else
{
oDiv.style.top = oDiv.offsetTop + speed + 'px';
}
},30);
}
</script>
50. 匀速运动停止条件
匀速运动:距离足够近
缓冲运动:两点重合
【注意】:物体匀速运动中,如果速度是无法被整减为0时,结果会使物体抖动的厉害,这里建议使用Math.abs(); 。
当距离目标距离小于速度值是,对进行条件判断。
如:
if(Math.abs(iTarget - oDiv.offsetLeft) <= 7)
{
clearInterval(timer);
oDiv.style.left = iTartget + 'px';
}
else
{
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
================无聊的分隔线=============================
2014-10-15 周三
51. 多物体运动框架
多个物体同时运动
实例:多个DIV,鼠标移入变宽
单定时器,存在问题【多物体不能使用同个定时器,也可说成一个确实不够用】
每个DIV一个定时器【这里把定时器当作一个物体的属性如:aDiv[i].timer = null】
多物体运动框架
定时器作为物体的属性
参数的传递:物体,目标值
例:多个DIV淡入淡出
所有东西都不能公用【注意这一句】
属性与运动对象绑定:速度,其他属性值(如透明度等)
【注意:在多物体运动框架中,所有的东西都不能共用】
<script type="text/javascript">
window.οnlοad=function(){
var aDiv=document.getElementsByTagName('div');
for(var i=0; i<aDiv.length; i++)
{
aDiv[i].timer=null;
aDiv[i].οnmοuseοver=function(){
startMove(this,800);
};
aDiv[i].οnmοuseοut=function(){
startMove(this,100);
};
}
};
//var timer=null;
function startMove(obj,iTarget)
{
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=(iTarget - obj.offsetWidth)/4;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(iTarget == obj.offsetWidth)
{
clearInterval(obj.timer);
}
else
{
obj.style.width = obj.offsetWidth + speed +'px';
}
},30);
}
</script>
【多物体框架中,不能有共用的东西】如上面的透明度变化函数也要做如下修改:
function startMove(obj, iTarget) 【此函数适用于透明度变化实例】
{
clearInterval(timer); //打开定时器前先清空当前运行的定时器,即使没有也要执行。
var speed=(iTarget - obj.alpha)/4;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
obj. timer = setInterval(function(){
if(iTarget == obj.alpha)
{
clearInterval(timer);
}
else
{
obj.alpha += speed;
oDiv.style.filter = 'alpha(opacity:' + obj.alpha + ')'
oDiv.style.opacity=obj.alpha/100;
}
},30);
}
52. 任意值运动框架
offset属性的Bug
有边框的DIV宽度在减1的运动中却变宽而不是变窄
此问题的解决方法是,用currentStyle代替offset
【offset取的是DIV盒子模型的长宽高的值,一个宽是100,边框是1的DIV,在做变宽运动的过程中,因为宽是100,而offsetWidth的值却是102, 减1后,是101.每间隔执行一次, offsetWidth都是加2,这个width就不是减1,反而是加1了.】
原有运动框架的问题
只能让某个值运动起来
如果想让其他值运动起来,则需要复制修改程序块
扩展的运动框架
要参与运动属性作为参数
封闭opacity
小数的问题。
Math.round() 方法,对小数时行四舍五入操作。
【注意】:计算机是不能真正存储一个小数,大多是小数的近似值。所以有时会产品这样那样的误差。
function getStyle(obj, name) //获取指定样式
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj,false)[name];
}
}
function startMove(obj, attr, iTarget) //任意运动框架函数
{
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var cur=0;
if(attr == 'opacity')
{
//cur = parseFloat(getStyle(obj,attr))*100; //因为取整会使样式中的,兼容于FF/chrome浏览器的 opacity样式 小于1的值,取整后为0。所以这里要对运动的样式进行判断。【但是】:这个地方易产品误差,还需要优化调整。如下:
cur = Math.round(parseFloat(getStyle(obj,attr))*100);
}
else
{
cur = parseInt(getStyle(obj,attr));
}
var speed=(iTarget-cur)/5;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(iTarget == cur)
{
clearInterval(obj.timer)
}
else
{
if(attr=='opacity')
{
//alert(cur+speed);
document.title=speed+cur;
obj.style.filter='alpha(opacity:'+(cur+speed)+')'
obj.style.opacity = (cur+speed)/100;
}
else
{
obj.style[attr]=cur+speed+'px';
}
}
},30);
}
2014-10-16 周四
53. 仿Flash图片展示--1
效果思路【重要的是元素布局】
1.两边的按钮---淡入淡出【这部分简单】
2.大图下拉---层级,高度变化【技巧在下拉的效果,切换是通过zIndex层次高低来实现】
3.下方的 li---多物体淡入淡出【跟按钮一样的】
4.下的的 UI ---位置计算
左右按钮
1.淡入淡出
鼠标移到按钮上,按钮会消失
层级问题
按钮和遮罩上都得加上事件
【注意】:此实例涉及前面的学习知识,如淡入淡出,无缝滚动,自定义属性,setInterval定时器,clearInterval(),及div, ul, li三者布局的应用。
2014-10-17 周五
54. 仿Flash图片展示 --2
1.下方li 效果
2.点击切换大图 ---- 选项卡效果应用
3.li 淡入淡出 --- 移入移出
4. Ul 移动 --- 位置计算
大图片切换
1. 图片层级 ----zIndex+1【每切换一次加1】
2. 图片下拉效果(应用前面讲的 任意运动框架 封装好的函数)
加入自动播放
1.定时器的应用 。
================无聊的分隔线=============================
55. 链式运动框架
回调函数
1. 运动停止时,执行函数
2. 运动停止时,开始下一次运动
3. 例子:土豆网右下角菜单
【注意】:注意这个所谓的 链式运动框架 就是在原来的那个 任意运动框架 的基础上,添加一个 函数参数 如:
functio startMove(obj, name, iTarget, fnEnd) //fnEndI() 这个函数是在运动结束时执行的一个函数,修改如下,仅加了一个函数参数和一条语句:
function startMove(obj, attr, iTarget, fnEnd) //任意运动框架函数,追加一个函数参数
{
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var cur=0;
if(attr == 'opacity')
{
//cur = parseFloat(getStyle(obj,attr))*100; //因为取整会使样式中的,兼容于FF/chrome浏览器的 opacity样式 小于1的值,取整后为0。所以这里要对运动的样式进行判断。【但是】:这个地方易产品误差,还需要优化调整。如下:
cur = Math.round(parseFloat(getStyle(obj,attr))*100);
}
else
{
cur = parseInt(getStyle(obj,attr));
}
var speed=(iTarget-cur)/5;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(iTarget == cur)
{
clearInterval(obj.timer)
if(fnEnd)fnEnd(); //如果这个函数是存在的就是执行它。
}
else
{
if(attr=='opacity')
{
//alert(cur+speed);
document.title=speed+cur;
obj.style.filter='alpha(opacity:'+(cur+speed)+')'
obj.style.opacity = (cur+speed)/100;
}
else
{
obj.style[attr]=cur+speed+'px';
}
}
},30);
}
function getStyle(obj, name) //获取指定样式
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj,false)[name];
}
}
56. 完美运动框架
多个值同时变化【参考下面的完美运动框架,及前两个自定义库函数】
1. setStyle同时设置多个属性
参数传递
Json的使用 如:var json={a:1, b:2, c:3};
for in遍历 如: for(var i in json){alert(json[a]);}
2. 运用到运动框架
3. 检测运动停止
标志变量
4. 例子:伸缩同时淡入淡出的菜单
如:
var oDiv=document.getElementById('div1');
//注意这里使用了下面的完美运动框架
starMove(oDiv, 'width', 300, function(){
startMove(oDiv, 'height', 300, function(){
startMove(oDiv, 'opacity', 100);
});
});//当第一个动作执行完成后立即执行下一个动作。
2014-10-20 周一
function getByClass(oParent, name) //根据元素类属性值获取元素对象
{
var result=[];
var aEle=oParent.getElementsByTagName('*');
for(var i=0; i<aEle.length; i++)
{
if(aEle[i].className == name)
{
result.push(aEle[i]);
}
}
return result;
}
function getStyle(obj, name) //根据元素样式名获取样式值
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj,false)[name];
}
}
function startMove(obj, json, fnEnd) //接近完美的运动框架
{
clearInterval(obj.timer);
obj.timer=setInterval(function(){
for(var attr in json)
{
var cur=0;
if(attr == 'opacity')
{
cur = Math.round(parseFloat(getStyle(obj,attr))*100);
}
else
{
cur = parseInt(getStyle(obj,attr));
}
var speed=(json[attr]-cur)/5;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(json[attr] == cur)
{
clearInterval(obj.timer)
if(fnEnd)fnEnd();
}
else
{
if(attr=='opacity')
{
//alert(cur+speed);
document.title=speed+cur;
obj.style.filter='alpha(opacity:'+(cur+speed)+')'
obj.style.opacity = (cur+speed)/100;
}
else
{
obj.style[attr]=cur+speed+'px';
}
}
}
},30);
}
57. 修正完美框架,BUG: 当多个动作同时执行时,其中一个物体动作提前完成时,其它动作也会被终止
function getByClass(oParent, name)
{
var result=[];
var aEle=oParent.getElementsByTagName('*');
for(var i=0; i<aEle.length; i++)
{
if(aEle[i].className == name)
{
result.push(aEle[i]);
}
}
return result;
}
function getStyle(obj, name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj,false)[name];
}
}
function startMove(obj, json, fnEnd)
{
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var bStop=true;//这里增加一个标志变量, 如果这个标志变量在此事件的外面定义,则透明度无动作
for(var attr in json)
{
var cur=0;
if(attr == 'opacity')
{
cur = Math.round(parseFloat(getStyle(obj,attr))*100);
}
else
{
cur = parseInt(getStyle(obj,attr));
}
if(cur != json[attr]) bStop=false; //这里来判定每个物体运动是否完全执行,如果任一个动作执行未完成,则标志量为否。
var speed=(json[attr]-cur)/5;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(attr=='opacity')
{
//alert(cur+speed);
document.title=speed+cur;
obj.style.filter='alpha(opacity:'+(cur+speed)+')'
obj.style.opacity = (cur+speed)/100;
}
else
{
obj.style[attr]=cur+speed+'px';
}
}
if(bStop) //每到间隔时间点,这里都会来检测一下标志量,如果仍为true则清空定时器
{
clearInterval(obj.timer)
if(fnEnd)fnEnd();
}
},30);
}
58. 总结运动框架的演变进度:
1. startMove(iTarget) //运动框架
2. startMove(obj,iTarget) //多物体
3. startMove(obj, attr, iTarget) //任意值
4. startMove(obj, attr, iTarget, fn) //链式运动
5. startMove(obj, json) //任意物体
6. startMove(obj, json, fn) //完美运动框架
59. 完美运动框架的应用实例
例:幻灯片【大图右下角 有以 数字1-5为 按钮的鼠标悬停动作】
例:新浪微博里的链式运动实例【发布留言,留言被插入到留言列表中,以样式链动效果展示】
================无聊的分隔线=============================
事件基础
60. event对象和事件冒泡
1. 什么是event对象
用来获取事件的详细信息:鼠标位置,键盘按键等
例:获取鼠标位置:clientX
document的本质:document.childNodes[0].tagName
2. 获取event对象(兼容性写法)
var oEvent=ev || event;
3. 事件流
事件冒泡【多元素层次如果都有一个onclick事件,那么,如果单击低层级事件,各层级同类事件会根据元素层级由低到高依次执行】
取消冒泡:oEvent.cancelBubble = true;
例:仿select控件
DOM事件流
61. 鼠标事件
1. 鼠标位置
可视区位置:clientX, clientY, 要记得加scrollTop
例:跟随鼠标的DIV
消除滚动条的影响
滚动条的意义 ----可视区与页面顶部的距离
2. 获取鼠标在页面的绝对位置
封装函数
function getPos(ev)
{
var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft|| document.body.scrollLeft;
return {x: ev.clientX+scrollLeft, y:ev.clientY+scrollTop};
}
例:一串跟随鼠标的DIV
使用上面的函数是:
window.οnlοad=funciton(ev) //括号里的参数不能忘哦
{
var oEvent=ev || event; //兼容性写法
var pos = getPos(oEvent);
alert(pos.x +" , "+pos.y); //一个橫座标X, 一个纵坐标Y
};
62. 键盘事件
keyCode
获取用户按下键盘的哪个按键 // onkeydown, onkeyup
例:键盘控制DIV移动【如果关闭键盘的辅助功能,即按键延时?】
其他属性
ctrlKey, shiftKey, altKey【注意Key单词的首字母大写】
例:提交留言
回车提交
ctrl+回车 提交
================无聊的分隔线=============================
2014-10-21 周二
63. 默认行为
什么是默认行为?如:页面的右键菜单
oncontextmenu 上下文菜单事件
如: document.οncοntextmenu=function(){return false;};
阻止默认行为
普通写法:return false;
例:屏蔽右键菜单
弹出自定义右键菜单
例:只能输入数字的输入框
onkeydown, onkeyup事件的区别:键盘按下时,和键弹起时【注意被作用的对象】
64. 拖拽
1. 简单拖拽 //onmousedown, onmouseup
距离不变:即onmousedown事件中,鼠标与被拖拽对象的相对距离不变
三个事件:即鼠标onmousedown后执行onmousemove和onmouseup 三个事件的编写
2. 靠普拖拽
原有拖拽的问题,鼠标易滑出元素的范围
直接给document加事件
FF下, 空DIV拖拽BUG
阻止默认事件
防止拖拽出页面
修正位置
流程:1. 获取对象【var oDiv=document.getElementById('div1')】
2. 在onmousedown事件下,计算鼠标在对象中的相对位置。如:var disX=oEvent.clientX-oDiv.offsetLeft
3. 在onmousemove事件下,时时计算oDiv对象的位置,保持鼠标在对象中的相对位置:
如:oDiv.style.left = oEvent.clientX-disX+'px';
【注意】:这里要可以添加条件将对象圈在可视范围区域内,那就是时时判定oDiv对象的 left 值。当left小于0时,left=0;
【但是】:这个事件的对象不能是oDiv对象,否则鼠标在移动时很容易超出oDiv对象的范围,无法保持鼠标与oDiv对象的相对位置。只有将事件的对象更改为document,此BUG可修正。
4. 在ounmouseup事件下,也要是保证,此事件跟onmousemove事件一样,都是document对象下的事件。否则会有异常。
此事件上,清空事件:document.οnmοusemοve=null; document.οnmοuseup=null;
2014-10-22 周三
65. 事件绑定【什么时候能用到:当同一对象有多个相同行为要发生时。如:同一个按钮的单击事件,被多次赋于不同的执行内容,如果不用绑定,在事件会被相互覆盖,如同同一个变量被多次赋值只显示最后一次被赋的值一样。】
1. IE方式【只适用于IE浏览器】
attachEvent(事件名,函数),绑定事件处理函数
如:
oBtn.attachEvent('onclick', function(){ alert('a'); });
oBtn.attachEvent('onclick', function(){ alert('b'); });//这两个事件处理函数都将被以次执行,但如果不使用事件绑定则只执行最后一个事件处理函数。
【注意】:在IE9版本以下的浏览器,被绑定事件处理函数的执行顺序与绑定顺序相反。
detachEvent(事件名,函数),解除绑定
2. DOM方式【只适用于chrome, FF浏览器,不兼容低IE9的IE浏览器版本】
addEventListener(事件名,函数,捕获)
如:
oBtn.addEventListener('click', function(){ alert('a'); }, false);
oBtn.addEventListener('click', function(){ alert('b'); }, false);//执行效果如attachEvent
【注意】:事件名前后两者是不同的,一个带有on 一个没有。
removeEventListener(事件名,函数,捕获)
【封装一个兼容处理函数】:
fuction myAddEvent(obj, ev, fn) //事件处理对象obj, 不带on的事件名ev, 事件处理函数fn
{
if(obj.attachEvent)//处理兼容问题常用的方式
{
obj.attachEvent( 'on'+ev, fn );
}
else
{
obj.addEventListener( ev, fn, false );
}
}
fuction myDelEvent(obj, ev, fn) //事件处理对象obj, 不带on的事件名ev, 事件处理函数fn
{
if(obj.detachEvent)//处理兼容问题常用的方式
{
obj.detachEvent( 'on'+ev, fn );
}
else
{
obj.removeEventListener( ev, fn, false );
}
}
3. 何时使用事件绑定
4. 绑定事件和this
5. 绑定匿名函数,会无法删除
【注意】:一个不小听到老师一句话,父级必须要有相对定位,子级才能有绝对定位。
66. 高级拖拽 ----1
1. 复制拖拽原理
距离不变
三个事件:down, move, up
2. 限制范围
对位置进行判断
例1:不能拖出窗口的DIV【前面已经讲过】
例2:不能拖出指定对象的DIV【将document.documentElement.clientWidth-oDiv.offsetWidth 改为 oDiv2.offseWidth-oDiv.offsetWidth 即改变被减对象就可以】
磁性吸附:其实就是判断物体与窗口边缘的距离 小于 某长度时,将物体的位置=边缘位置
如:
var disY=ev.clientY - oDiv.offsetTop;
var t=ev.clientY - disY;
if(t<5)//这里的5像素就是物体与窗体边缘的距离
{
t=0;//当距离小于5像素时,物体自动吸附到边缘
}else if(t>(document.documentElement.clientHeight-oDiv.offsetHeight-5))//效果如物体到左边时一样
{
t=document.documentElement.clientHeight-oDiv.offsetHeight;
}
67. 高级拖拽 ----2
1. 图片拖拽
阻止默认事件 return false;
2. 文字选中
阻止默认事件
IE下拖动有问题【使用阻止默认行为,IE9版本以下的浏览器依然有异常。解决方法就是使用事件捕获】
事件捕获?setCapture() //这个方法只适用于低版本的IE浏览器,如:鼠标按下时,oDiv.setCapture(); 鼠标释放时,oDiv.releaseCapture();
将setCapture绑定到oDiv上,或锁定在oDiv对象上了。如果没有在onmouseup事件中执行oDiv.releaseCapture(),页面上的所事件都集中指向这个oDiv对象,鼠标在页面上也不能作其它操作。
当然,如果在onmouseup事件中执行oDiv.releaseCapture()后,好像一切都OK了,但是,在chrome浏览器中由,setCapture和releaseCapture只支持ie浏览器,所以在其它浏览器中大多是不兼容的。
由此还要做兼容性的调示:IE可以使用setCapture,在Chrome,FF下还要使用原来的那段代码,即需要将onmousemove和onmouseup事件绑定到document对象上。且在onmouseup事件中释放的是:document.οnmοusemοve=null; document.οnmοuseup=null;
3. 与DOM配合
带框的拖拽
说白了就是在原有的拖拽实例中,当鼠标按下时添加一个只有边框的DIV2元素,大小跟原有DIV元素相等。
这时能被拖拽的元素换成新增的边框元素了,且,在释放鼠标时还要清除掉DIV2这个边框。
且,不担要清除掉因拖拽生成的DIV2边框,还要将原来的DIV元素移动到DIV2元素所在的位置
保留原有位置的拖拽
同时在给新增元素设置大小为DIV元素的大小后,还要记得使每次移动DIV2元素时,它的起点都是DIV当前所在的位置。
2014-10-23 周四
68. 自定义滚动条
1. 拖拽
只有横向拖拽
限制范围----范围的大小
计算比例----当前值/最大值
2. 控制其他对象【重在操作】
例1:控制物体的大小
例2:控制物体的透明度
例3:控制文字滚动
【以上几个例子都是在原有拖拽实例的基础上完成的,主要是计算被拖拽物的当前x位置与其与父级元素的offsetWidth差的比例。得到比例值,就可以轻松的实现控制物体大小,透明度及文字滚动了。】
================无聊的分隔线=============================
AJAX基础
69. AJAX基础----1
1.什么是服务器?
网页浏览过程的分析
如何配置自己的服务器程序(AMP)【学习测试使用的是wampServer】
2. 什么是Ajax?
无刷新数据读取
用户注册,在线聊天
同步,异步
70. Ajax基础 ----2
使用Ajax
基础:请求并显示静态TXT文件
字符集编码?GB2312 , UTF-8
缓存,阻止缓存【缓存就是老家灶台旁边的水桶,因为那时做不到边抽边用,即时现在有了自来说,也不如有个水桶方便。】
【阻止缓存】:使用 'url?a='+new Date().getTime() 或 ‘url?a=’+Math.random()
动态数据:请求JS(或json)文件
eval的使用:可以将字符串解析成JS能够识别的数据类型,如:一个文本内容是 [a,b,c,d,1,3,4] ,那么eval这个字符串,就可以得到一个数组对象。如果文本的内容是[{a:1,b:12}, {c:22,d:55}] ,那么eval过后,得到的也是个数据,可数据内部却是两个json数据:
var arr=eval([{a:1,b:12}, {c:22,d:55}] ); alert(arr[0].a); //它的结果就是1
DOM创建元素
局部刷新:请求并显示部分网页文件
71. Ajax原理
HTTP请求方法
GET ----用于获取数据(如:浏览帖子)
POST ----用于上传数据(如:用户注册 )
GET, POST的区别【本质区别就是两个页面是不是通过地址栏来传递数据】
get是在url里传递数据:安全性低, 容量小不适于传送大数据,有缓存
POST,安全性相对高,容量可达2GB,无缓存
缓存?
2014-10-24 周五
72. 编写Ajax ---1
1. 创建Ajax对象
ActiveXObject("Microsoft.XMLHTTP"); //主要用于兼容IE6浏览器的一个对象,且这个对象只兼容IE浏览器
XMLHttpRequest() //只兼容非IE6的浏览器
【全局变量】其实就是window对象的一个属性。
【注意】:如果在JS中只写一个
alert(a); //运行时浏览器会报错,因为a变量没有定义 .Js从初始化中也找不到
alert(window.a); //运行时不会报错,只是提示一个undefined,这时JS只认为此对象没有添加这个属性
function ajax( url, fnSucc, fnFaild )
{
//创建oAjax对象
if(window.XMLHttpRequest) //这个window对象必须加上,否则IE6浏览器会报错
{
var oAjax=new XMLHttpRequest();
}
else
{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}
//连接服务器
oAjax.open('GET', url, true);
//发送请求
oAjax.send();
//接收返回值
oAjax.onreadystatechange=function(){
if(oAjax.readyState==4) //请求状态码为4时,表示读取完成,但不代表成功
{
if(oAjax.status==200) //结果属性值200代表返回成功,即完成任务且返回信息
{
//alert('成功'); //responseText.
fnSucc(oAjax.responseText);
}
else
{
if(fnFaild)
{
fnFaild(oAjax.status);
}
//alert('失败');
}
}
};
}
2. 连接服务器
open(方法名,文件名,异步传输) //如:oAjax.open('GET', 'a.txt', true); //是否为异步,true为异步,false为同步。大多为异步,极少为同步。
同步和异步?
现实生活中,同步就是多件事一起,异步是一件一件的来
而此处的同步是一件一件的来, 异步则是多件事一起来
3. 发送请求
send()
73. 编写Ajax ---2
请求状态监控
onreadystatechange事件:
1. readyState属性:请求状态码如下:
0:(未初始化)还没有调用open()方法
1:(载入)已调用send()方法,正在发送请求
2:(载入完成)send()方法完成,已收到全部响应内容
4:(解析)正在解析响应内容
5:(完成)响应内容解析完成,可以在客户端调用了
2. oAjax.status属性:请求结果
3. oAjax.responseText
74. Ajax数据
数据类型【字符编码格式存储时统一为UTF-8】
什么叫数据类型 -----英文,中文
XML,Json
字符集
所有文件字符集相同
================无聊的分隔线=============================
2014-10-25 周六
面向对象
75. 什么是面向对象?一切皆对象,使用对象时,只关注对象提供的功能,不关注其内部细节,如:Jquery
面向对象是一种通用思想,并非只有编程中能,任何事情都可以用。
76. JS中的面向对象
1. 面向对象编程(OOP)的特点:
抽象:抓住核心问题
封装:不考虑内部实现,只考虑功能使用
继承:从已有对象上,继承出新的对象
多重继承
多态
2. 对象的组成
方法 ---- 函数:过程,动态的【函数也是自由的,不属于任一对象。方法则是属于某】
属性 ---- 变量:状态,静态的【变量和属性其实是一样的,只是变量是自由的,不属于任何对象,而属性却是有主儿的,它属于某一对象。】
76. 一个面向对象程序实例
为对象添加方法和属性
this详解,事件处理中this的本质
window
如:function show(){ alert(this); }; //结果是window对象 相当于如下写法:
window.show=function(){ alert(this); };
this ----函数属于谁【当前的方法或函数属于谁,this就是谁】
不能在系统对象中随意附加方法,属性,否则会覆盖已有方法,属性
object对象:是个空白对象。可以它上面加属性加方法
77. 工厂方式
什么是工厂?需要原料,加工,出厂,如下实例:
function createPerson(name, qq)
{
//获取原料
var obj=new object(); //手动创建一个对象
//加工原料
obj.name=name; //添加并设置对象的属性
obj.qq=qq;
obj.showName=function(){
alert('我的姓名:'+this.name);
};
obj.showQQ=function(){
alert('我的QQ号:'+this.qq);
};
//出厂
return obj; //手动返回对象
}
工厂方式
用构造函数创建一个类
什么是类,对象(实例):模具和零件
78. 工厂方式的问题
问题:
1. 没有new
加上new后相当于做了两件事儿:创建了一个空白对象,返回这个对象
如:系统后台对New的处理是这样的
var this=new object();
。。。
return this;//这两条语句在编译器中是不合法,只是用来说明new的作用。
实例说明一下:
function createPerson(name, qq)
{
var obj=new object(); //手动创建一个对象
obj.name=name; //添加并设置对象的属性
obj.qq=qq;
obj.showName=function(){
alert('我的姓名:'+this.name);
};
obj.showQQ=function(){
alert('我的QQ号:'+this.qq);
};
return obj; //手动返回对象
}
//看上面的实例是人为的手动的去创建一个对象,相当于我们创建了一个构造函数,调用如下
var obj=createPerson('blue', '1234567');
alert(obj.name); //即可获取blue这个人的姓名
如果:var obj=new createPerson('张三', '654789');//这里用了New,如前如说,使用New关键字后,是系统自动为我们创建一个空白对象,且最后返回给我们。那这里的createPerson函数要如下写:
function createPerson(name, qq)
{
//系统后台执行如下
//var this=new object(); //此语句不能被编译器识别,为系统后台创建过程
this.name=name; //添加并设置对象的属性
this.qq=qq;
this.showName=function(){
alert('我的姓名:'+this.name);
};
this.showQQ=function(){
alert('我的QQ号:'+this.qq);
};
//系统后台自动返回对象
//return this; //此语句不能被编译器识别,为系统后台创建过程
}
那么:var obj=new createPerson('张三', '654789'); 所获取的obj对象,alert(obj.name); //结果也能正常执行,得 张三
New 和 this? 【任何函数前面都能加new, new出来的都是新对象。而this指就是代表其所属对象。如上面实例说明,它有时也是系统默认生成的空白对象。】
2.函数重复定义问题
js 原型?prototype
简单的CSS解释:
class 一次给一组元素添加样式 JS中被称为原型
行间样式 一次给一个元素添加样式 JS中称作给对象加事件
如实例:
var arr1=new Array(1,2,3,4);
arr1.sum=function(){ //这里操作好比给单个元素添加样式一样,只给arr1添加这个方法,这个方法也只服务于arr1对象
var result=0;
for(var i=0; i<this.length; i++)
{
result += this[i];
}
return result;
};
调用:alert(arr1.sum()); //结果正常显示为10
如果var arr2=new Array(2,3,5);
调用:alert(arr2.sum()); //结果报错,因为sum()这个方法不是为arr1对象创建的。
【但如果将函数修改如下】:
Array.prototype.sum=function(){ //这里操作好比给单个元素添加样式一样,只给arr1添加这个方法,这个方法也只服务于arr1对象
var result=0;
for(var i=0; i<this.length; i++)
{
result += this[i];
}
return result;
};
那么:alert(arr2.sum());//结果也能正常显示了。因为这次sum()方法是定义在Array这个类(类似class的作用)上的,new 出的对象当然也都有这个方法可以用。
【但是】:因为方法是写在createPerson类中的,所以每个对象都有一个,但是创建的对象中所带的同名方法是不等的,如:
alert(arr1.showName与arr2.showName); //返回false
类:
function createPerson(name, qq)
{
//系统后台执行如下
//var this=new object(); //此语句不能被编译器识别,为系统后台创建过程
this.name=name; //添加并设置对象的属性
this.qq=qq;
this.showName=function(){
alert('我的姓名:'+this.name);
};
this.showQQ=function(){
alert('我的QQ号:'+this.qq);
};
//系统后台自动返回对象
//return this; //此语句不能被编译器识别,为系统后台创建过程
}
修改为:
function createPerson(name, qq)
{
//系统后台执行如下
//var this=new object(); //此语句不能被编译器识别,为系统后台创建过程
this.name=name; //添加并设置对象的属性
this.qq=qq;
//系统后台自动返回对象
//return this; //此语句不能被编译器识别,为系统后台创建过程
}
而两个方法添加到类的原型上去:
createPerson.prototype.showName=function(){
alert('我的姓名:'+this.name);
};
createPerson.prototype.showQQ=function(){
alert('我的QQ号:'+this.qq);
};
这样, alert(arr1.showName与arr2.showName); //返回ture
【总结】 :构造函数加属性,用原型加方法
79. 流行的面向对象编写方式
1.用混合方式构造对象
混合的构造函数/原型方式
2. 原则
构造函数:加属性
原型:加方法
3. 对象命名规范
类的首字母大写
如:上面的createPerson类【也叫构造函数】,就可以写成CreatePerson了
2014-10-27 周一
80. 【实例】面向对象的选项卡【只作了解,很少用,只在大型程序中应用】
把面向过程的程序,改写成面向对象的形式
原则:不能有函数套函数,但可以有全局变量
过程:【去除函数嵌套 --> 改造onload为构造函数(即:类,构造函数名不一定要用Onload)---> 原来的全局变量改造成构造函数的属性,原来的函数改造成构造函数的方法 ----> 】
onload ----> 构造函数
全局变量 ----> 属性
函数 -----> 方法
改错:this, 事件,闭包,传参
对象与闭包
通过闭包传递this
81. Json方式的面向对象【简单,不适合对对象操作,常称单体】
把方法包在一个Json里
有人管他叫----命名空间
在公司里,把同一类方法,包在一起【即json中元素层次的妙用】
82. 拖拽和继承
面向对象的拖拽:改写原有拖拽
对象的继承 【call() 实现属性的继承,方法的继承用原型】
什么是继承:在原有类的基础上,略作修改,得到一个新类,且不影响原有类的功能
instanceof运算符:查看对象是否是某个类的实例。
83. 使用继承
限制范围的拖拽类
构造函数的伪装:
属性的继承:原理是欺骗构造函数,和call使用
原型链:
方法的继承:原理是复制方法。覆盖原型和方法复制
如:
function a(){ this.x=12; }//构造函数a,a的属性x=12
a.prototype.showX=function(){ alert(x); }; //a的原型绑定方法showX()
调用:a.showX(); //正确
创建b构造函数,继承a
funciotn b(y){ a.call(this, y) };//属性继承,并传递一个参数给b对象
for(var z in a.prototype){ b.prototype[z] = a.prototype[z]; } //方法继承,不能用b.prototype=a.prototype, 因为直接赋值是引用关系,b的再修改同时也会影响到a。只有通过复制才是正确的方式。
84. 系统对象
1. 本地对象(非静态对象)【不能直接使用,要New出来才能用】
什么是本地对象?
常用对象:Object, Function, Array, String, Boolean, Number, Date, RegExp, Error
2. 内置对象(静态对象)【不经过New的对象,大多是直接使用】
什么是内置对象?Global(不存在的,虚的东西), Math
3. 宿主对象(由浏览器提供的对象)
DOM, BOM
================无聊的分隔线=============================
BOM的应用
85. BOM基础
1. 打开,关闭窗口
open:蓝色理想运行代码功能 window.open(url, 打开方式_blank/_self);
close:关闭时提示问题, FF中close只能关闭open打开的窗口
2. 常用属性
window.navigator.userAgent //当前浏览器的相关版本信息
window.location //当前页面的地址,可读取写设置
86. 尺寸及坐标
窗口尺寸,工作区尺寸
1. 可视区尺寸
document.documentElement.clientWidth
document.documentElement.clientHeight
2. 滚动距离
document.body.scrollTop
document.documentElement.scrollTop
87. 常用方法和事件
1. 系统对话框
警告框:alert("内容"),没有返回值
选择框:confirm("提示内容"),返回boolean
输入框:prompt(),返回字符串或Null
2. window对象常用事件
onload
onscroll
onresize
例:回到顶部按钮,侧边栏广告
闪烁问题
================无聊的分隔线=============================
cookie的基础和应用
88. cookie基础
什么时cookie:如自动登陆,记住用户名,是document对象中的一个属性,document.cookie
cookie的特性
同一个网站中所有页面共享一套cookie
数量,大小有限
过期时间 如:oDate.setDate(oDate.getDate() + 8);//获取8天后日期
JS中使用cookie:document.cookie
如:document.cookie="user=blue"; //等号相当于添加值,而不是赋值
如:document.cookie="user='张三'; expires="+oDate;//oDate就是上面修改后的日期
为设置cookie封装一个函数
function setCookie(name, value, iDay)//name就是cookie名,value就是cookie值,iDay就是过期时间长度
{
var oDate=new Date();
oDate.setDate(oDate.getDate() + iDay);
document.cookie=name+'='+value+'; expires='+oDate;
}
89. cookie的使用---1
设置cookie
格式:名字=值
不会覆盖
如:document.cookie="user=blue"; //等号相当于添加值,而不是赋值
document.cookie="password=123456" //这两条内容都cookie的值,结果:user=blue;password=123456
过期时间:expires=时间 ,时间对象的使用
封装函数
function setCookie(name, value, iDay)//name就是cookie名,value就是cookie值,iDay就是过期时间长度
{
var oDate=new Date();
oDate.setDate(oDate.getDate() + iDay);
document.cookie=name+'='+value+'; expires='+oDate;
}
读取cookie,字符串分割 split()
function getCookie(name)
{
var arr=document.cookie.split(';');
for(var i=0;i<arr.length;i++)
{
var arr2=arr[i].split('=');
if(arr2[0]==name)
{
return arr2[1];
}
}
return '';
}
删除cookie已经过期
fuction removeCookie(name)
{
setCookie(name,1,-1);//即将过期时间修改为已过期
}
90. 使用cookie--2
例:用cookie记录上次登陆的用户名
提交时---记录用户名
window.onload---读取用户名
================无聊的分隔线=============================
2014-10-28 周二
JS正则表达式
91. 正则表达式基础 ----1 假设:var str='abcdefg';
1. 复习字符串操作
search 查找 如:alert(str.search('a'); //结果就是0,因为a在字符串的第0位,如果没有找到则值为-1
substring 获取子字符串 如:str.substring(2,5) //结果是cde,因为截取的字符串不包含结束位置的字符
而如果:str.substring(2) //结果是cdefg,这样可以从起始截取到结尾
charAt 获取某个字符 如:str.charAt(1) //结果是b
split 分割字符串,获得数组 如前面实例。str.split('分隔符');
2. 找出字符串中的所有数字
用传统字符串操作完成
function getNum(str)//获取字符串中所有的数字
{
var tmp='';
var arr=[];
for(var i=0;i<str.length;i++)
{
if(str.charAt(i)>='0' && str.charAt(i)<='9')
{
tmp+=str.charAt(i);
}
else
{
if(tmp)
{
arr.push(tmp);
tmp='';
}
}
}
if(tmp)
{
arr.push(tmp);
tmp='';
}
}
用正则表达式完成 上面一堆的语句找数字的方法,如果换成正则如下:
str.match(/\d+/g); //这样alert出来的结果跟上面函数获取的结果是一样的。
92. 正则表达式基础 ----2
什么是正则表达式?
1. 什么叫正则?规则,模式
2. 强大的字符串匹配工具
3. 是一种正常人类很难懂的文字
4. RegExp对象
JS风格----new RegExp("a" , "i") //'a' 就是正则表达式,'i' 是正则的选项内容表式忽略大小写。
perl风格 ----/a/i //表达的意思跟JS的风格是一样的。
93. 字符串与正则配合 ----1
search
字符串搜索
返回出现的位置
忽略大小写:i -----ignore(忽略的)
判断浏览器的类型
如:var str='abc 3456 2 a43 sdfa2'; var re=/\d/; alert(str.search(re)); //找出字符串中的第一个数字,结果是4,search()可以直接匹配正则表达式,但只能获取位置信息。
match
获取匹配的项目
量词:+
量词变化:\d , \d\d 和 \d+
全局匹配:g -------global(全局的),即找到全部的
例如:找出所有的数字【如91号记录中如记】如:str.match(/\d+/g);//获取字符串中的所有数字
94. 字符串与正则配合 ----2
replace 【语法:replace(被替换字符串,预替换的字符串) 如:str.replace('a', 'c') //即将字符串str中的a字符替换成c字符】
替换所有匹配【上述语法中的例子的不足之处就是replace只能替换单个字符或字符串】
返回替换后的字符串
例如:敏感词过滤 //var re=/a/; str.replace(re); //这样也只能匹配单个的,要找替换全部不要忘记 g 这个选项 var re=/a/g;
95. 字符串 ----1 元字符 就是 方括号
1. 任意字符匹配 [abc]
如:o[usb]t 匹配 obt, ost , out
2. 范围匹配 [a-z], [0-9]
如:id[0-9] 匹配 id0, id1, id2......id9
3. 排除匹配 [^a]
如:o[^0-9] 匹配 oat, o?t, o t //排除了o后跟有数字0-9的字符串
96. 字符串----2
组合 [a-z0-9A-Z]
例如:过滤HTML标签,自定义innerText方法
转义字符:
. (点):任意单个字符【极少用】
\d, \w, \s
\d 单个数字[0-9]
\w 单个英文,数字,下划线 [0-9a-z_]
\s 单个空白字符,包括空格,tab等不可显示不可打印的字符
\D, \W, \S
\D 排除数字[^0-9] //与\d的意义相反
\W 排除数字,英文,下划线 [^0-9a-z_]
\S 排除字符,TAB符等不可显示不可打印的字符,即非空白字符
97. 量词【个数】
什么是量词?
1. 出现的次数
2. {n,m} , 至少出现n次,最多m次
如:查找QQ号
常用量词
{n, },至少n次
* ,0或多次 {0, } 【少用】
?,0或1次 {0,1} 【被限定的表达要用括号括起来先,如果跟在限定字符*+{}后则表示非贪婪模式的设定】
+,1或多次 {1, }
{n} ,等于n次
验证邮箱地址的正则:var re=/\w+@[0-9a-z]\.[a-z]+/i
正则表达式对象的一个方法test(),是用来验证正则表达式的合法性的。如:re.test(匹配的字符串);
^ 用在表达式开头代表行首
$ 用在表达式结尾代表行尾
常用正则的如:表单检验,邮箱地址校验等,不要忘记 忽略大小的i,搜索全部的g,行首行尾的 ^ 和 $