[关闭]
@fantaghiro 2014-10-23T09:50:23.000000Z 字数 22221 阅读 2315

JS基础课程学习笔记-来自妙味课堂

js 学习笔记 妙味课堂


JS入门基础_热身课程

写JS的步骤

  1. 先实现布局
  2. 想出实现原理
  3. 了解JS语法

希望把某个元素移除的实现

获取元素

事件

事件:鼠标事件、键盘事件、系统事件、表单事件、自定义事件

如何添加事件

函数

函数可以理解为命令,做一些事情,如:

function abc() { //肯定不会主动执行!
...
}

  1. 直接调用:abc();
  2. 事件调用:元素.事件 = 函数名 (oDiv.onclick = abc;)
  3. ……

function(){} 匿名函数

元素.事件 = function(){}

测试

变量

JS的属性操作

HTML属性操作

字符串连接:加号

属性读写操作的注意事项

关于兼容:

[]中括号的使用

条件判断

数组

for应用

for循环的使用场景:

for循环的执行顺序:1→234→234……

  1. var i = 0;
  2. i < 3; 关键步骤
  3. 括号里面的所有代码
  4. i++

注意下面这样一个循环:

  1. for (var i=0; i<aLi.length; i++) {
  2. aLi[i].onclick = function(){
  3. alert(i);
  4. }
  5. }

以上代码会弹出一个3,而不是一次0、1、2;这里注意,如果在for循环里面包了一个函数,函数里面用了i,那么由于作用域的关系,i不会像你想象的那样逐次增加。

cssText文本格式化与属性操作

按钮点击之后,不再重复功能的思路

  1. 找按钮的麻烦,比如点击一次之后,设置oBtn.disabled = true;
  2. 继续找按钮的麻烦,比如点击一次后,将按钮隐藏oBtn.style.display = 'none';
  3. 将按钮添加的东西清空,然后再添加一次,先清空再生成
  4. 用判断

this指向及this应用

window是js中的”老大“

  1. function fn1(){
  2. alert(this);
  3. }
  4. fn1();

上述代码中执行函数fn1()相当于window.fn1();因此,在函数体内弹出这个this仍然是window。

  1. function fn1(){
  2. alert(this);
  3. }
  4. oBtn.onclick = fn1;

上述用按钮的点击事件调用的fn1函数,最终弹出来的是这个按钮,而不是window。

  1. function fn1(){
  2. alert(this);
  3. }
  4. oBtn.onclick = function(){
  5. alert(this)
  6. }

上述代码,点击按钮弹出的this仍然是oBtn这个按钮。

  1. function fn1(){
  2. alert(this);
  3. }
  4. oBtn.onclick = function(){
  5. fn1();
  6. }

上述代码,点击oBtn按钮,弹出的就不再是oBtn这个对象,而是window。

  1. <input id="btn2" type="button" value="按钮2" onclick="alert(this)" />

上述代码是行间事件,弹出的this就是这个按钮btn2。

  1. function fn1(){
  2. alert(this);
  3. }
  4. <input id="btn2" type="button" onclick="fn1();" value="按钮2” />

上述代码中,弹出的this就是window。

  1. function fn1(){
  2. this
  3. }
  4. fn1(); this => window
  5. oDiv.onclick = fn1; this => oDiv
  6. oDiv.onclick = function(){
  7. this => oDiv
  8. };
  9. oDiv.onclick = function(){
  10. fn1(); fn1()里面的this => window
  11. }
  12. <div onclick=" this "></div> this => div
  13. <div onclick = " fn1(); "></div> fn1()里面的this => window
  1. <script>
  2. fn1(this);
  3. function fn1(obj){
  4. obj => window
  5. }
  6. oDiv.onclick = function(){
  7. this
  8. fn1(this);
  9. };
  10. function fn1(obj){ obj => oDiv }
  11. </script>
  1. <input type="button" value="按钮1" />
  2. <input type="button" value="按钮2" />
  3. <input type="button" value="按钮3" />
  4. window.onload = function(){
  5. var aBtn = document.getElementsByTagName('input');
  6. for(var i=0; i<aBtn.length; i++) {
  7. aBtn[i].onclick = function(){
  8. this.style.background = 'yellow';
  9. }
  10. }
  11. }

上述代码的作用与下面这段代码的作用等价,注意that的使用方法。

  1. <input type="button" value="按钮1" />
  2. <input type="button" value="按钮2" />
  3. <input type="button" value="按钮3" />
  4. window.onload = function(){
  5. var aBtn = document.getElementsByTagName('input');
  6. var that = null;
  7. for(var i=0; i<aBtn.length; i++) {
  8. aBtn[i].onclick = function(){
  9. that = this;
  10. fn1();
  11. };
  12. }
  13. function fn1(){
  14. //this => window
  15. that.style.background = 'yellow';
  16. }
  17. }

