自学前端js基础（下）

js12

• concat()

  • 可以连接两个或多个数组，并将新的数组返回

    • 该方法不会对原数组产生影响

    • var result = arr.concat(arr2, arr3, "牛魔王", "铁扇公主");
      

• join()

  • 该方法可以将一个数组转换为一个字符串

  • 该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回

  • 在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符

    • 如果不指定连接符，则默认使用 , 作为连接符

    • arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧"];
      result = arr.join("@-@");
      //孙悟空@-@猪八戒@-@沙和尚@-@唐僧
      

• reverse()

  • 该方法用来反转数组（前边的去后边，后边的去前边）

  • 该方法会直接修改原数组

  • arr.reverse();
    

• sort()

  • 用来对数组中的元素进行排序

  • 也会影响原数组，默认会按照Unicode编码进行排序

  • 及时对于纯数字的数组，使用sort()排序时，也会按照Unicode编码来排序

    所以对数字进行排序，可能会得到错误的结果
    

  • 我们可以自己来指定排序的规则

    • 我们可以在 sort() 中添加一个回调函数，来指定排序规则

      • 回调函数中需要定义两个形参
      • 浏览器将会分别使用数组中的元素作为实参去调用回调函数
      • 使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边

    • 浏览器会根据回调函数的返回值来决定元素的顺序

      • 如果返回一个大于0的值，则元素会交换位置
      • 如果返回一个小于0的值，则元素位置不变
      • 如果返回一个0，则认为两个元素相等，也不交换位置

    • 如果需要升序排列，则返回a-b

      • 如果需要降序排列，则返回b-a

    • arr.sort(function (a, b) {
          //升序排列
          //return a - b;
          //降序排列
          return b - a;
      });
      console.log(arr);
      

• call()和apply()

  • 这两个方法都是函数对象的方法，需要通过函数对象来调用

  • 当对函数调用call()和apply()都会调用函数执行

  • 在调用call()和apply()可以将一个对象指定为第一个参数

    • 此时这个对象将会成为函数执行的this

  • call() 方法可以将实参在对象之后依次传递

• apply() 方法需要将实参封装到一个数组中统一传递

• this的情况

  • 以函数形式调用时，this 永远是 window

  • 以方法的形式调用时，this 是调用方法的对象

  • 以构造函数的形式调用时，this 是新创建的那个对象

  • 使用 call 和 apply 调用时，this 是指定的那个对象

    • 		var obj = {
        			name: "obj",
        			sayName: function () {
        				alert(this.name);
        			}
        		};
                fun.call(obj,2,3);
              fun.apply(obj, [2, 3]);
          var obj2 = {
              name: "obj2"
          };
              fun.apply();
              fun.call();
              fun();
              fun.call(obj);
              fun.apply(obj);
              fun();
          obj.sayName.apply(obj2);
      

• argument

  • 在调用函数时，浏览器每次都会传递两个隐含的参数
    • 函数的上下文对象 this
    • 封装实参的对象 arguments
      • arguments 是一个类数组对象，它也可以通过索引来操作数据，也可以获取长度
        • 在调用函数时，我们所传递的实参都会在 arguments 中保存
      • arguments.lengh 可以用来获取实参的长度
        • 我们即使不定义形参，也可以通过arguments来使用实参，
        • 只不过比较麻烦
          • arguments[0]表示第一个实参
          • arguments[1]表示第二个实参...
        • 它里面有一个属性叫做callee
          • 这个属性对应一个函数对象，就是当前正在指向的函数的对象

• Date对象

  • 在JS中使用Date对象表示一个事件

  • 创建一个Date对象

  • 如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间

    • var d = new Date();
      

  • 创建一个指定的时间对象

    • 需要在构造函数传递一个表示时间的字符串作为参数

    • 日期的格式 月份/日/年

    • var d2 = new Date("2/18/2011 11:10:30");
      

  • getDate()

    • 获取当前日期对象是几日

    • var date = d2.getDate();
      

  • getDay()

    • 获取当前日期对象是周几

    • 会返回一个0-6的值

      • 0表示周日

      • 1表示周一

      • var day = d2.getDay();
        

  • getMonth()

    • d2 = new Date("12/18/2011 11:10:30")

    • 获取当前时间对象的月份

    • 会返回一个0-11的值

      • 0表示1月

      • 1表示2月

      • 11 表示12月

      • var month = d2.getMonth();
        

  • getFullYear()

    • 获取当前日期对象的年份

    • var year = d2.getFullYear();
      

  • getTime()

    • 获取当前日期的时间戳

    • 时间戳，指的是从格林威治标准时间的1970年1月1日，0 时0分0秒

      • 到当前日期所花费的毫秒数（1秒 = 1000毫秒）
      • 计算机底层在保存时间时使用都是时间戳

    • 测试代码的执行性能

      • var start = Date.now();
            for (var i = 0; i < 100; i++) {
                console.log(i);
            }
        var end = Date.now();
        console.log("执行了：" + (end - start) + "毫秒");
        

• Math

  • Math和其他对象不同，他不是一个构造函数
    • 它属于一个工具类不用创建对象，它里面封装了数学运算相关的属性和方法
    • 比如：
      • Math.PI

• abs()

  • 可以用来计算一个数的绝对值
  • console.log(Math.abs(-1));

• Math.ceil()

  • 可以对一个数进行向上取整，小数位只有有值就会自动进1

• Math.floor()

  • 可以对一个数进行向下取整，小数部分会被舍掉

• Math.round()

  • 可以对一个数进行四舍五入取整

• Math.random()

  • 可以用来生成一个0-1之间的随机数

  • 可以生成一个0-x的随机数

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

  • 可以生成一个x-y之间的随机数

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

• max()

  • 可以获取多个数中的最大值