上述代码还等价于下面这段代码:

  1. <input type="button" value="按钮1" />
  2. <input type="button" value="按钮2" />
  3. <input type="button" value="按钮3" />
  4. window.onload = function(){
  5. var aBtn = document.getElementsByTagName('input');
  6. for(var i=0; i<a.aBtn.length; i++) {
  7. aBtn[i].onclick = fn1; //注意不要在fn1后面加括号
  8. }
  9. function fn1(){
  10. this.style.background = 'yellow';
  11. }
  12. }

自定义属性、索引值

自定义属性的读写操作

  1. winddow.onload = function(){
  2. var aBtn = document.getElementsByTagName('input');
  3. aBtn[0].abc = 123; //自定义属性
  4. // alert(aBtn[0].abc); 自定义属性的读
  5. // aBtn[0].abc = 456; 自定义属性的写
  6. }

JS可以为任何HTML元素添加任意个自定义属性

自定义属性应用

用自定义属性可以元素添加开关属性,作为控制开关。如下面这个例子:

  1. window.onload = function(){
  2. var aLi = document.getElementsByTagName('li');
  3. // var onOff = true; 一个onOff只能控制一个开关。要为多个元素设置各自的开关,就要给每个元素加个onOff开关。
  4. for(var i=0; i<aLi.length; i++) {
  5. aLi[i].onOff = true;
  6. aLi[i].onclick = function(){
  7. if (this.onOff){
  8. this.style.background = 'url(img/active.png)';
  9. this.onOff = false;
  10. } else {
  11. this.style.background = 'url(img/normal.png)';
  12. this.onOff = true;
  13. }
  14. }
  15. }
  16. }

获取自身递增数字及匹配数组内容

在网页上设置三个按钮,默认值为0,每点击一次按钮,字母依次ABCD轮换。

  1. <input type="button" value="0" />
  2. <input type="button" value="0" />
  3. <input type="button" value="0" />
  1. var aBtn = document.getElementsByTagName('input');
  2. var arr = ['A', 'B', 'C', 'D'];
  3. for(var i=0; i<aBtn.length; i++){
  4. aBtn[i].num = 0;
  5. aBtn[i].onclick = function(){
  6. this.value = arr[this.num]
  7. this.num++;
  8. if(this.num === arr.length){
  9. this.num = 0;
  10. };
  11. };
  12. };

添加索引值、匹配数组、HTML元素

把三个按钮的value与数组里面的值依次进行匹配。

  1. <input type="button" value="btn1" />
  2. <input type="button" value="btn2" />
  3. <input type="button" value="btn3" />
  1. window.onload = function(){
  2. var aBtn = document.getElementsByTagName('input');
  3. var arr = ['莫涛','张森','杜鹏'];
  4. for(var i=0; i<aBtn.length; i++){
  5. aBtn[i].index = i; //自定义属性index,添加索引值
  6. aBtn[i].onclick = function(){
  7. //alert(i); //不会弹出1、2,直接弹出3,也就是aBtn的长度。也就是说,在基础阶段,在for循环所包的函数里面再用i是不靠谱的。
  8. this.value = arr[this.index];
  9. };
  10. };
  11. }

上面是通过索引值匹配数组值,匹配HTML中的元素也是同理。

想建立”匹配“、”对应“关系,就用索引值。

数据类型、类型转换

ECMAScript:标准、核心

数据类型

typeof用来判断数据类型。

字符串方法charAt():通过字符串的下标获取子字符串。

对象可以添加自定义属性。如果把函数扔给了对象,就给该对象添加了一个方法。

JS数据类型转换

把字符串转成数字的方法:

JS方法:Number();

  1. var a = '100';
  2. alert(a + 100); //'100100'
  3. var b = '00100';
  4. alert(Number(b)); //100
  5. var c = '+100';
  6. alert(Number(c)); //100
  7. var d = '';
  8. alert(Number(d)); //0
  9. var e = ' ';
  10. alert(Number(e)); //0
  11. var f = true;
  12. alert(Number(f)); //1
  13. var g = false;
  14. alert(Number(g)); //0
  15. var i = [];
  16. alert(Number(i)); //0 空数组用Number转出来是0
  17. var j = [''];
  18. alert(Number(j)); //0
  19. var k = [123];
  20. alert(Number(k)); //123
  21. var l = ['123'];
  22. alert(Number(l)); //123
  23. var o = null;
  24. alert(Number(o)); //0
  25. ----------------------------
  26. var m = [1,2,3];
  27. alert(Number(m)); //NaN
  28. var json = {abc:123};
  29. alert(Number(json)); //NaN
  30. var json2 = {};
  31. alert(Number(json2)); //NaN 即使是空json,Number方法也转不了
  32. var h = function(){};
  33. alert(Number(h)); //NaN
  34. var p;
  35. alert(Number(p)); //undefined
  36. var q = '100px';
  37. alert(Number(q)); // NaN

parseInt与parseFloat

  1. var a = '100px';
  2. alert(parseInt(a)); //100
  3. var b = '100px123456789';
  4. alert(parseInt(b)); //100
  5. var d = '-100px';
  6. alert(parseInt(d)); //-100 parseInt还是认加减号的
  7. var e = ' 100px';
  8. alert(parseInt(e)); //100 parseInt也是认空格的
  9. var f = '000000100px';
  10. alert(parseInt(f)); //100
  11. var g = '12.34元';
  12. alert(parseInt(g)); //12 parseInt只能转出整数
  13. ------------------------------
  14. var c = true;
  15. alert(parseInt(c)); //NaN
  16. //parseInt也不能用于转函数等

parseInt()方法还有一个参数,就是按照几进制来转,比如parseInt(a, 10);表示按照十进制来转;parseInt(b, 2);表示按照二进制来转。

  1. var a = '12.34元';
  2. alert(parseFloat(a)); //12.34
  3. var b = '12.3.4元';
  4. alert(parseFloat(b)); //12.3 parseFloat只认第一个小数点

parseInt和parseFloat的配合使用,可以来判断某个值是整数还是小数,如下:

  1. var num = '200.345';
  2. if(parseInt(num) == parseFloat(num)) {
  3. alert(num + '是整数');
  4. } else {
  5. alert(num + '是小数');
  6. }

JS中稀奇古怪的隐式类型转换

显式类型转换(强制类型转换):

隐式类型转换:

  1. alert('200' - 3); //197
  2. alert(200 + '3'); //2003
  3. var a = '10';
  4. a++;
  5. alert(a); //11
  6. alert('10'>9); //true
  7. alert('1000000'>'9'); //false
  8. //注意:数字的比较和字符串的比较不同;字符串的比较是一位一位的比较。
  9. alert(!'ok'); //false
  10. alert(!100); //false
  11. alert('2' == 2); //true
  12. alert('2' === 2); //false 三个等号不仅判断值,还会先判断两者的类型

隐式类型转换转不出来,也会返回一个NaN,例如:alert('......' - 9);就会弹出NaN。

isNaN应用实例

NaN: (not a number)。Nan是个不是数字的数字类型。所有的数字都是数字类型,但不是所有的数字类型都是数字。

  1. var a = Number('abc');
  2. //alert(a); //NaN
  3. //alert(typeof(a)); //number
  4. if(a) { //会弹出‘假’,说明NaN是false
  5. alert('真');
  6. } else {
  7. alert('假');
  8. }
  9. //alert(a === a); //false NaN比较,比出false

**isNaN:**is not a Number 是不是不是个数字(不是数字)。

isNaN();是个方法,用来干活的。

isNaN的判断过程,将括号里面的东西扔给Number,Number转出来数字,就返回false;转不出来就返回true。

  1. alert(isNaN('250'));
  2. //Number() '250' => 250 => false
  3. alert(isNaN(true));
  4. //Number() true => 1 => false
  5. alert(isNaN([]));
  6. //Number() [] => 0 => false

下面是一个isNaN的小应用:

  1. <input type="text" />
  2. <input type="button" value="判断输入值是不是数字" />
  1. window.onload = function(){
  2. var aInp = document.getElementsByTagName('input');
  3. var str = '';
  4. aInp[1].onclick = function(){
  5. str = aInp[0].value
  6. //alert(type of str); //总是返回string 从HTML中拿到的内容,类型都是字符串
  7. if(isNaN(str)){
  8. alert(str + '不是数字');
  9. } else {
  10. alert(str + '是数字');
  11. }
  12. }
  13. }

函数传参

参数 = JS的数据类型:

参数类型判断

  1. fn1(100);
  2. fn1('miaov');
  3. fn1(function(){alert(1);});
  4. function fn1(a){
  5. if(typeof a === 'number' && a === a) {
  6. alert(a+20);
  7. } else if (typeof a === 'string'){
  8. alert(a.charAt(2));
  9. } else if (typeof a === 'function'){
  10. a();
  11. }
  12. }

重用代码步骤

  1. 尽量保证HTML代码结构一致,可以通过父级选取子元素
  2. 把核心的主程序实现,用函数包起来
  3. 把每组里不同的值找出来,通过传参实现