• min()

  • 可以获取多个数中的最小值

  • var min = Math.min(10, 45, 30, 100);
    

• Math.pow(x,y)

  • 返回x的y次幂

• Math.sqrt()

  • 用于对一个数进行开方运算

• 基本数据类型

  • String Number Boolean Null Undefined

• 引用数据类型

  • Object

• 在JS中为我们提供了三个包装类，通过这三个包装类可以将基本数据类型的数据转换为对象

  • String()

    • 可以将基本数据类型字符串转换为String对象

  • Number()

    • 可以将基本数据类型的数字转换为Number对象

  • Boolean()

    • 可以将基本数据类型的布尔值转换为Boolean对象

  • 注意：

    • 我们在实际应用中不会使用基本数据类型的对象

      如果使用基本数据类型的对象，在做一些比较时可能会带来一些不可预期的结果

  • //创建一个Number类型的对象
    //num = 3;
    var num = new Number(3);
    var num2 = new Number(3);
    var str = new String("hello");
    var str2 = new String("hello");
    var bool = new Boolean(true);
    var bool2 = true;
    

  • 方法和属性能添加给对象，不能添加给基本数据类型

    • 当我们对一些基本数据类型的值去调用属性和方法时，

      • 浏览器会临时使用包装类将其转换为对象，然后在调用对象的属性和方法
      • 调用完以后，将其转换为基本数据类型

    • var s = 123;
      s = s.toString();
      s.hello = "你好";
      console.log(s.hello);//undefined
      console.log(typeof s);//还是数据类型
      

• 字符串

  • 在底层字符串是以字符数组的形式保存的

    • ["H","e","l"]

  • length属性

    • 可以用来获取字符串的长度

  • charAt()

    • 可以返回字符串中指定位置的字符

    • 根据索引获取指定的字符

    • var result = str.charAt(6);
      

  • charCodeAt()

    • 获取指定位置字符的字符编码（Unicode编码）

    • result = str.charCodeAt(0);
      

  • String.formCharCode()

    • 可以根据字符编码去获取字符

    • result = String.fromCharCode(0x2692);
      

  • concat()

    • 可以用来连接两个或多个字符串

    • 作用和 + 一样

    • result = str.concat("你好","再见");
      

  • indexof()

    • 该方法可以检索一个字符串中是否含有指定内容
    • 如果字符串中含有该内容，则会返回其第一次出现的索引
      • 如果没有找到指定的内容，则返回-1
    • 可以指定一个第二个参数，指定开始查找的位置

  • lastIndexOf()

    • 该方法的用法和indexOf()一样

      • 不同的是indexOf是从前往后找
      • 而lastIndexOf是从后往前找

    • 也可以指定开始查找的位置

    • result = str.indexOf("h",1);
      result = str.lastIndexOf("h",5);
      

  • slice()

    • 可以从字符串中截取指定的内容

    • 不会影响原字符串，而是将截取到的内容返回

      • 参数：

        • 第一个，开始位置的索引（包括开始位置）

        • 第二个，结束位置的索引（不包括结束位置）

          • 如果省略第二个参数，则会截取到后面所有的

        • 也可以传递一个负数作为参数，负数的话将会从后边计算

        • str = "abcdefghijk";
          result = str.slice(1,4);
          result = str.slice(1,-1);
          

  • substring()

    • 可以用来截取一个字符串，和slice()类似

    • 参数：

      • 第一个：开始截取位置的索引（包括开始位置）

      • 第二个：结束位置的索引（不包括结束位置）

      • 不同的是这个方法不能接受负值作为参数

        • 如果传递了一个负值，则默认使用0

      • 而且他还自动调整参数的位置，如果第二个参数小于第一个则自动交换

        • result = str.substring(0,1);
          

  • substr()

    • 用来截取字符串

    • 参数

      • 截取开始位置的索引
      • 截取的长度

    • str = "abcdefg";
      result = str.substr(3,2);
      

  • split()

    • 可以将一个字符串拆分成一个数组

    • 参数

      • 需要一个字符串作为参数，将会根据该字符串去拆分数组

    • str = "abcbcdefghij";
      result = str.split("d");
      result = str.split("");
      

    • 如果传递一个空串作为参数，则会将每个字符都拆分为数组中的一个元素

  • toUpperCase()

    • 将一个字符串转换为大写并返回

    • result = str.toUpperCase();
      

  • toLowerCase()

    • 将一个字符串转换为小写并返回

    • result = str.toLowerCase();
      

  • 正则表达式

    • 正则表达式用于定义一些字符串的规则

      • 计算机可以根据正则表达式，来检查一个字符串是否符合规则
      • 获取将字符串中符合规则的内容提取出来

    • 创建正则表达式的对象

      • 语法

        • var 变量 = new RegExp("正则表达式","匹配模式");

        • 使用typeof检查正则对象，会返回object

        • var reg = new RegExp("a"); 这个正则表达式可以用来检查一个字符串中是否含有a

        • 在构造函数中可以传递一个匹配模式作为第二个参数

          • 可以是：
            • i 忽略大小写
            • g 全局匹配模式

        • var reg = new RegExp("ab","i");
          var str = "a";
          

      • 使用字面量的方法来创建正则表达式

        • 语法：var 变量 = /正则表达式/匹配模式

        • 使用字面量的方式创建更加简单

          • 使用构造函数创建更灵活

            • //var reg = new RegExp("a","i");
              var reg = /a/i;
              

    • 正则表达式的方法

      • test()

        • 使用这个方法可以用来检查一个字符串是否符合正则表达式的规则

          • 如果符合则返回 true，否则返回 false

        • var result = reg.test(str);
          console.log(reg.test("Ac"));
          

    • 使用字面量创建正则表达式时的方法

      • | 或的意思

      • reg = /a|b|c/;
            /*
            * 创建一个正则表达式检查一个字符串中是否有指定字母
            */
        	//reg = /a|b|c|d|e|f|g/;
        

      • []里面的内容也是或的关系

        • [ab] == a|b

        • [a-z] 任意小写字母

        • [A-Z] 任意大写字母

        • [A-z] 任意字母

        • [0-9] 任意数字

        • //检查一个字符串中是否含有 abc 或 adc 或 aec
          reg = /a[bde]c/;
          

      • [^] 除了

        • reg = /[^ab]/;
          reg = /[^0-9]/;
          console.log(reg.test("12a3456"));
          