JS作用域

什么是作用域

浏览器的“JS解析器”

“JS解析器”:浏览器中专门用来读JS的程序。它至少做下面两件事(当然还有其他事情):

  1. 准备工作(“找一些东西”):根据var、function、参数找东西 —— JS的预解析

    a = 未定义
    所有的变量,在正式运行代码之前,都提前赋了一个值:未定义
    fn1 = function fn1(){alert(2);}
    所有的函数,在正式运行代码之前,都是整个函数块

    遇到重名的,只留一个

  2. 逐行解读代码
    每读一行,就会回到预解析的库里面去看一眼。
    碰上表达式(带有 = + - * / % ++ -- ! 参数……都是表达式)能够改变值的是表达式。碰上表达式,就到库里面去修改值。
  1. alert(a); //未定义
  2. var a=1; //在库里面a的值由未定义换成1
  3. function fn1(){alert(2);}
  1. alert(a); //弹出:function a(){alert(4);}
  2. var a=1; //预解析中的a改为了1
  3. alert(a); //弹出1
  4. function a(){alert(2);}//函数声明,没有改变a的值。什么也没发生。
  5. alert(a); //继续弹出1,因为a在预处理库里面的值没有被改过。
  6. var a=3; //预处理中a的值变为3
  7. alert(a); //弹出3
  8. function a(){alert(4);} //函数声明,什么也没有发生
  9. alert(a); //继续弹出3
  10. a(); //报错 a is not a function

以上代码在预解析中的过程如下:

1)预解析: var function 参数 ……
读到 var a = 1 => a 未定义
读到 function a(){alert(2);} => a = functiona(){alert(2);}
变量与函数重名了,就只留下函数:
a = function(){alert(2);}
读到 var a = 3 => a 未定义,这里与上面名为a的函数重名了,所以还是保留a = function(){alert(2);}
读到function a(){alert(4);} => a = function a(){alert(4);} 与前面的 a = function(){alert(2);}重名,根据上下文,后面的函数覆盖了前面的函数,所以预解析就只留下了 a = function(){alert(4);}
2)逐行解读代码
读到表达式,表达式可以修改预解析的值。参数也可以改变预解析的值。
遇到函数调用,又要做两件事:预解析、逐行解析代码
函数声明,不是表达式,不改变预解析里面的值。

作用域

作用域链:从子级作用域跳到父级作用域的过程

  1. <script>
  2. alert(a); //报错:a is not defined。因为在预解析里面压根就没有a这个东西
  3. </script>
  4. ...
  5. <script>
  6. var a = 1;
  7. </script>
  1. <script>
  2. alert(a); //不报错,会弹出undefined。因为预解析里面有a这个东西,但是由于执行的时候,还没有改变a的值,因此a的值为undefined
  3. var a = 1;
  4. </script>
  5. ...
  6. <script>
  7. </script>
  1. <script>
  2. var a = 1; //预解析里面存了a,并且a的值存为1
  3. </script>
  4. ...
  5. <script>
  6. alert(a); //弹出1
  7. </script>
  1. var a = 1; //预处理中的全局变量a的值改为1
  2. function fn1(){
  3. alert(a);
  4. var a = 2;
  5. } //函数声明,什么也不做
  6. fn1(); //遇到函数调用,开始进行预解析和逐行解读代码。在函数内,先预解析出一个局部的 a 是未定义(局部的a与全局的a一点关系都没有);然后读代码,alert(a)弹出的是undefined;然后继续执行,遇到表达式,将局部的变量a的值改为2。这时fn1的函数执行已经完成了。
  7. alert(a); //弹出全局变量a为1

以上代码在js解析器中的模拟如下:

1)预解析 var function 参数……
a = ...
fn1 = function fn1(){
alert(a);
var a=2;
}
2) 逐行解析代码