• 字符串和正则相关的方法

  • split()

    • 可以将一个字符串拆分成一个数组

    • 方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串

    • 这个方法即使不指定全局匹配，也会全部拆分

      • 根据任意字母来将字符串拆分

      • var result = str.split(/[A-z]/);
        

  • search()

    • 可以搜索字符串中是否含有指定内容

    • 如果搜索到指定内容，则会返回第一次出现的索引，没有搜索到则返回 -1

    • 它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串

    • search() 只会查找第一个，即使设置全局匹配也没用

    • str = "hello abc hello aec afc";
          /*
         		 * 搜索字符串中是否含有abc 或 aec 或 afc
          */
      result = str.search(/a[bef]c/);
      //6
      

• match()

  • 可以根据正则表达式，从一个字符串中将符合条件的内容提取出来

  • 默认情况下我们的 match 只会找到第一个符合要求的内容，找到以后就停止检索

    • 我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容
    • 可以为一个正则表达式设置多个匹配模式，且顺序无所谓

  • match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果

    • str = "1a2a3a4a5e6f7A8B9C";
      result = str.match(/[a-z]/ig);
      

    //["a", "a", "a", "a", "e", "f", "A", "B", "C"]

  • replace()

    • 可以将字符串中指定内容替换为新的内容

      • 参数
        • 被替换的内容，可以接受一个正则表达式作为参数
      • 新的内容
      • 默认只会替换第一个

    • //result = str.replace(/[a-z]/gi , "@_@");
      

    result = str.replace(/[a-z]/gi, "");

js13

• 量词

  • 通过量词可以设置一个内容出现的次数

    • 量词只对它前边的一个内容起作用

  • {n}正好出现n次

  • {m,n}出现m-n次

  • {m,}m次以上

  • + 至少一个，相当于{1,}

  • * 0个或多个，相当于{0,1}

  • ? 0个或一个，相当于{0,1}

  • var reg = /a{3}/;
    

• 检查一个字符串中是否以a开头

  • ^表示开头

  • $ 表示结尾

  • reg = /^a/; //匹配开头的a
    reg = /a$/; //匹配结尾的a
    

  • 如果在正则表达式中同时使用^ $则要求字符串必须完全符合正则表达式

  • reg = /^a$/;
    

• 创建一个正则表达式用来检查一个字符串是否是一个合法手机号

  • 手机号的规则

  • var phoneStr = "13067890123";
    var phoneReg = /^1[3-9][0-9]{9}$/;
    console.log(phoneReg.test(phoneStr));
    

• 检查一个字符串中是否含有 .

  • . 表示任意字符

  • 在正则表达式中使用\作为转义字符

  • \. 用来表示 .

  • \\ 用来表示 \

  • 注意：使用构造函数时，由于他的参数是一个字符串，而\是字符串中转义字符

    • 如果要使用\ 则需要使用\\来代替

    • var reg = /\./;
      reg = /\\/;
      reg = new RegExp("\\.");
      reg = new RegExp("\\\\");
      

  • * \w
    * 	- 任意字母、数字、_  [A-z0-9_]
    * \W
    * 	- 除了字母、数字、_  [^A-z0-9_]
    * \d
    * 	- 任意的数字 [0-9]
    * \D
    * 	- 除了数字 [^0-9]
    * \s
    * 	- 空格
    * \S
    * 	- 除了空格
    * \b
    * 	- 单词边界
    * \B
    * 	- 除了单词边界
    reg = /\w/;
    reg = /\W/;
    reg = /\d/;
    reg = /\D/;
    reg = /\s/;
    reg = /\S/;
    /*
    * 创建一个正则表达式检查一个字符串中是否含有单词child
    */
    reg = /\bchild\b/;
    //console.log(reg.test("hello child "));
    
    //接收一个用户的输入
    //var str = prompt("请输入你的用户名:");
    
    var str = "              he      llo                ";
    
    //去除掉字符串中的前后的空格
    //去除空格就是使用""来替换空格
    console.log(str);
    
    //str = str.replace(/\s/g , "");
    
    //去除开头的空格
    //str = str.replace(/^\s*/, "");
    //去除结尾的空格
    //str = str.replace(/\s*$/, "");
    // /^\s*|\s*$/g 匹配开头和结尾的空格
    str = str.replace(/^\s*|\s*$/g,"");
    console.log(str);
    

  • 邮件的正则

    • var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
      var email = "abc.hello@163.com";
      console.log(emailReg.test(email));
      

• DOM

  • 浏览器已经为我们提供文档节点 对象 这个对象是window属性

    • 可以页面中直接使用，文档节点代表的是整个网页

      •     //获取到button对象
            var btn = document.getElementById("btn");
            //修改按钮的文字
            btn.innerHTML = "I'm Button";
        

  • 我们可以在事件对应的属性中设置一些js代码

    • 这样当事件被触发时这些代码将会执行

    • 这种写法我们称为结构和行为耦合，不方便维护，不推荐使用

    • <button id="btn" onmousemove="alert('讨厌，你点我干嘛！');">我是一个按钮</button>
      <button id="btn">我是一个按钮</button>
      <script type="text/javascript">
      

  • 事件

    • 就是用户和浏览器之间的交互行为

      • 比如：点击按钮，鼠标移动，关闭窗口

    • 可以为那妞的对应事件绑定处理函数的形式来响应事件

      • 这样当事件被触发时，其对应的函数将会被调用

      • 为单击事件绑定的函数，我们称为单击响应函数

      • btn.onclick = function(){
        	alert("你还点~~~");
        };
        