另外一段代码:

  1. var a = 1; //预处理中的全局变量a的值改为1
  2. function fn1(){
  3. alert(a);
  4. a = 2;
  5. } //函数声明,什么也不做
  6. fn1(); //遇到函数调用,开始进行预解析和逐行解读代码。在函数内,没有任何函数和变量声明,因此预解析里面没东西;然后读代码,alert(a),在局部没有找到预解析的a,于是从子级作用域跳到父级作用域去找,找到了全局的a,所以弹出的是全局变量a的值1;然后继续执行,遇到表达式,将全局变量a的值改为2。这时fn1的函数执行已经完成了。
  7. alert(a); //弹出全局变量a为2
  1. var a = 1; //预处理中的全局变量a的值改为1
  2. function fn1(a){ //参数本质上就是一个局部变量
  3. alert(a);
  4. a = 2;
  5. } //函数声明,什么也不做
  6. fn1(); //遇到函数调用,开始进行预解析和逐行解读代码。在函数内,找到参数a,因此预处理里面有个局部的a是未定义。;然后读代码,alert(a),弹出的是局部的a为undefined;然后继续执行,遇到表达式,将局部变量a的值改为2。这时fn1的函数执行已经完成了。
  7. alert(a); //弹出全局变量a为1
  1. var a = 1; //预处理中的全局变量a的值改为1
  2. function fn1(a){ //参数本质上就是一个局部变量
  3. alert(a);
  4. a = 2;
  5. } //函数声明,什么也不做
  6. fn1(a); //遇到函数调用,开始进行预解析和逐行解读代码。在函数内,找到局部参数a,因此预处理里面有个局部的a是未定义。;然后读代码,读到第一行function fn1(a),这时有参数进来,把全局的a的值1赋给了局部变量a,这时局部变量a的值变为1,alert(a),弹出的是局部的a为1;然后继续执行,遇到表达式,将局部变量a的值改为2。这时fn1的函数执行已经完成了。
  7. alert(a); //弹出全局变量a为1

想要获取函数内的值

  1. var str = '';
  2. function fn1(){
  3. var a = '大鸡腿~';
  4. str = a;
  5. }
  6. fn1();
  1. function fn2(){
  2. var a = '99999999克拉钻石';
  3. fn3(a);
  4. }
  5. fn2();
  6. function fn3(a){ //注意这个a是fn3里面的,与fn2里面的a毫无关系
  7. alert(a);
  8. }

注意事项

函数的大括号是作用域;if(){}不是作用域;for(){}也不是作用域。只有作用域是先预解析、再执行。if和for的大括号没有预解析过程。

  1. alert(a); //弹出undefined。这说明if大括号中的a已经在全局就被预解析了,因此if的大括号并不是作用域
  2. if(true){
  3. var a=1;
  4. }

但是,需要注意:

  1. alert(fn1); //在火狐浏览器里面会报错说fn1 is not defined。但是在chrome浏览器里可以正常弹出fun1函数。
  2. if(true){
  3. var a = 1;
  4. function fn1(){
  5. alert(123);
  6. }
  7. }

只有火狐浏览器预解析时,不能对if或for的括号里括起来的函数进行预解析。因此存在兼容性问题。因此,如果想要定义全局函数或全局变量,尽量不要放到if和for的大括号里面,放到大括号外面。

  1. for(var i=0; i<aBtn.length; i++){
  2. aBtn[i].onclick = function(){
  3. alert(i); //弹出3。因为必须for循环全部执行完成之后,aBtn才能够点击。但是for循环执行完了,外面的i已经变成3;但是在function里面又没有i,自然找到了外面的i,也就是3.
  4. }
  5. }
  1. for(var i=0; i<aBtn.length; i++){
  2. aBtn[i].onclick = function(){
  3. alert(i); //这时候弹出的就不是3了,是undefined
  4. for(var i=0; i<aBtn.legnth; i++){
  5. aBtn[i].style.background = 'yellow';
  6. }
  7. }
  8. }
  1. for(var i=0; i<aBtn.length; i++){
  2. aBtn[i].onclick = function(){
  3. alert(i); //下面for循环的括号中的var删去了,function里面又找不到i了,所以到父级找到了i,又是个3。因此,此处会弹出3。
  4. for (i = 0; i<aBtn.length; i++){
  5. aBtn[i].style.background = 'yellow';
  6. }
  7. }
  8. }

运算符

算术:

赋值

关系

逻辑

运算优先级

程序流程控制

判断

循环

跳出、跳过

什么是真,什么是假

函数返回值-return详解及应用

  1. alert fn1();
  2. function fn1(){
  3. return function(){
  4. alert(1);
  5. }
  6. }

此时弹出的是:function(){alert(1);}

  1. alert fn1()();
  2. function fn1(){
  3. return function(){
  4. alert(1);
  5. }
  6. }

此时弹出的是1,也就是return的匿名函数执行的结果。

  1. alert fn1()(10);
  2. function fn1(){
  3. return function(a){
  4. alert(a);
  5. }
  6. }

此时弹出的是10。

  1. alert fn1(20)(10);
  2. function fn1(a){
  3. return function(b){
  4. alert(a + b);
  5. }
  6. }

此时弹出的是30。

arguments

fn1(1, 2, 3); //实参——实际传递的参数

function fn1(a, b, c) //形参——形式上,a、b、c这些名代表1、2、3

如果不写形参,1、2、3也能够传进来,都存在arguments的肚子里。