• 浏览器在加载一个页面时，是按照自上向下的顺序加载的

  • 读取到一行就运行一行，如果将script标签写在页面的上边
  • 在代码执行时，页面还没有加载，页面没有加载DOM对象也没有架子啊
  • 会导致无法获取到DOM对象

• onload事件

  • 会在整个页面加载完成之后才触发

  • 为window绑定一个onload事件

    • 该事件对应的响应函数将会在页面加载之后执行

    • 这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了

    • 			window.onload = function(){
            				//获取id为btn的按钮
            				var btn = document.getElementById("btn");
            				//为按钮绑定一个单击响应函数
            				btn.onclick = function(){
            					alert("hello");
            				};
            			};
      

  • 将js代码编写在页面的下部分就是为了，可以在页面加载完毕以后再执行js代码

• 获取元素

  • innerHTML 通过这个属性可以获取到元素内部的html代码

• 对于自结束标签，这个属性没有意义

• getElementsByTagName() 可以根据标签名来获取一组元素节点对象

  • 这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
  • 即使查询到的元素只有一个，也会封装到数组中返回

• 读取元素节点属性

  • 直接使用 元素.属性名
    • 注意：class属性不能采用这种方式
    • 读取class属性时需要使用 元素.className

• childNodes属性会获取包括文本节点在内的所有节点

  • 根据DOM标签 标签空白也会当成文本节点

  • 注意：在IE8及以下的浏览器中，不会讲空白文本当成子节点

    • 所以该属性在IE8中会返回4个子元素而其他浏览器是9个

      • var cns = city.childNodes;
        

• children属性可以获取当前元素的所有子元素

  • var cns2 = city.children;
    

• firstChild 可以取到当前元素的第一个子节点（包括空白文本节点）

  • var fir = phone.firstChild;
    

• firstElementChild 获取当前元素的第一个子元素

  • 不支持IE8以下的浏览器，如果需要兼容他们尽量不要使用

    • fir = phone.firstElementChild;
      

• innerText

  • 可以获取到元素内部的文本内容

  • 他和innerHTML类似，不同的是它会自动将html去除

    • pn.innerText
      

  • nodeValue 获取bj中的文本节点

    • bj.firstChild.nodeValue
      

  • getElementsByClassName()根据元素的class属性值查询一组元素节点对象

    • 可以根据class属性值获取一组元素节点对象
      • 但是不支持IE8及以下的浏览器

  • document.querySelector()

    • 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
    • 虽然IE8中没有getElementsByClassName()，但是可以使用querySelector()代替
    • 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个

  • document.querySelectorAll()

    • 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
    • 即使符合条件的元素只有一个，它也会返回数组

• 创建元素节点

  • document.createElement()

    • 可以用于创建一个元素节点对象

    • 需要一个标签名作为参数，将会根据该标签名创建元素节点对象

    • 并将创建好的对象作为返回值返回

    • var li = document.createElement("li");
      

  • document.createTextNode()

    • 可以用来创建一个文本节点对象

    • 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回

    • var gzText = document.createTextNode("广州");
      

• 添加子节点

  • appendChild()

    • 向一个父节点中添加一个新的子节点

    • 用法

      • 父节点.appendChild(子节点)

      • li.appendChild(gzText);
        

  • insertBefore()

    • 可以在指定的子节点前插入新的子节点

    • 语法：

      • 父节点.insertBefore(新节点,旧节点);

      • city.insertBefore(li, bj);
        

  • replaceChild()

    • 可以使用指定的子节点替换已有的子节点

    • 语法

      • 父节点.replaceChild(新节点,旧节点)

      • city.replaceChild(li, bj);
        

  • removeChild()

    • 删除一个子节点

    • 语法

      • 父节点.removeChild(子节点)

      • 子节点.parentNode.removeChild(子节点) （自己删自己）

      • bj.parentNode.removeChild(bj);
        

  • innerHTML

    • 使用innerHTML也可以完成DOM的增删改的相关操作

    • 一般我们会两种方式结合使用

    • city.innerHTML += "<li>广州</li>";
      
      //创建一个li
      var li = document.createElement("li");
      //向li中设置文本
      li.innerHTML = "广州";
      //将li添加到city中
      city.appendChild(li);
      

• confirm()

  • 用于弹出一个带有确认和取消按钮的提示框
    • 需要一个字符串作为参数，该字符串将会作为提示文字显示出来
    • 如果用户点击确认则会返回true，如果点击取消则返回false

• 取消浏览器默认行为

  • 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为
  • 但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为

js15

• for循环会在页面加载完成之后立即执行

  • 而响应函数会在超链接被点击时才执行

  • 当相应函数执行时，for循环早已执行完毕

  • window.onload = function(){
    		var allA = document.getElementsByTagName("a");
    		//为每个超链接都绑定一个单击响应函数
    		for(var i=0 ; i < allA.length ; i++){
    			alert("for循环正在执行"+i);
    			allA[i].onclick = function(){
    				alert("响应函数正在执行"+i);
    				return false;
    			};
    		}
    	};
    

• DOM操作

  • 通过JS修改元素的样式

  • 语法：

    • 元素.style.样式名 = 样式值

  • 注意

    • 如果CSS的样式名中含有 -
    • 这种名称在JS中是不合法的，比如background-color
    • 需要将这种样式名修改为驼峰命名法
    • 去掉 - ，然后将 - 后的字母大写

  • 我们通过style属性设置的样式都是内联样式，

    • 而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示

  • 但是如果在样式中写了!important，则此时样式会有最高的优先级

    • 即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效
    • 所以尽量不要为样式添加!important

  • 读取box1的样式

    • 语法：

      • 元素.style.样式名

    • 通过style属性设置和读取的都是内联样式

      • 无法读取样式表中的样式

  • 获取元素的当前显示的样式

    • 语法

      • 元素.currentStyle.样式名

    • 它可以用来读取当前元素正在显示的样式

      • 如果当前元素没有设置该样式，则获取它的默认值

    • currentStyle 只有IE浏览器支持，其他的浏览器都不支持

      • getComputedStyle()

        • 在其他浏览器中可以使用getComputedStyle()这个方法来获取元素当前的样式

        • 这个方法时window的方法，可以直接使用

          • 需要两个参数
            • 第一个：要获取样式的元素
            • 第二个：可以传递一个伪元素，一般都传null

        • 该方法会返回一个对象，对象中封装了当前元素对应的样式

          • 可以通过对象.样式名来读取样式
          • 如果获取的样式没有设置，则会获取到真实的值，而不是默认值
          • 比如：没有设置width，它不会获取到auto，而是一个长度

        • 但是该方法不支持IE8及以下的浏览器

        • 通过currentStyle和getComputerStyle()读取到的样式都是只读的，

          • 不能修改，如果修改必须通过style属性

          • getComputedStyle(box1,null).width
            //IE8的方式
            box1.currentStyle.backgroundColor
            

  • clientWidth clientHeight

    • 这两个属性都可以获取到元素的可见宽度和高度

    • 这些属性都是不带px的，返回的都是一个数字，可以直接进行计算

    • 会获取元素宽度和高度，包括内容区和内边距

    • 这些属性都是只读的不能修改

    • alert(box1.clientWidth);
      alert(box1.clientHeight);
      box1.clientHeight = 300;不能修改
      

  • offsetWidth offsetHeight

    • 获取元素的整个的宽度和高度，包括内容区，内边距和边框

    • box1.offsetWidth
      

  • offsetParent

    • 可以用来获取当前元素的定位父元素

    • 会获取到离当前元素最近的开启了定位的祖先元素

      • 如果所有的祖先元素都没有开启定位，则返回body

      • box1.offsetParent
        

  • offsetLeft offsetTop

    • 当前元素相对于其定位父元素的水平偏移量

    • 当前元素相对于其父元素的垂直偏移量

    • box1.offsetLeft
      

  • scrollLeft scrollTop

    • 获取水平滚动条滚动的距离

    • 获取垂直滚动条滚动的距离

    • box4.scrollTop
      

  • 例子

    • 当满足scrollHeight - scrollTop == clientHeight
      //说明垂直滚动条滚动到底了
      当满足scrollWidth - scrollLeft == clientWidth
      //说明水平滚动条滚动到底了
      
      window.onload = function(){
          /*
      				 * 当垂直滚动条滚动到底时使表单项可用
      				 * onscroll
      				 * 	- 该事件会在元素的滚动条滚动时触发
      				 */
          //获取id为info的p元素
          var info = document.getElementById("info");
          //获取两个表单项
          var inputs = document.getElementsByTagName("input");
          //为info绑定一个滚动条滚动的事件
          info.onscroll = function(){
              //检查垂直滚动条是否滚动到底
              if(info.scrollHeight - info.scrollTop == info.clientHeight){
                  //滚动条滚动到底，使表单项可用
                  /*
      						 * disabled属性可以设置一个元素是否禁用，
      						 * 	如果设置为true，则元素禁用
      						 * 	如果设置为false，则元素可用
      						 */
                  inputs[0].disabled = false;
                  inputs[1].disabled = false;
              }
          };
      };
      

• 事件

  • onmousemove

    • 该事件将会在鼠标在元素中移动时被触发

  • 事件对象

    • 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数

      • 在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标 按键哪个按键被按下，鼠标滚轮滚动的方向。。。

        • 在IE8中，响应函数被触发时，浏览器不会传递事件对象

        • 在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的

          • 解决事件对象的兼容性问题的方法

          • event = event || window.event;
            

    • clientX可以获取鼠标指针的水平坐标

    • clientY可以获取鼠标指针的垂直坐标

      • var x = event.clientX;
        var y = event.clientY;
        

• 获取滚动条滚动的距离

  • chrome认为浏览器的滚动条时body的，可以通过body.scrollTop来获取
  • 火狐等浏览器认为浏览器的滚动条是html的

• 获取到鼠标的坐标

  • clientX和clientY

    • 用于获取鼠标在当前的课件窗口的坐标
    • div的偏移量，是相对于整个页面的

  • pageX 和 pageY

    • 用于获取鼠标相对于当前页面的坐标

    • 但是这个两个属性在IE8中不支持，所以如果需要兼容IE8,则不要使用

    • var left = event.clientX;
      var top = event.clientY;
      

• 事件的冒泡（Bubble）

  • 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发

  • 在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡可以通过事件对象来取消冒泡

  • 取消冒泡

    • 可以将事件对象的cancelBubble设置为true，即可取消冒泡

    • event.cancelBubble = true;
      

js16

• 事件的委派

  • 我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的

    我们可以尝试将其绑定给元素的共同的祖先元素

  • 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件

  • 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能

    • ·target

      • event中的target表示的触发事件的对象

    • 如果触发事件的对象是我们期望的元素，则执行否则不执行

      • if (event.target.className == "link") {
            alert("我是ul的单击响应函数");
        }
        

• 使用 对象.事件 = 函数 的形式绑定响应函数

  • 它只能同时为一个元素的一个事件绑定一个响应函数
  • 不能绑定多个，如果绑定了多个，则后边的会覆盖掉前边