function fn1(){
//arguments => [1, 2, 3] —— 实参的集合(不是数组,但是类似数组,有length,也可以用下标找到其中的数据)
}

当函数参数个数无法确定的时候,用arguments:

  1. alert(sum(1,2,3));
  2. function sum(){
  3. var n=0;
  4. for(var i=0; i<arguments.length; i++){
  5. n += arguments[i];
  6. }
  7. return n;
  8. }
  1. var a=1;
  2. function fn2(a){ //arguments的某个数值就相当于某个形参
  3. arguments[0]=3;
  4. alert(a); //弹出3
  5. var a=2;
  6. alert(arguments[0]); //弹出2
  7. }
  8. fn2(a);
  9. alert(a); //弹出1

currentStyle与getComputedStyle应用

属性判断法、版本检测法来解决浏览器间的兼容性问题

  1. function getStyle( obj, attr) {
  2. return obj.currentStyle ? obj.currentStyle[attr]:getComputedStyle( obj )[attr];
  3. }

注意事项:

定时器

setInterval

setInterval(函数, 毫秒); 重复执行(发动机)

  1. var i=0;
  2. function fn1(){
  3. document.title = i;
  4. i++;
  5. }
  6. setInterval(fn1, 1000);

事件调用的方法

clearInterval

  1. var timer = setInterval(函数, 毫秒); //重复执行
  2. clearInterval(timer); //清除定时器
  1. var i=0,
  2. timer = null;
  3. function fn1(){
  4. i++;
  5. document.title = i;
  6. if(i===10){
  7. clearInterval(timer);
  8. }
  9. }
  10. timer = setInterval(fn1, 1000);

注意

定时器如果是由事件控制的,比如按钮的onclick控制的,那么一定要遵循一个原则,先关后开。这样可以避免连续点击多次按钮,重复设置定时器。另外,clearInterval()不论里面填的是一个timer,还是null还是未定义,都可以顺利运行。

setTimeout

var timer = setTimeout(函数, 毫秒); 执行一次(炸弹)

clearTimeout(timer);

定时器的小应用(函数封装和回调函数)

doMove的函数封装

  1. <input id="btn1" type="button" value="走" />
  2. <div id="div1"></div>
  1. var oBtn1 = document.getElementById('btn1');
  2. var oDiv = document.getElementById('div1');
  3. oBtn1.onclick = function () {
  4. doMove ( oDiv, 'left', 12, 900, function () {
  5. doMove ( oDiv, 'top', 34, 500 );
  6. });
  7. };
  8. //doMove函数封装
  9. function doMove ( obj, attr, dir, target, endFn ) {
  10. dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;
  11. clearInterval( obj.timer );
  12. obj.timer = setInterval(function () {
  13. var speed = parseInt(getStyle( obj, attr )) + dir; // 步长
  14. if ( speed > target && dir > 0 || speed < target && dir < 0 ) {
  15. speed = target;
  16. }
  17. obj.style[attr] = speed + 'px';
  18. if ( speed == target ) {
  19. clearInterval( obj.timer );
  20. /*
  21. if ( endFn ) {
  22. endFn();
  23. }
  24. */
  25. endFn && endFn();
  26. }
  27. }, 30);
  28. }
  29. function getStyle ( obj, attr ) {
  30. return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr];
  31. }

抖动的函数封装

  1. <img id="img1" src="img/4.jpg" />
  2. <img id="img2" src="img/5.jpg" />
  1. window.onload = function () {
  2. var oImg1 = document.getElementById('img1');
  3. var oImg2 = document.getElementById('img2');
  4. oImg1.onclick = fnShake;
  5. oImg2.onclick = fnShake;
  6. function fnShake() {
  7. var _this = this;
  8. shake( _this, 'left', function(){
  9. shake( _this, 'top' );
  10. });
  11. }
  12. };
  13. function shake ( obj, attr, endFn ) {
  14. var pos = parseInt( getStyle(obj, attr) ); //有隐患 需要解决
  15. var arr = []; // 20, -20, 18, -18 ..... 0
  16. var num = 0;
  17. var timer = null;
  18. for ( var i=20; i>0; i-=2 ) {
  19. arr.push( i, -i );
  20. }
  21. arr.push(0);
  22. clearInterval( obj.shake );
  23. obj.shake = setInterval(function (){
  24. obj.style[attr] = pos + arr[num] + 'px';
  25. num++;
  26. if ( num === arr.length ) {
  27. clearInterval( obj.shake );
  28. endFn && endFn();
  29. }
  30. }, 50);
  31. }

系统时间对象

new Date(); //当前 系统的时间 对象

  1. var myTime = new Date(); //myTime的类型是object
  2. var iYear = myTime.getFullYear(); //获得年份