• addEventListener()

  • 通过这个方法也可以为元素绑定响应函数
  • 参数
    • 事件的字符串，不要on
    • 回调函数，当事件触发时该函数会被调用
    • 是否在捕获阶段触发事件，需要一个布尔值，一半都传false
  • 使用addEventListener() 可以同时为一个元素的相同事件同时绑定多个响应函数
    • 当事件被触发时，响应函数将会按照函数的绑定顺序执行
    • 这个方法不支持IE8及以下的浏览器

• attachEvent()

• 在IE8中可以使用attachEvent()来绑定事件

• 参数

  • 事件的字符串，要on
  • 回调函数

• 这个方法也可以同时为一个事件绑定多个处理函数

  • 不同的是他是后绑定先执行，执行顺序和addEventListener()相反

• 定义一个函数，用来为指定元素绑定响应函数

  • addEventListener() 中的this ，是绑定事件的对象

  • attachEvent()中的this，是window

    • 需要统一两个方法this

  • /*
    * 参数：
    * 	obj 要绑定事件的对象
    * 	eventStr 事件的字符串(不要on)
    *  callback 回调函数
    */
    function bind(obj , eventStr , callback){
    	if(obj.addEventListener){
    		//大部分浏览器兼容的方式
    		obj.addEventListener(eventStr , callback , false);
    	}else{
    		/*
    			* this是谁由调用方式决定
    			* callback.call(obj)
    			*/
    		//IE8及以下
    		obj.attachEvent("on"+eventStr , function(){
    			//在匿名函数中调用回调函数
    			callback.call(obj);
    		});
    	}
    }
    

• 事件的传播

  • 关于事件的传播，网景公司和微软公司有不同的理解

    • 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就是说事件应该在冒泡阶段执行
    • 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后再向内传播给后代元素
    • W3C综合了两个公司的方案，将事件传播分成了三个阶段
      • 捕获阶段
        • 在捕获阶段时是从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
      • 目标阶段
        • 事件捕获到目标元素，捕获结束开始在目标元素上触发事件
      • 冒泡阶段
        • 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件
      • 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true，一般情况下我们不会希望在捕获阶段就触发事件，所以这个参数一般都是false
    • IE8及以下的浏览器中没有捕获阶段

  • function bind(obj, eventStr, callback) {
    	if (obj.addEventListener) {
    		//大部分浏览器兼容的方式
    		obj.addEventListener(eventStr, callback, true);
    	} else {
    		/*
    			* this是谁由调用方式决定
    			* callback.call(obj)
    			*/
    		//IE8及以下
    		obj.attachEvent("on" + eventStr, function () {
    			//在匿名函数中调用回调函数
    			callback.call(obj);
    		});
    	}
    }
    

• 拖拽

  • 流程

    • 当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
    • 当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
    • 当鼠标松开时，被拖拽元素固定在当前位置 onmouseup

  • setCapture()

    • 当调用一个元素的setCapture()方法以后，这个元素将会把下一次所有的鼠标按下的相关的事件捕获到自身上

    • 只有IE支持，但是在火狐中调用时不会报错

      • 而如果使用Chrome调用，会报错

      • //不兼容的解决方案
        if(box1.setCapture){
        box1.setCapture();
        }
        

    • box1.setCapture && box1.setCapture();
      //在鼠标松开时，取消对事件的捕获
      box1.releaseCapture && box1.releaseCapture();
      

  • 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容

    • 此时会导致拖拽功能的异常，这个是浏览器提供的默认行为

    • 如果不希望发生这个行为，则可以通过return false来取消默认行为

    • 但是这招对IE8不起作用

• onmousewheel

  • 鼠标滚轮滚动事件，会在滚轮滚动时触发
  • 但是火狐不支持该属性
    • 在火狐中需要使用DOMMouseScroll 来绑定滚动事件
      • 注意该事件需要通过addEventListener()函数来绑定
  • event.wheelDelta 可以获取鼠标滚轮的方向
    • 向上120 向下-120
    • 这个值不看大小，只看政府
    • 但是event.wheelDelta这个属性火狐中不支持
      • 在火狐中使用event.detail来获取滚动的方向
      • 向上 -3 向下 3

• 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false

  • 需要使用event来取消默认行为event.preventDefault();

    • 但是IE8不支持event.preventDefault(); 如果直接调用会报错

    • event.preventDefault && event.preventDefault();
      

      • 使用场景：
        • 当滚轮滚动时，如果浏览器中有滚动条，滚动条会随之滚动
        • 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为

• 键盘事件

  • onkeydown

    • 按键被按下
    • 对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发
    • 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快，这种设计是为了防止误操作的发生

  • onkeyup

    • 按键被松开

  • 键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document

  • keyCode

    • 可以通过keyCode来获取按键的编码

      • 通过它可以判断哪个按键被按下

    • 除了keyCode，事件对象中还提供了几个属性

      • altKey

      • ctrlKey

      • shiftKey

      • 这三个用来判断alt ctrl shift 是否被按下

        • 按下则返回true，否则返回false

      • //判断一个y是否被按下
        //判断y和ctrl是否同时被按下
        if (event.keyCode === 89 && event.ctrlKey) {
        	console.log("ctrl和y都被按下了");
        }
        

  • 例子

    • input.onkeydown = function(event){
      	event = event || window.event;
      //console.log(event.keyCode);
      //数字 48 - 57
      //使文本框中不能输入数字
      	if(event.keyCode >= 48 && event.keyCode <= 57){
      //在文本框中输入内容，属于onkeydown的默认行为
      //如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
      		return false;
      	}
      };
      

    • //使div可以根据不同的方向键向不同的方向移动
      /*
      	* 按左键，div向左移
      	* 按右键，div向右移
      	* 。。。
      	*/
      window.onload = function () {
      	//为document绑定一个按键按下的事件
      	document.onkeydown = function (event) {
      		event = event || window.event;
      
      		//定义一个变量，来表示移动的速度
      		var speed = 10;
      
      		//当用户按了ctrl以后，速度加快
      		if (event.ctrlKey) {
      			speed = 500;
      		}
      
      		/*
      			* 37 左
      			* 38 上
      			* 39 右
      			* 40 下
      			*/
      		switch (event.keyCode) {
      			case 37:
      				//alert("向左"); left值减小
      				box1.style.left = box1.offsetLeft - speed + "px";
      				break;
      			case 39:
      				//alert("向右");
      				box1.style.left = box1.offsetLeft + speed + "px";
      				break;
      			case 38:
      				//alert("向上");
      				box1.style.top = box1.offsetTop - speed + "px";
      				break;
      			case 40:
      				//alert("向下");
      				box1.style.top = box1.offsetTop + speed + "px";
      				break;
      		}
      	};
      };
      

js17

• BOM

  • 浏览器对象模型
  • BOM可以使我们通过JS来操作浏览器
  • 在BOM中为我们提供了一组对象，用来完成对浏览器的操作
  • BOM对象
    • Window
      • 代表的是整个浏览器的窗口，同时window也是网页中的全局对象
    • Navigator
      • 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
    • Location
      • 代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者浏览器跳转页面
    • History
      • 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录
      • 由于隐私问题，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页
      • 而且该操作只在当次访问时有效
    • Screen
      • 代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关信息
    • 这些BOM对象在浏览器中都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用

• Navigator

  • 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器

  • 由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了

    • 一般我们只会使用userAgent来判断浏览器的信息

    • userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，不同的浏览器会有不同的userAgent

      • 火狐的userAgent

        • Mozilla/5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0

      • Chrome的userAgent

        • Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36

      • IE8

        • Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)

      • IE9

        • Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)

      • IE10

        • Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)

      • IE11

        • Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
        • 在IE11中已经将微软和IE相关的标识都已经去除了，所以我们基本已经不能通过UserAgent来识别一个浏览器是否是IE了

      • var ua = navigator.userAgent;
        console.log(ua);
        if(/firefox/i.test(ua)){
        	alert("你是火狐！！！");
        }else if(/chrome/i.test(ua)){
        	alert("你是Chrome");
        }else if(/msie/i.test(ua)){
        	alert("你是IE浏览器~~~");
        }else if("ActiveXObject" in window){
        	alert("IE11");
        }
        

      • 如果通过UserAgent不能判断，还可以通过一些浏览器中特有的对象，来判断浏览器的信息

        • 比如：ActiveXObject

        • if("ActiveXObject" in window){
          	alert("你是IE，我已经抓住你了~~~");
          }else{
          	alert("你不是IE~~~");
          }
          

• History

  • 对象可以用来操作浏览器向前或向后翻页

  • length

    • 可以获取到当前访问的链接数量

    • history.length
      

  • back()

    • 可以用来回退到上一个页面，作用和浏览器的回退按钮一样

    • history.back();
      

  • forward()

    • 可以跳转下一个页面，作用和浏览器的前进按钮一样

    • history.forward();
      

  • go()

    • 可以用来跳转到指定的页面

    • 它需要一个整数作为参数

      • 1：表示向前跳转一个页面 相当于forward()

      • 2：表示向前跳转两个页面

      • -1：表示向后跳转一个页面

      • -2：表示向后跳转两个页面

      • history.go(-2);
        

• Location

  • 该对象中封装了浏览器的地址栏的信息

  • 如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）

  • 如果直接将location属性修改为一个完整的路径，或相对路径

    • 则我们页面会自动跳转到该路径，并且会生成相应的历史记录

    • location = "http://www.baidu.com"
      

  • assign()

    • 用来跳转到其他的页面，作用和直接膝盖location

    • location.assign("http://www.baidu.com");
      

  • reload()

    • 用于重新加载当前页面，作用和刷新按钮一样

    • 如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面

    • location.reload(true);
      

  • replace()

    • 可以使用一个新的页面替换当前页面，调用完毕也会跳转页面

    • 不会生成历史记录，不能使用回退按钮回退

    • location.replace("01.BOM.html");
      