相关方法(以下得到的均为数字类型):

注意事项:

Date对象参数

  1. var iNow = new Date();
  2. var iNew = new Date(2014, 10, 26, 21, 56, 0);
  3. var t = Math.floor((iNew - iNow)/1000);
  4. var str = Math.floor(t/86400) + '天' + Math.floor(t%86400/3600) + '时' + Math.floor(t%86400%3600/60) + '分' + t%60 + '秒';
  1. var iNow = new Date();
  2. var iNew = new Date('November 10, 2013 21:56:0');
  3. var t = Math.floor((iNew - iNow)/1000);
  4. var str = Math.floor(t/86400) + '天' + Math.floor(t%86400/3600) + '时' + Math.floor(t%86400%3600/60) + '分' + t%60 + '秒';

时间戳

getTime(); 返回从1970年1月1日0点0分0秒0毫秒到现在的毫秒数

字符串操作

字符串获取类、封装检测数字的方法

  1. alert(detectNum(' 1a23d456'));
  2. function detectNum(str){
  3. var n = 0;
  4. for(var i=0; i<str.length; i++){
  5. n = str.charAt(i);
  6. if( n < 48 || n > 57 ) {
  7. return false;
  8. }
  9. }
  10. return true;
  11. }

indexOf、lastIndexOf

  1. var str = '妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法!'
  2. var s = '妙味';
  3. var i = 0;
  4. for ( ; str.indexOf(s, i) != -1; ){
  5. alert(str.indexOf(s, i));
  6. i = str.indexOf(s, i) + s.length;
  7. }
  8. while(str.indexOf(s, i) != -1) {
  9. alert(str.indexOf(s, i));
  10. i = str.indexOf(s, i) + s.length;
  11. }

比较类、截取类

大小写转换、split分割字符串

字符串操作总结

  1. var str = '妙味课堂-WWW.miaov.com';
  2. str.charAt(1); //味
  3. str.charCodeAt(1); //21619
  4. String.fromCharCode(22937, 21619); //妙味
  5. str.indexOf('m', 3); //9
  6. str.lastIndexOf('o'); //16
  7. '1000' < '2' //true
  8. '1000' > 2 //true
  9. str.substring(0, 4); //妙味课堂
  10. str.slice(-3); //'com'
  11. str.toUpperCase(); //'妙味课堂-WWW.MIAOV.COM'
  12. str.toLowerCase(); //'妙味课堂-www.miaov.com'
  13. str.split('.', 2); //['秒微课堂-www', 'miaov']
  14. var arr = ['www', 'miaov', 'com'];
  15. arr.join('.'); //'www.miaov.com'

数组的操作

json数据格式及语法

  1. var json = { name: 'leo', age: 32};
  2. alert(json.name);
  3. var imgData = {
  4. url: ['img/1.png', 'img/2.png'],
  5. text: ['图片一', '图片二']
  6. };
  7. alert(imgData.url[1]);
  8. var json2 = { 'name': 'miaov' }; //推荐的安全格式的写法
  9. alert(json2.name);
  10. alert(json2['name']);
  11. json2.name = 'abc';
  12. json2['name'] = '妙味'; //注意中括号里面要用引号
  13. var arr = [{'name': 'TM', 'age': 23}, {'name': 'leo', 'age': 32}];
  14. alert(arr[0].name);

for-in循环,遍历json

  1. var json4 = { 'name': 'miaov', 'age': 3, 'fun': '前端开发'};
  2. for(var attr in json4){
  3. alert(attr);
  4. alert(json4[attr]);
  5. }
  6. var json5 = {
  7. url: ['img/1.png', 'img/2.png'],
  8. text: ['图片一', '图片二']
  9. };
  10. for(var attr in json5) {
  11. for(var i=0; i<json5[attr].length; i++){
  12. alert(json5[attr][i]);
  13. }
  14. }

for-in也可以遍历对象属性:

  1. var str = '';
  2. var num = 0;
  3. for(var attr in window){
  4. str += num + '. ' + attr + ' : ' + window[attr] + '<br/>';
  5. num ++;
  6. }
  7. document.body.innerHTML = str;

数组也可以用for-in来遍历:

  1. var arr = ['a', 'b', 'c'];
  2. for(var i in arr){
  3. alert(arr[i]);
  4. }