• 定时调用

  • JS的程序的执行速度是非常快的

    • 如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用

  • setInterval()

    • 可以量一个函数，每隔一段时间执行一次

      • 参数
        • 回调函数，该函数会每隔一段时间被调用一次
        • 每次调用间隔的时间，单位是毫秒
      • 返回值
        • 返回一个Number类型的数据
        • 这个数字用来作为定时器的唯一标识

    • 关闭

      • clearInterval()

        • 可以用来关闭一个定时器

        • 方法中需要用一个定时器的标识作为参数，这样关闭标识对应的定时器

        • clearInterval(timer);
          

        • window.onload = function () {
          	/*
          		* 使图片可以自动切换
          		*/
          	//获取img标签
          	var img1 = document.getElementById("img1");
          
          	//创建一个数组来保存图片的路径
          	var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];
          
          	//创建一个变量，用来保存当前图片的索引
          	var index = 0;
          
          	//定义一个变量，用来保存定时器的标识
          	var timer;
          
          	//为btn01绑定一个单击响应函数
          	var btn01 = document.getElementById("btn01");
          	btn01.onclick = function () {
          		   /*
          			* 目前，我们每点击一次按钮，就会开启一个定时器，
          			* 	点击多次就会开启多个定时器，这就导致图片的切换速度过快，
          			* 	并且我们只能关闭最后一次开启的定时器
          			*/
          
          		//在开启定时器之前，需要将当前元素上的其他定时器关闭
          		clearInterval(timer);
          
          		/*
          			* 开启一个定时器，来自动切换图片
          			*/
          		timer = setInterval(function () {
          			//使索引自增
          			index++;
          			//判断索引是否超过最大索引
          			/*if(index >= imgArr.length){
          				//则将index设置为0
          				index = 0;
          			}*/
          			index %= imgArr.length;
          			//修改img1的src属性
          			img1.src = imgArr[index];
          		}, 1000);
          	};
          	//为btn02绑定一个单击响应函数
          	var btn02 = document.getElementById("btn02");
          	btn02.onclick = function () {
          		//点击按钮以后，停止图片的自动切换，关闭定时器
          		/*
          			* clearInterval()可以接收任意参数，
          			* 	如果参数是一个有效的定时器的标识，则停止对应的定时器
          			* 	如果参数不是一个有效的标识，则什么也不做
          			*/
          		clearInterval(timer);
          	};
          };
          

        • //使div可以根据不同的方向键向不同的方向移动
          		/*
          		 * 按左键，div向左移
          		 * 按右键，div向右移
          		 * 。。。
          		 */
          		window.onload = function () {
          			//定义一个变量，来表示移动的速度
          			var speed = 10;
          
          			//创建一个变量表示方向
          			//通过修改dir来影响移动的方向
          			var dir = 0;
          
          			//开启一个定时器，来控制div的移动
          			setInterval(function () {
          				/*
          				 * 37 左
          				 * 38 上
          				 * 39 右
          				 * 40 下
          				 */
          				switch (dir) {
          					case 37:
          						//alert("向左"); left值减小
          						box1.style.left = box1.offsetLeft - speed + "px";
          						break;
          					case 39:
          						//alert("向右");
          						box1.style.left = box1.offsetLeft + speed + "px";
          						break;
          					case 38:
          						//alert("向上");
          						box1.style.top = box1.offsetTop - speed + "px";
          						break;
          					case 40:
          						//alert("向下");
          						box1.style.top = box1.offsetTop + speed + "px";
          						break;
          				}
          			}, 30);
          
          			//为document绑定一个按键按下的事件
          			document.onkeydown = function (event) {
          				event = event || window.event;
          				//当用户按了ctrl以后，速度加快
          				if (event.ctrlKey) {
          					speed = 500;
          				} else {
          					speed = 10;
          				}
          				//使dir等于按键的值
          				dir = event.keyCode;
          			};
          			//当按键松开时，div不再移动
          			document.onkeyup = function () {
          				//设置方向为0
          				dir = 0;
          			};
          		};
          

• 延时调用

  • 延时调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次

  • 延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次

  • 延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己需要去选择

    • 使用clearTimeout()来关闭一个延时调用

    • clearTimeout(timer);
      

• 定义一个函数，用来获取指定元素的当前样式

  • 参数

    • obj 要获取的样式的元素

    • name 要获取的样式名

    • function getStyle(obj , name){
      	if(window.getComputedStyle){
      		//正常浏览器的方式，具有getComputedStyle()方法
      		return getComputedStyle(obj , null)[name];
      	}else{
      		//IE8的方式，没有getComputedStyle()方法
      		return obj.currentStyle[name];
      	}
      }
      

  • 例子

    • <script type="text/javascript">
        		window.onload = function () {
        			//获取box1
        			var box1 = document.getElementById("box1");
        			//获取btn01
        			var btn01 = document.getElementById("btn01");
        			//获取btn02
        			var btn02 = document.getElementById("btn02");
        			//点击按钮以后，使box1向右移动（left值增大）
        			btn01.onclick = function () {
        				move(box1, 800, 10);
        			};
        			//点击按钮以后，使box1向左移动（left值减小）
        			btn02.onclick = function () {
        				move(box1, 0, 10);
        			};
        		};
        		//定义一个变量，用来保存定时器的标识
        		var timer;
        		//尝试创建一个可以执行简单动画的函数
        		/*
        		 * 参数：
        		 * 	obj:要执行动画的对象
        		 * 	target:执行动画的目标位置
        		 * 	speed:移动的速度(正数向右移动，负数向左移动)
        		 */
        		function move(obj, target, speed) {
        			//关闭上一个定时器
        			clearInterval(timer);
        			//获取元素目前的位置
        			var current = parseInt(getStyle(obj, "left"));
        			//判断速度的正负值
        			//如果从0 向 800移动，则speed为正
        			//如果从800向0移动，则speed为负
        			if (current > target) {
        				//此时速度应为负值
        				speed = -speed;
        			}
        			//开启一个定时器，用来执行动画效果
        			timer = setInterval(function () {
        				//获取box1的原来的left值
        				var oldValue = parseInt(getStyle(obj, "left"));
        				//在旧值的基础上增加
        				var newValue = oldValue + speed;
        				//判断newValue是否大于800
        				//从800 向 0移动
        				//向左移动时，需要判断newValue是否小于target
        				//向右移动时，需要判断newValue是否大于target
        				if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
        					newValue = target;
        				}
        				//将新值设置给box1
        				obj.style.left = newValue + "px";
        
        				//当元素移动到0px时，使其停止执行动画
        				if (newValue == target) {
        					//达到目标，关闭定时器
        					clearInterval(timer);
        				}
        			}, 30);
        		}
        		/*
        		 * 定义一个函数，用来获取指定元素的当前的样式
        		 * 参数：
        		 * 		obj 要获取样式的元素
        		 * 		name 要获取的样式名
        		 */
        		function getStyle(obj, name) {
        
        			if (window.getComputedStyle) {
        				//正常浏览器的方式，具有getComputedStyle()方法
        				return getComputedStyle(obj, null)[name];
        			} else {
        				//IE8的方式，没有getComputedStyle()方法
        				return obj.currentStyle[name];
        			}
        		}
        	</script>