清空数组和清空数组效率问题

  1. // var arr = [1, 2, 3];
  2. // var arr = new Array(1, 2, 3);
  3. var arr = new Array(4);
  4. alert(arr.length); // 4 在new Array()里面写了一个数字,就是定义了arr的长度
  1. var arr = [1, 2, 3];
  2. arr.length = 1; //数组的length属性是可写的
  3. alert(arr);
  1. var arr = [1, 2, 3];
  2. arr.length = 0; //快速清空数组arr
  3. arr = []; //通过重新赋值来清空数组,效率更高
  1. var str = 'aaaaa';
  2. str.length = 1;
  3. alert(str); // 'aaaaa'
  4. //字符串的length属性不可写,但是数组的length属性可写

数组的操作

添加

删除

小技巧

  1. var arr = ['TM', '钟毅', '张森', '杜鹏', 'Leo'];
  2. arr.unshift(arr.pop()); //数组变为:['Leo', '钟毅', '张森', '杜鹏', 'TM']
  3. arr.push(arr.shift()); //数组变为:['钟毅', '张森', '杜鹏', 'Leo', 'TM']

splice方法

  1. var arr = ['TM', '钟毅', '张森', '杜鹏', 'Leo'];
  2. //删除
  3. //arr.splice(0, 1); //删掉第0位,删1个。两个参数第一个是从第几位开始,第二个是删掉几个。splice删除的时候有返回值,返回的是被删除的内容
  4. //替换
  5. //arr.splice(0, 1, '莫涛'); //替换第0位,替换1个,替换为'莫涛'。返回的还是删除的东西
  6. //添加
  7. arr.splice(1, 0, '李贤'); //在第1位那里,删除0个,添加了一个'李贤'到了第1位,'钟毅'就变成了arr[2]了。后面也可以添加多个。如果splice删除了0个,那么就没有返回值。

数组去重

  1. var arr = [1, 2, 2, 4, 2];
  2. for ( var i=0; i<arr.length; i++ ) {
  3. for ( var j = i+1; j<arr.length; j++) {
  4. if( arr[i]==arr[j] ){
  5. arr.splice( j, 1 );
  6. j--;
  7. }
  8. }
  9. }

sort排序

  1. var arr = ['c', 'd', 'a', 'e'];
  2. arr.sort(); // 'a', 'c', 'd', 'e' 按照unicode编码排序
  3. var arr2 = [4, 3, 5, 76, 2, 0, 8];
  4. // arr2.sort(); // 0, 2, 3, 4, 5, 76, 8 sort默认是将数组中的每一个按照字符串来排序的,因此出现了76排在8前面的情况
  5. // arr2. sort(function( a, b ){
  6. return a - b; //如果a-b返回正数,就a、b两个数字换个序。如果a-b是负数,就不换序
  7. }) //返回数字从小到大 0, 2, 3, 4, 5, 8, 76
  8. // arr2. sort(function( a, b ){
  9. return b - a;
  10. }) //返回数字从大到小 76,, 8, 5, 4, 3, 2, 0

其他排序方法:

  1. var arrWidth = ['345px', '23px', '10px', '1000px'];
  2. arrWidth.sort(function(a, b){
  3. return parseInt(a) - parseInt(b);
  4. }); // ['10px', '23px', '345px', '1000px']

随机排序

  1. var arr = [1, 2, 3, 4, 5, 6, 7, 8];
  2. arr.sort(function(a, b){
  3. return Math.random() - 0.5;
  4. });

随机数以及随机公式推理过程

Math.random(); 返回0~1之间随机的一个数

如果想要随机返回0和1之间的一个整数,可以用四舍五入的方法:

Math.round(Math.random()); //注意,这里不能用Math.floor

如果想要返回0~10之间的一个随机数:

Math.round(Math.random() * 10); //返回0~10之间的随机整数

返回从20~100之间的一个随机数:

Math.round( Math.random()*80 + 20 ); //返回5~10之间的随机整数

如果想要返回一个x到y之间的整数,可以写成:

Math.round( Math.random() * (y - x) + x );

返回0~x的整数,可以写成

Math.round( Math.random() * x );

返回1~x的整数,可以写成

Math.ceil( Math.random() * x ); //Math.ceil()是向上取整

concat方法

concat方法用于连接数组。

  1. var arr1 = [1, 2, 3];
  2. var arr2 = [4, 5, 6];
  3. var arr3 = [7, 8, 9];
  4. arr1.concat(arr2); //[1, 2, 3, 4, 5, 6] 新数组与原来数组没什么关系。
  5. arr1.concat(arr2, arr3); //[1, 2, 3, 4, 5, 6, 7, 8, 9]

reverse方法

reverse方法是颠倒数组中的位置,会改变原数组

  1. var arr1 = [1, 2, 3];
  2. arr1.reverse();
  3. alert(arr1); // [3, 2, 1]
  1. var str = 'abcdef';
  2. alert(str.split('').reverse().join('')); //'fedcba'
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注